box-sizing 默认值是 content-box，宽度不包含 padding 和 border；设 width: 200px 并加 padding: 10px、border: 2px 时实际占位 224px；改用 border-box 可使 width 包含 padding 和 border，推荐全局重置为 border-box。
box-sizing 默认值是 content-box，宽度不包含 padding 和 border
当你给一个 div 设置 width: 200px，同时又加了 padding: 10px 和 border: 2px solid，浏览器默认按 content-box 计算：内容区宽 200px，再加上左右 padding（20px）和左右 border（4px），实际占位就是 224px。这不是 bug，是规范定义——但容易让人误以为“我设了 200px，它就该占 200px”。
常见错误现象：
– 响应式布局中元素突然换行
– Grid 或 Flex 容器内子项溢出父容器
– 使用百分比宽度时因 padding/border 导致错位
把 box-sizing 改成 border-box 就能“所见即所得”
border-box 模式下，width 指的是整个盒子的总宽度（内容 + padding + border），浏览器自动压缩内容区来腾出空间。这是目前最主流、最可控的盒模型计算方式。
实操建议：
– 全局重置：在 CSS 开头加 * { box-sizing: border-box; }
– 注意继承性：子元素会继承该值，但某些原生控件（如 input[type="search"]）可能被 UA 样式覆盖，需单独重写
– 不要只改部分元素：混合使用 content-box 和 border-box 极易引发尺寸推算混乱
flex item 和 grid item 的 box-sizing 行为没有例外
有人以为 Flex/Grid 会自动“修正”盒模型，其实不会。flex-basis 或 grid-template-columns 中写的宽度，依然受当前元素的 box-sizing 影响。比如：flex: 0 0 300px 的 item 若仍是 content-box，且带 20px padding，则实际占用仍超 300px。
关键点：
– Flex/Grid 只负责布局分配逻辑，不干预单个盒子的尺寸计算规则
– 如果用 min-width 或 max-width 配合百分比，务必确认这些限制值是否在 border-box 下生效
– Safari 旧版本对 box-sizing 在表单控件上的支持较弱，必要时加 -webkit-box-sizing
不要忽略替换元素（如 img、video）的默认 box-sizing
img 等替换元素默认是 content-box，而且它们的 display 是 inline，还自带底部空白（baseline 对齐导致）。如果你给它加 padding 或 border，又没设 box-sizing: border-box，宽度叠加问题会更隐蔽。
典型场景：
– 图片卡片中 img + figcaption 并排时宽度失控
– 使用 object-fit 后仍因外边距/边框导致容器撑开
– 解决方案：统一重置 img, video, canvas { box-sizing: border-box; display: block; }
真正麻烦的不是改一个属性，而是项目初期没统一 box-sizing，后期排查时得翻几十个组件确认是否被局部覆盖。一旦开始用 border-box，就别回头混用——否则每次写 width 都得心算三遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
