什么是盒模型
在解释什么是盒模型之前，我们必须要搞明白一个概念，那就是页面中的一个元素，由哪些属性组成？先看代码：
首先HTML中只写一个DIV元素，给其设置基本宽高样式，此时这个元素在页面所占位置是200×200，也就是我们设置的 width 和 height。
接下来我将给这个元素设置一些其他样式，但 width 和 height 不变：
在 width 和 height 不变的情况下，增加了元素的 border、padding 和 margin，你认为这个元素在页面所占空间还是刚刚的200×200吗？
在页面渲染后，我们观察到div元素实际占据的空间大小为270×270，与初始设定的200×200存在明显差异。这一现象的根源在于，内边距（padding）、边框（border）和外边距（margin）同样参与了元素尺寸的计算。由此可知，一个HTML元素在页面中实际占用空间的完整计算公式为：元素总尺寸 = 内容区尺寸（content）+ 内边距（padding）+ 边框宽度（border）+ 外边距（margin），这一计算规则构成了我们熟知的“盒模型”概念。
到这里可能会有同学产生疑惑：若仅添加几个样式属性，就会导致元素宽高发生变化，那么在宽度为600px的容器内，原计划横向排列3个宽200px的元素，岂不是会因尺寸膨胀而破坏整体布局？
幸运的是，CSS提供了box-sizing属性作为解决方案。该属性可以灵活调整盒模型的计算逻辑，通过修改默认的计算规则，有效规避因元素尺寸变化引发的布局混乱问题。
元素的显示尺寸重新恢复为200×200，这是由于box-sizing: border-box属性的作用，它将内边距（padding）和边框（border）的尺寸纳入width和height的计算范围。因此，实际内容区域的尺寸从原本的200×200缩小至130×130。减少的70px空间，均匀分配给了padding和border，从而保证整个元素的总尺寸维持在设定值。
提个问题
如果padding设置300，会怎么样呢？
结果是即使box-sizing: border-box，若 padding 超过 width，浏览器会优先保证 padding 的完整性，导致元素实际宽度超出设定值。这是盒模型的一个边界情况，实际开发中应避免这种冲突。
总结
CSS盒模型将元素渲染为一个矩形盒子，由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。其中，width/height 默认仅计算内容区域，添加 padding 或 border 会导致实际尺寸扩大。通过 box-sizing: border-box 可以让 width/height 包含 padding 和 border，使布局更可控。margin 不参与尺寸计算，但影响元素在页面中的占位。
