返回知识详解
HTML/CSS 基础
盒模型与 box-sizing
理解 content / padding / border / margin 的构成，以及 content-box 与 border-box 的差异。
盒模型的四层结构
每个元素都是一个矩形盒子，由内到外分为四层：
- 内容区 content：放文本与子元素
- 内边距 padding：内容与边框之间的空白
- 边框 border：盒子的边线
- 外边距 margin：盒子与其它盒子之间的距离
拖动下面的滑块，观察各层如何叠加，以及切换 box-sizing 时 width 含义的变化。
⚡ 参数可调面板
声明的 width：120px
盒子实际渲染宽度：172px
含外边距占位宽度：204px
content
content-box vs border-box
默认 box-sizing 为 content-box：你设置的 width 只是内容区宽度，padding 和 border 会额外撑大盒子。
border-box 下，width 表示内容区 + padding + border 的总和，盒子不会被撑大——这让尺寸计算直观得多，因此大量项目会全局设置 * { box-sizing: border-box }。