CSS 盒模型 BoxModel

CSS中任意元素都是一个盒子，学习盒模型能够帮助我们理解CSS，建立复杂的CSS架构模型。

块与内联块 Block and inline boxes

CSS中有两种类型的盒子：block boxes and inline boxes

block box

1. 会新开一行
2. 会跟它的容器一样宽，填充满所有的空间
3. 可以使用 width 和 height
4. Padding, margin and border的修改会导致其他的元素移动

Heading

和

等都是Block box

inline boxes

1. 不会新开一行
2. 不能使用 width 和 height
3. 水平方向上的Padding, margin and border的修改有效，会导致其他的元素移动
4. 竖直方向上的Padding, margin and border的修改有效，但是不会导致其他的元素移动

, , , 等都是 Inline box

元素的 outer display type 被定义在display属性，值为box或者inline

Inner and outer display types

在上面提到过 outer display type 定义了盒子的类型，盒子同时还拥有一个 inner display type，定义了盒子内部的元素是如何摆布的。

一般来说都是 normal flow，也就是按照上述方式摆布。

我们可以通过修改 display 属性来改变，比如 display: flex; outer display type is将会变为 block 类型, inner display type 则会变为 flex 类型. 这个盒子的下一代元素都会变成 flex items，其摆布规则也发生了变化，我们将在下一篇文章讲解。

一般情况下，元素都是 normal flow，也就是 box 或者 inline 类型。

在这篇文章中，我们只需要知道，修改 display 属性可以修改元素的outer display type，从而影响与其他元素的排布。

什么是CSS盒模型？

CSS盒模型是针对block box 而言的，inline box 仅仅使用到了部分的属性。

盒模型定义了 margin, border, padding, content等属性是如何共同作用，最终形成一个盒子显示在屏幕上。

有 standard box model 和 alternate box model

盒子的组成部分

box-model.png

• Content box: 内容展示区，用width和height来控制大小.
• Padding box: 在content附近的空白空间，可以用padding等属性控制.
• Border box: 包裹住content和padding，可以用border等属性控制.
• Margin box: 盒子最外层的空白区域，可以用margin等属性控制.

标准盒子模型

盒子的宽度 = width + 2 * padding + 2 * border
盒子的高度 = height + 2 * padding + 2 * border

margin 不会被计算进盒子的大小中.

alternate box model

上述的标准盒子模型计算比较麻烦，CSS 因此定义了一个替换版本的盒子模型。

在这个模型中，width 指的是整个盒子的宽度，因此 content 的宽度 = width - 2 * padding + 2 * border

默认情况下，盒子都是标准模型，可以通过 box-sizing: border-box 修改为 替换版本。

如果我们希望全都使用替换模型的话，可以在html中设置，并且令其他的元素继承该属性。

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

可以使用浏览器的开发者工具查看Box Model

margins, padding, borders

Margin

可以有正值或者负值，在某一边设置负值会导致盒子与别的盒子重叠。

无论是标准模型或者是替换模型，margin都是在计算出盒子的大小后才加上去。

margin collapsing

当两个盒子的margin重合的时候，会发生margin collapse。当两个margin值为正值时，其合并后的margin为两个margin值中的最大值；当其中一个margin值为负数时，合并后的margin为最大值减去该负数的绝对值；当两个margin均为负值时，则合并后的margin为0。

Borders

可以设置的属性值

• border-width
• border-style
• border-color

dotted,double,solid等等

Padding

不能为负值

The box model and inline boxes

只有部分的属性在inline boxes 中可用
width和height属性被忽略，竖直方向的 margin, padding 和 border 都被保留了，但是不会影响其与别的元素的排布关系（也就是说，修改数值不会拉开距离），因此 padding 和 border会跟其他元素重叠。 水平方向上的 padding, margins, 和 borders 则是保持生效的。

当你需要使用width和height等属性，且保证不会出现上述的重叠现象，但是又不想新开一行的时候，可以使用：

display: inline-block

拥有以下特性：

• width 和 height 属性被保留.
• padding, margin 和 border生效.
• 不新开一行

比如我们需要增大点击链接的点击范围，但是是inline box，则可以使用上述代码修改，为其添加一个padding，这样子按钮就会自动排布而不会与其他元素重叠了。

---

总结MDN文章，如有帮助，请点赞支持，谢谢