必须全局设置、::before、*::after { box-sizing: border-box; }，否则伪元素及子元素仍按content-box计算，导致width: 100%加padding时总宽超限溢出。
box-sizing: border-box 必须全局设置，否则尺寸计算不可控
不设 box-sizing: border-box，width: 100% 的元素加 padding: 16px 就会溢出父容器——这不是 bug，是 content-box 的标准行为。浏览器默认就是 content-box，reset 文件里只清 margin/padding 并不能改变它。
正确做法是紧贴 <style> 开头或 :root 下写：
*, *::before, *::after {
box-sizing: border-box;
}-
*覆盖所有元素，但不匹配伪元素，所以必须显式加上*::before, *::after - 漏掉伪元素会导致用
::before画的装饰边框、三角箭头等多出几像素，在 flex 容器里容易换行 - 不要用
inherit替代，IE8– 不支持，且根节点没设border-box时会回退到content-box - 这条规则必须放在所有 reset 样式之后，否则可能被后续样式覆盖
reset 清掉 margin/padding 后，语义间距得重定义
清掉 <p> 的 margin: 1em 0 是为了统一起点，不是为了“消灭间距”。清完你会发现段落糊在一起、标题挤成一团——这说明你还没定义设计系统需要的语义间距。
- 别恢复浏览器默认值，而是按组件粒度声明：
p { margin-bottom: 1.2rem; }、h2 { margin-bottom: 0.8rem; } - 卡片类组件内部用
padding控制内容呼吸感，卡片之间用margin控制组合间距，职责分离更易维护 - 避免外边距合并（margin collapse）：对父容器触发 BFC（如
overflow: hidden），或统一用margin-bottom避免上下同时设 margin
为什么 minireset.css 比通配符 reset 更可靠
minireset.css 不是简单清零，它只做两件事：html { box-sizing: border-box; } + *::before, *::after { box-sizing: inherit; }，再配合极简的 margin/padding 归一化。体积小、无副作用、兼容性好。
立即学习“前端免费学习笔记（深入）”；
- 通配符
* { margin: 0; padding: 0; box-sizing: border-box; }在大型项目中可能影响性能，尤其当 DOM 深度大时 -
minireset.css的box-sizing: inherit确保伪元素继承根节点设置，比通配符更精准，也规避了 IE 兼容问题 - 它不碰
font-size、line-height等，留给开发者按需定义，而不是强加一套“归一化字体”
border-box 不等于万能，padding/margin/border 仍要分清职责
设了 border-box 只解决尺寸计算问题，不代表可以乱用 padding 和 margin。它们作用域不同，混用会导致布局逻辑混乱。
-
padding属于元素自身，影响背景、边框、阴影的绘制范围；margin是外部隔离带，不参与背景渲染 - 按钮内文字留白用
padding，按钮之间距离用margin；表单字段的提示文字与输入框边界用padding，字段组之间用margin - 用
border做状态提示（如 focus ring）时，注意它已计入width/height，无需额外调整尺寸
真正麻烦的从来不是怎么设 box-sizing，而是设完之后，还在用 margin 挤内容、用 padding 推兄弟元素——那只是把旧问题换了个方式继续踩。
