CSS如何定义盒模型尺寸标准_开启box-sizing:border-box
热心网友
83
转载
CSS盒模型：用box-sizing: border-box告别布局“惊喜”
免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈
box-sizing: border-box 是什么，为什么需要它
简单来说，它重新定义了width和height的管辖范围。在默认的content-box模式下，你设定的宽度仅仅指内容区域的宽度。一旦加上padding和border，元素的实际占地就会悄悄“膨胀”——比如，一个width: 100px的盒子，加上padding: 10px和border: 2px solid，最终占宽就会变成124px。这种“惊喜”常常是布局错位、意外换行的元凶。
而border-box则让事情变得直观：你设定的宽高，就是整个盒子（包含内容、内边距和边框）的最终尺寸。额外的padding和border会被“压缩”进这个尺寸里，内部内容区域则会相应缩小。这其实更符合大多数人的设计直觉，也类似于早期IE“怪异模式”的行为，只不过现在是标准且可控的。
全局启用 border-box 的正确写法
想让整个项目都采用这种更友好的盒模型，通常会用通配符进行重置。但这里有几个细节需要注意，写法不同，稳妥程度也不同：
* { box-sizing: border-box; }：这是最直接的写法，但可能会影响到一些不需要此行为的元素，比如SVG图形或某些表单控件。- 更推荐的写法是：
*, *::before, *::after { box-sizing: border-box; }—— 这样能确保伪元素（如::before、::after）也被覆盖，避免它们在部分场景下依然使用content-box导致样式不一致。 - 如果你的项目中已经引入了Bootstrap这类第三方库（它们通常已全局设置了
border-box），只需确保你的重置规则在其后加载即可。在调试阶段，有时会用到html * { box-sizing: border-box !important; }来强制覆盖，但生产环境应谨慎使用!important。
哪些地方不能盲目套用 border-box
虽然全局设置很方便，但一刀切可能会带来新问题。有几个场景需要格外留心：
立即学习“前端免费学习笔记（深入）”；
- 表单控件：像