盒模型的一些解析

盒模型分类

盒模型分为两类: 普通盒模型 (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也是由内容撑开因此同样也可以先不设置(–> 这里图文并茂)