盒模型的一些解析

盒模型分类

盒模型分为两类: 普通盒模型(box-sizing: content-box), 怪异盒模型(box-sizing: border-box).
普通盒模型和怪异盒模型的区别就是 设置width, height的时候是给什么区域设置的. eg:

content-box设置 width:100px; height:100px; 那么不管你怎么更改 border padding的值,都不会影响到内容区的值.换句话说, 你设置padding 和 border值时候,会改变盒子的总尺寸
border-box(边框盒子)相对于上面的,这个更好理解.字面意思: 给盒子设置 width和 height的时候设置的是盒子的总尺寸, 那么这时候你再去改变 border padding值,就会影响到内容区content的尺寸.

盒子的基本标签就先不说了

如今说说你们都懂的inline, block, inline-block的特性, 但每每忘记在哪使用, 或者是知道在哪用可是没注意到为何这么用

inline

行内元素要居中的时候, 得给父元素设置text-align:center;行内元素也有细分的:有兴趣的同窗能够看看

• 行内元素先后都能跟内容,就是能够同行显示.
• 行内元素不能设置宽高.
  那么有些同窗就好好奇了,不设置高度能够,不设置宽度的话,我元素和元素间的空格怎么办??用 一个个敲吗?hmmm,能够试试用margin,宽度不能设置,那就用margin外边距 把别的元素顶开
• 在结构上:行内元素不能放块元素
  凡事都有特列的,a标签这个跳转连接就能够放个块元素.其实你们也常常见到,就好比去淘宝买东西,不是只能点图片或者文字他才跳转.点击整个区域任意部分,他都会跳转.
• 内边距只对内联元素产生影响,无视块元素
  这个说的是行内元素的margin-top, margin-bottom不会生效. 要注意的是这个padding, 他是会"生效"的 可是不会影响上下的布局. 这里说的"生效"意思是: 若是你给span 设置一个background-color会发现背景颜色会衍生到另外一行,可是并不对挤开别的元素(换句话说就是不会影响布局,不占位置)

• 便签之间的空格解析:
  这个也挺头疼的,那怎么去除便签间的空格解析呢?
  咱们能够给父元素设置font-size:0;,可是这么作的话就得给子元素从新设置font-size值, 由于这个属性是能够继承的.

  咱们还可使用margin:负值值去调节.这个比改变font-size靠谱多了.

block

• 独占一行, 这个属性同时也带来不设置宽度的话,默认宽度是100%. 这个100%不是相对于可视窗口的,100%是相对于父元素宽度的百分百,也能够理解为继承父元素的宽度.(怎么好理解怎么来)
• 高度是由内容撑开的 这个应用会在inline-block里面一块儿讲到.很方便的一个东西(一个小技巧)
• 能够设置内外边距(那么这个内外边距的设定加上边框就能够看上面的两种盒模型了)
• 块元素比行内元素好的是,块元素能够包含全部元素.可是p标签开始搞特殊了,这个p标签感受就跟行内元素同样,不能放块元素.非要放个div进去的话,就会致使浏览器的fail silence把这个默认为是2个p标签包围1个div标签.

inline-block

相对来讲inline-block 会比上面那两个用的多一点. 毕竟还没学float position的时候,仍是要靠inline-block布局的.

• 看这个单词就大概理解了.inline 和 block加了个连字符.所以本质上是具有了inline元素的性质和块元素的性质.
• 支持宽高. 能够随意的给width height至关因而上面的盒模型
• 上下左右margin值都有效,可是不能像block那样用auto居中.margin:0 auto,那有些同窗想要居中的话怎么办???? 这时候用到的是inline的性质,给父元素设置一个text-align: center(说下怎么去理解这个margin: auto 不生效, 行内元素的话是由多个的行内元素组成,auto广泛是100%的意思,block使用的时候左右两边100%就是居中, 可是多个行内元素auto到中间互相挤兑就放不下,因此不能用也无效)
• 标签间有解析空格: 处理方法和inline同样
• 上下左右padding 生效, 也占空间(这是和inline的区别),参考上面的盒模型理解
• img标签能够理解为inline-block 可是img是inline元素(怎么回事呢?)
• 若是不去设置宽高的话,inline-block的宽高就由内容撑开

inline-blcok 最后一个性质使用

不去设置内容的话就能够由里面的元素撑开,还在头疼每次作小demo(案例)的时候,由于1px,2px的测量偏差,致使内容换行 或者是要用调试台去调的刚恰好?

这时候能够用宽高由内容撑开.给最外面的大盒子先设置成display:inline-block.而后只管往里面放你须要的元素tag/element,设置margin padding值,最外面的大盒子总会被撑开的. 全弄完了以后就能够打开调试台,看看你这个盒子多大, 而后设置固定的width值 或者是改回display:block

那么block,inline-block的height也是由内容撑开所以一样也能够先不设置(-->这里图文并茂)