CSS 盒模型

盒模型

CSS盒模型是网页布局的核心概念之一，它描述了网页元素的物理结构和元素内容与周围元素之间的关系。根据W3C规范，每个HTML元素都被视为一个矩形盒子，这个盒子由以下四个部分组成：

1. 内容区（Content area）：

   • 这个区域包含了元素的实际内容，比如文本、图片等。

   • 它是由width和height属性定义的。

2. 内边距（Padding）：

   • 内边距位于内容区的四周，用来在内容和其他部分之间创建空间。

   • 它可以通过设置padding属性来调整，包括padding-top, padding-right, padding-bottom, 和 padding-left。

3. 边框（Border）：

   • 边框围绕着内边距和内容区，用来划分和装饰元素。

   • 可以通过border属性设置边框的样式、宽度和颜色。

4. 外边距（Margin）：

   • 外边距位于边框之外，用于分隔相邻的元素。

   • 可以通过margin属性控制，包括margin-top, margin-right, margin-bottom, 和 margin-left。

默认情况下，块级元素的宽度为父元素的100%，而高度则根据内容自动调整。但是，当设置了width和height时，这些尺寸只适用于内容区。如果需要考虑内边距、边框和外边距，则可以使用box-sizing属性。例如：

• box-sizing: content-box;（默认值）：width和height仅适用于内容区。

• box-sizing: border-box;：width和height包括内边距和边框。

理解盒模型对于正确地设计和调试网页布局至关重要。通过合理设置这四个部分，开发者可以精确地控制网页上各个元素的位置和外观。

什么是“盒子”

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

如上图，真正的内容就是这些文字，文字外围有 10px 的内边距，5px 的边框，10px 的外边距。看到盒子了吧？

盒子模型的宽度如何计算

固定宽度的盒子

<div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;">之前看过一篇文章，叫做《浏览器工作原理：新式网络浏览器幕后揭秘》，文章言简意赅的介绍的浏览器的工作过程，web前端
</div>

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

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

没关系，这个东西不友好早就有人发现了，而且已经解决，下文再说。

充满父容器的盒子

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

<div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;">之前看过一篇文章，叫做《浏览器工作原理：新式网络浏览器幕后揭秘》，文章言简意赅的介绍的浏览器的工作过程，web前端之前看过一篇文章，叫做《浏览器工作原理：新式网络浏览器幕后揭秘》，文章言简意赅的介绍的浏览器的工作过程，web前端
</div>

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

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

包裹内容的盒子

这种情况下比较简单，内容的宽度按照内容计算，盒子的宽度将在内容宽度的基础上再增加（padding宽度 + border宽度 + margin宽度）之和。

<div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;">之前看过一篇文章，叫做《浏览器工作原理：新式网络浏览器幕后揭秘》
</div>

box-sizing:border-box

前面提到，为盒子模型设置宽度，结果只是设置了内容的宽度，这个不合理。如何解决这一问题？答案就是为盒子指定样式：**box-sizing:border-box**。

<div style="padding:10px; border:5px solid blue; margin: 10px; width:300px; box-sizing:border-box;">之前看过一篇文章，叫做《浏览器工作原理：新式网络浏览器幕后揭秘》
</div>

上图中，为div设置了box-sizing:border-box之后，300px 的宽度是内容 + padding + 边框的宽度（不包括margin），这样就比较符合我们的实际要求了。建议大家在为系统写 CSS 时候，第一个样式是：

* {box-sizing:border-box;
}

大名鼎鼎的 Bootstrap 也把box-sizing:border-box加入到它的*选择器中，我们为什么不这样做呢？

纵向 margin 重叠

这里提到 margin，就不得不提一下 margin 的这一特性——纵向重叠。如<p>的纵向 margin 是 16px，那么两个<p>之间纵向的距离是多少？—— 按常理来说应该是 16 + 16 = 32px，但是答案仍然是 16px。因为纵向的 margin 是会重叠的，如果两者不一样大的话，大的会把小的“吃掉”。