根本原因在于box-sizing属性取值不同：content-box下width仅指内容宽，总宽=width+padding×2+border×2；border-box下width包含内容、内边距和边框。
CSS中同样设置width: 200px，但元素实际占位宽度却不一样，根本原因在于盒模型（box model）的计算方式不同——尤其是box-sizing属性的取值差异。
默认情况下，浏览器使用content-box（W3C标准盒模型），此时width仅代表内容区宽度，不包含padding和border。而设为border-box时，width表示整个盒子的总宽度（内容+内边距+边框）。
box-sizing: content-box：width = 内容宽度；总宽 = width + padding×2 + border×2box-sizing: border-box：width = 内容区 + padding + border 的总和；内容区会自动压缩不同元素或不同上下文可能隐式继承/重置了box-sizing：
*, *::before, *::after { box-sizing: border-box; }，而你的自定义样式没同步input、textarea）在部分浏览器中默认是content-box，且不易被重置box-sizing处理不统一打开开发者工具，选中元素，在“Computed”面板里直接查看box-sizing的实际值，再对比width、padding、border和最终渲染宽度（“Layout”或“Box Model”视图）。
立即学习“前端免费学习笔记（深入）”；
* { box-sizing: border-box; }（建议放在CSS最前面）input, select, textarea { box-sizing: border-box; }
content-box和border-box做等宽布局给两个并排元素都设width: 100px; padding: 10px; border: 2px solid #000;，然后观察它们是否等宽：
content-box
border-box或至少计算逻辑对齐
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
986
收藏
取消收藏
