CSS 盒模型

预备知识

写在前面

在阅读本文之前，请确保你已经熟悉预备知识中关于盒模型，以及两种常见的盒模型之间的区别

首先我们将讲到标准盒模型以及替代盒模型，两者很好区分，所以这部分并不难；然后我们研究构成盒模型的四要素（此处会填之前埋下的关于速记属性的一个坑）；我们还会讲到 display 属性，为之后学习更加复杂的布局排版作铺垫

盒模型

一个盒模型由四个部分组成：内容 (content box)，内边距 (padding box)，边界 (border box) 和外边距 (margin box)

标准盒模型

边界以内的部分将会决了盒子的实际大小，举个例子

.box {
    width: 80vw; // 视口宽度的80%
    height: 200px;
    padding: 0 auto; // {上下,左右}={0,自动调节}, 效果是文本居中上端显示
    border: 2px solid black; // 2px宽的黑色实线边框
    margin: 10px;
    
    line-height: 200px; // 配合 padding 以及 height 实现文本居中显示
}

假设 width 计算出来为 400px，那么这个盒模型的实际宽度 = width + padding-left + padding-right + 2*border

替代（IE）盒模型

如果你觉得上述计算过程过于繁琐，那么还有另一种模型——替代盒模型，它直接用 height 表示上下边框 (外沿) 之间的距离，用 width 表示左右边框 (外沿) 之间的距离

1
2
3

.box {
  box-sizing: border-box;
}

外边距

速记属性

margin 是一个速记属性，相当于 margin-top， margin-right， margin-bottom 和 margin-left 的集合

外边距折叠

我们已经强调过几遍，标准盒模型的大小是由边框及其以内的部分所决定，margin 只负责将盒子周围的元素推开，那么两个上下相邻盒子之间的 margin 相遇，该如何处理呢？这里就涉及到外边距折叠的问题了

如果你有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小

注意：有许多规则规定了什么时候外边距会折叠，什么时候不会折叠。详见 Reference 的参考资料 2

边界

速记属性

border 除了有和上述 margin 类似的速记属性，更常用的是 border-width，border-style 和 border-color

1
2
3

.box {
    border: 1px solid red; // // 1px宽的红色实线边框
}

圆角边界

border-radius 是一种常见的边界样式，赋予值来调整圆角大小，它同样又与 margin 相似结构的速记属性

内边距

经过之前内容的学习，内边距 padding 说来也很简单，它是一个速记属性，相当于 padding-top， padding-right， padding-bottom 和 padding-left 的集合

内部和外部显示类型

之面我们所接触的内联 (inline) 盒子和块级 (block) 盒子，都是描述了一种外部显示类型，它规定了这个盒子与外部其他盒子在父元素下是如何布局的，而内部显示类型规定了盒子内部的元素是如何布局的

我们可以通过对 display 属性的设置，例如 block 和 inline 来控制盒子的外部显示类型；也可以设置为 flex 来控制盒子的内部显示类型；甚至可以同时控制外部和内部显示类型，例如 inline-flex 就是在内部 flex 元素外增加一个内联框

See the Pen flex, inline-flex by KiritoShaw (@KiritoShaw) on CodePen.

借由 inline-flex 启发，我们可以将 flex 也可以看成是 block-flex (并没有这个值)，表示外部显示类型是 block，而内部布局为 flex

flex 的详细用法将会在之后提到，这里并不需要过分细究，混个眼熟就行