box-sizing: border-box 必须全局设为默认，否则 padding/margin 会破坏 width: 100% 等尺寸预期；它需写在最前以确保所有实用类（如 m-4、p-2）基于“总尺寸可控”工作，IE8+ 原生支持，老版 Safari 需加 -webkit- 前缀。
box-sizing: border-box 必须是所有间距类的默认前提，否则 padding 和 margin 会破坏尺寸预期。
为什么 box-sizing: border-box 要写在最前面？
不设这个，width: 100% 的组件加个 padding: 16px 就会溢出父容器——因为 padding 是额外加在 width 外面的。所有实用类（如 m-4、p-2）都依赖“总尺寸可控”这个前提。
- 必须全局生效：
* { box-sizing: border-box; }或至少html { box-sizing: border-box; }+*::before, *::after { box-sizing: inherit; } - IE8+ 原生支持，无需前缀；老版 Safari 需加
-webkit-box-sizing - Flex/Grid 容器子项表现像
border-box，但别赌这个行为——显式声明才可靠
margin 类命名要避开折叠陷阱
垂直方向相邻元素的 margin-top 和 margin-bottom 会折叠（取较大值），所以 m-y-4 这类双向设置在兄弟元素间实际只生效一次。这不是 bug，是规范行为。
- 想实现稳定间距，优先用单向类：
mb-4（只设 bottom）、mt-2（只设 top） - 首尾元素贴边问题：父容器加
overflow: hidden或display: flow-root可包裹子项外边距 - 避免
mx-auto和my-4混用——my-4在 Flex 容器里可能被忽略，因主轴方向由justify-content控制
gap 类不该和 margin 类混用在同一容器
gap 是 Flex/Grid 容器专属属性，它不触发 margin 折叠、不影响单个子项盒模型，但和 margin 同时存在时容易叠加出双倍间距。
- 推荐策略：容器用
gap-3，子项内部用p-2，完全不设m-* -
gap不兼容 IE，若需支持 IE11，得回退到:not(:first-child) { margin-left: 0.75rem; } - 响应式 gap：
gap-md-4对应@media (min-width: 768px) { gap: 1rem; }，比用mb-md-0更干净
实用类命名要区分逻辑意图而非单纯数值
直接暴露像素值（如 m-8）会让团队难以维护；用语义化缩写（如 space-sm）又易歧义。折中方案是按设计系统尺度分层，且明确标注单位来源。
- 推荐结构：
m-2（对应0.5rem）、m-4（对应1rem）、m-6（对应1.5rem）——数值是比例，不是像素 - 避免
ml-auto这类不可预测类用于布局关键路径；它适合工具栏内图标对齐，不适合卡片网格 - 负间距类（如
-m-2）必须加文档注释：“仅用于视觉微调，不用于修复布局塌陷”
真正难的不是写多少个 m-* 类，而是让每个类在嵌套、响应式、Flex/Grid 切换时行为一致——这取决于你是否从第一天就强制统一 box-sizing，以及是否愿意为 gap 放弃部分 IE 兼容性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
