盒模型

在 CSS 中任何元素都可以看成是一个盒子，而一个盒子是由 4 部分组成的：内容（content）、内边距（padding）、边框（border）和外边距（margin）。 盒模型有 2 种：标准盒模型和 IE 盒模型，本别是由 W3C 和 IExplore 制定的标准。

标准盒模型认为：盒子的实际尺寸 = 内容（设置的宽/高） + 内边距 + 边框

IE 盒模型认为：盒子的实际尺寸 = 设置的宽/高 = 内容 + 内边距 + 边框

在 CSS3 中新增了一个属性 box-sizing，允许开发者来指定盒子使用什么标准，它有 2 个值：

• content-box：标准盒模型；
• border-box：IE 盒模型；

盒子类型可以分成 2 类：block-level box（块级盒子） 和 inline-level box（行内级盒子）。

依据上图可以列出都有哪些块级和行内级盒子：

• 块级盒子：display 为 block、list-item、table、flex、grid、flow-root 等；
• 行内级盒子：display 为 inline、inline-block、inline-table 等；

所有块级盒子都会参与 BFC，呈现垂直排列；而所有行内级盒子都参会 IFC，呈现水平排列。

除此之外，block、inline 和 inline-block 还有什么更具体的区别呢？

block

• 占满一行，默认继承父元素的宽度；多个块元素将从上到下进行排列；
• 设置 width/height 将会生效；
• 设置 padding 和 margin 将会生效；

inline

• 不会占满一行，宽度随着内容而变化；多个 inline 元素将按照从左到右的顺序在一行里排列显示，如果一行显示不下，则自动换行；
• 设置 width/height 将不会生效；
• 设置竖直方向上的 padding 和 margin 将不会生效；

inline-block

• 是行内块元素，不单独占满一行，可以看成是能够在一行里进行左右排列的块元素；
• 设置 width/height 将会生效；
• 设置 padding 和 margin 将会生效；