前端学习中有哪些盒模型

什么是盒子

CSS初学者在开始学习CSS的基本知识时，必须学习过“padding”、“border”和“margin”，即内部边距、边框和外部边距。它们三者构成一个“盒子”。就像我们收到的快递一样，我们原本买了一个小手机，却收到了这么大的箱子。因为手机的白色包装盒和手机机之间有一个隔板（内缘），所以手机的白色盒子有厚度。虽然它很薄（边框），但在箱子和快递箱之间还有一层泡沫板（外缘）。这是一个典型的盒子。

真正的内容是这些单词，文本周围有10倍的内边距、5倍的边框和10倍的外边距。

盒子模型的宽度如何计算

1.固定宽度的盒子

<div style="padding:10px;border:5px solid blue; margin: 10px; width:300px;">
//内容
</div>

得到网页效果之后，我们可以用截图工具来量一下文字内容的宽度。发现，文字内容的宽度刚好是 300px，也就是我们设置的宽度。

在盒子模型中，我们设置的宽度都是内容宽度，不是整个盒子的宽度。而整个盒子的宽度是：（内容宽度 + `border`宽度 + `padding`宽度 + `margin`宽度）之和**。这样我们改四个中的其中一个，都会导致盒子宽度的改变。这对我们来说不友好。

2.充满父容器的盒子

默认情况下，`div`是`display:block`，宽度会充满整个父容器。

<div style="padding:10px;
border:5px solid blue; margin: 10px; width:300px;">
</div>

但是别忘记，这个 div 是个盒子模型，它的整个宽度包括（内容宽度 + `border`宽度 + `padding`宽度 + `margin`宽度），整个的宽度充满父容器。

问题就在这里。如果父容器宽度不变，我们手动增大`margin`、`border`或`padding`其中一项的宽度值，都会导致内容宽度的减少。极端情况下，如果内容的宽度压缩到不能再压缩了（例如一个字的宽度），那么浏览器会强迫增加父容器的宽度。这可不是我们想要看到的。