box-sizing: border-box 将 padding 和 border 计入 width，使 width: 100% 真实占满父容器；全局启用需用 , ::before, *::after { box-sizing: border-box; }，但不解决 margin、绝对定位及表格单元格默认失效问题。
box-sizing: border-box 是什么，为什么能解决 padding 撑开宽度的问题
当你给一个
设置了
又加了
，它实际宽度就变成
（左右各10px），超出父容器——这是 CSS 默认的
行为。而
把
和
算进 width 里，
就真等于“占满父容器”，内容区自动收缩。
这不是“修复 bug”，是换一种盒模型理解方式。现代布局（比如 Flex、Grid）下尤其依赖它保持尺寸可控。
怎么全局启用 border-box，避免漏写
最稳妥的做法是一上来就重置所有块级元素的盒模型：
这个写法覆盖所有元素（包括伪元素），且优先级足够高，后续单个元素不用反复写。但要注意：
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
不要只写
—— 会漏掉
/
，它们可能带 padding/border 导致意外溢出
不要在重置前用其他
声明，否则可能被覆盖
第三方 UI 库（如 Ant Design）通常已内置该重置，重复写不会冲突，但没必要
哪些地方不能只靠 border-box 解决
管不了外边距（
）和绝对定位偏移（
/
）。常见踩坑点：
父容器用了
，子项设了
+
，但父容器没设
→ padding 不会撑破，但内容可能换行或截断，得看
用了
，又设
→ 此时
已失效，padding 会让内容区变窄，但整体仍占满，容易误判尺寸
表格单元格（
）默认不响应
，需显式设置才生效
移动端适配时 border-box 的兼容性注意点
所有现代浏览器（包括 iOS Safari 6+、Android Browser 4.4+）都支持
，无需前缀。但有两点容易被忽略：
老版本微信内置浏览器（X5 内核 v3.7 以下）对
的重置支持不稳定，建议用
+ 后代选择器兜底
如果项目用了 rem/vw 布局，
也得用相对单位（比如
），否则固定像素 padding 在小屏上会显得过大
某些 CSS-in-JS 库（如 styled-components）在 SSR 场景下可能把重置样式注入顺序错乱，导致首屏闪动，建议把重置样式提至
最顶部
真正麻烦的从来不是加不加
，而是它生效后，你原来靠 content-box “凑尺寸”的 hack 写法全得重算一遍。
divwidth: 100%padding: 10px100% + 20pxbox-sizing: content-boxbox-sizing: border-boxpaddingborderwidth: 100%*, *::before, *::after {
box-sizing: border-box;
}* { box-sizing: border-box; }::before::afterbox-sizingbox-sizing: border-boxmarginleftrightdisplay: flexwidth: 100%paddingoverflow: hiddenflex-shrinkposition: absoluteleft: 0; right: 0; padding: 10pxwidthtdbox-sizingbox-sizing*::before, *::afterhtml { box-sizing: border-box; }paddingpadding: 0.5rembox-sizing