box-sizing: border-box 使元素的 width 和 height 包含内容区、内边距（padding）和边框（border），即设定的宽高即为元素最终占用的总尺寸，内边距与边框不再额外增加空间。
box-sizing: border-box 是什么效果
它让元素的 height 和 width 包含内容区、内边距（padding）和边框（border），而不是只算内容区。默认的 content-box 模式下，加了 padding: 20px 后，实际高度 = 内容高 + 40px，经常导致盒子“撑高”超出预期。
怎么改才真正生效
必须显式设置，不能依赖继承 —— box-sizing 不会从父元素继承，哪怕父级写了 box-sizing: border-box，子元素默认还是 content-box。
- 推荐全局重置：
*, *::before, *::after { box-sizing: border-box; } - 只改特定元素：直接在目标选择器里写
box-sizing: border-box; - 别漏掉伪元素：比如用
::before做装饰块时，它也受此影响，需单独设或靠通配符覆盖
为什么有时候改了没用
常见干扰项：
- CSS 优先级不够：被更高权重的规则（如
!important或更具体的选择器）覆盖，用浏览器开发者工具检查计算值，看box-sizing是否显示为border-box - 内联样式干扰：HTML 中写了
style="box-sizing: content-box"，会覆盖外部 CSS - 框架预设冲突：比如 Bootstrap 4+ 默认已设通配符，但某些组件（如表单控件）可能被重置回
content-box，得单独再设一遍
border-box 对布局的实际影响
它不改变渲染结果本身，但改变了你“怎么想尺寸”。比如：width: 300px; padding: 10px; border: 1px solid; 在 border-box 下，内容区宽度自动压缩为 278px；而 content-box 下，总宽是 322px，容易和 flex / grid 的分配逻辑打架。
- Flex 项目中尤其明显：设了
flex: 1又加 padding，border-box能保主轴尺寸可控 - Grid track sizing 更可预测：避免因 padding 导致隐式增长
- 注意：margin 始终不参与 box-sizing 计算，上下外边距照样会塌陷或撑开空间
padding 或 border 的固定尺寸容器，特别是那些用像素精确控制高度的卡片、输入框、按钮——它们的视觉高度是否还符合设计稿，这是最容易被忽略的验证点。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
