盒模型
CSS盒模型是网页布局的核心概念之一，它描述了网页元素的物理结构和元素内容与周围元素之间的关系。根据W3C规范，每个HTML元素都被视为一个矩形盒子，这个盒子由以下四个部分组成：
-
内容区（Content area）：
-
这个区域包含了元素的实际内容，比如文本、图片等。
-
它是由
width和height属性定义的。
-
-
内边距（Padding）：
-
内边距位于内容区的四周，用来在内容和其他部分之间创建空间。
-
它可以通过设置
padding属性来调整，包括padding-top,padding-right,padding-bottom, 和padding-left。
-
-
边框（Border）：
-
边框围绕着内边距和内容区，用来划分和装饰元素。
-
可以通过
border属性设置边框的样式、宽度和颜色。
-
-
外边距（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 是会重叠的，如果两者不一样大的话，大的会把小的“吃掉”。
