content 区域就是 width/height 真正作用的地方
浏览器默认把 width 和 height 解释为 content 区域的尺寸，不是你肉眼看到的“整个方块”。比如写 width: 200px; padding: 10px; border: 5px solid #000;，内容区确实是 200px 宽，但元素实际占位是 200 + 10×2 + 5×2 = 230px。很多人调样式时发现“明明设了 200，怎么撑出 230”，卡在这儿。
- content 区域只受
width/height直接控制（除非被 flex 或 grid 覆盖） - 它不包含 padding、border、margin —— 这三者都是“额外加在 content 外面”的
- 内联元素（如
span）的width/height默认无效，因为它的 content 区由内容流自动决定
为什么 content 尺寸经常“不等于视觉大小”
因为默认盒模型是 content-box，而人脑直觉更习惯“我设了 200px 宽，那整个框就该是 200px”。这种错位在固定宽度容器里尤其明显：加个 padding: 16px，内容就被挤窄了；再加 border: 1px，可能直接溢出父容器。
- 解决办法是统一用
box-sizing: border-box;，让width指代“边框外沿总宽” - 全局重置推荐写法：
* { box-sizing: border-box; }（IE8+ 支持，无需前缀） - 注意：
box-sizing不继承，但通配符写法对所有元素（含伪元素）都生效
content 区域的实际宽度怎么算？看这几个典型场景
当你要精确控制布局或做响应式适配时，必须手动算 content 宽度。公式很简单：
content-width = width - (left padding + right padding) - (left border + right border)
立即学习“前端免费学习笔记（深入）”；
- 标准模型下：
width: 300px; padding: 20px; border: 3px;→ content 宽 = 300 − 40 − 6 = 254px - border-box 模型下：
width: 300px; padding: 20px; border: 3px;→ content 宽 = 300 − 40 − 6 = 254px（但此时width已代表总宽，你设的就是 300） - 百分比布局中更易翻车：
width: 50%; padding: 20px;→ content 宽 = 父宽 × 50% − 40px，结果随父宽变化非线性
flex 容器里 content 尺寸会被“覆盖”，别硬套 width
一旦父元素设了 display: flex，子元素的 width 就不再是最终尺寸——它只是 flex-basis 的 fallback 值。主轴方向上真正起作用的是 flex-basis，不是 width。
- 写
width: 200px; flex: 1;，元素大概率会拉伸填满剩余空间，200px 被忽略 - 想让 flex item 严格保持 200px 宽，得写
flex: 0 0 200px;（即flex-grow: 0; flex-shrink: 0; flex-basis: 200px;） - 这时候再加
padding或border，依然要按当前盒模型算 content 区——box-sizing仍生效
content 区域看着最基础，但它和 box-sizing、display 类型、父容器布局方式深度耦合。一个没注意，width 就可能变成“幻影参数”——看着写了，其实没起效。
