标准盒模型包括什么

标准盒模型，content+border+padding+margin决定元素的大小。
使用盒子大小来简化大小计算并避免布局溢出。

css盒子模型及盒子模型的类型

说白了，CSS盒子模型就是网站布局的“架构框架”，所有的元素就像排列整齐的盒子。
其实很简单，但是两个模型之间的差异很容易导致混淆。

扩展一下，我们先说一下模型最重要的两个区别：在标准盒子模型下，宽度和高度只算作内容区域。
去年，当我们运行那个电子商务项目并直接使用标准模型时，我们注意到内容区域的宽度为1 .2 rem。
添加边框后宽度突然下降到1 rem；另一点是奇怪的模式，包括宽度和高度的边框和填充。
去年调整 IE6 兼容性时，3 00px 宽的框突然变成了 3 5 0px，足足有 5 % 的差异。
还有另一个重要的细节。
box-sizing：可以使用border-box进行统一管理。
去年重构时，我们将这个属性添加到所有容器中，这节省了我们更改 2 00 个元素的精力。

起初我以为可以通过调整边距来控制间距，但后来我注意到边距会以奇怪的模式重叠。
等等，还有别的事。
这种奇怪的模型在旧版 IE 中的表现更加奇怪，添加填充会压倒实际内容。

标准模型应直接使用。
除非有特殊的兼容性要求，否则最好在开发早期就对盒子模型进行故障排除。