box-sizing设为border-box才能真正控制盒模型总尺寸：width/height指边框边缘总尺寸，padding和border从内部扣除；全局设置*{box-sizing:border-box}可避免布局错乱。
box-sizing 设置为 border-box 才能真正控制盒模型总尺寸
很多人以为给元素设了 width: 200px 就一定是内容区宽 200px，结果加了 padding 或 border 后整体撑开，布局错乱。根本原因是默认的 box-sizing: content-box 把 padding 和 border 算在 width 外面。
真正可控的做法是统一设为 border-box：
*, *::before, *::after {
box-sizing: border-box;
}
这样 width 和 height 指的是“边框边缘总尺寸”，padding 和 border 都从里面扣，不会意外溢出容器。
- 必须全局设置（或至少父容器级设置），否则子元素仍按默认行为解析
- IE8+ 支持
border-box，无需前缀；但老版 Safari 需要-webkit-box-sizing - Flex/Grid 容器里的子项即使没设
box-sizing，也常表现得像border-box，但别依赖这点——显式声明更可靠
margin 负值不是“修复间距”，而是主动重叠布局
当两个相邻块级元素的上下 margin 都是正数时，实际间距取较大值（即 margin 折叠）。想让它们紧贴甚至重叠，不能只靠减小 margin，要用负值。
常见误操作：给两个 div 都设 margin-bottom: 10px，以为间距是 20px，结果只有 10px。正确做法之一是只给上面一个设 margin-bottom，下面那个不设；若必须都设且要重叠，则用负 margin：
.item { margin-bottom: 15px; }
.item:last-child { margin-bottom: -15px; }
- 负 margin 不会触发重绘，性能好，但会改变文档流位置，可能影响后续元素布局
- 水平方向慎用负
margin-left/margin-right，容易导致父容器溢出或文本换行异常 - 配合
position: relative可局部微调，比单纯负 margin 更可控
gap 属性专治 Flex/Grid 内部间距，不干扰单个元素盒模型
以前用 margin 给 Flex 子项加间隔，得处理首尾项的额外边距（比如用 :not(:first-child)），既啰嗦又易漏。现在直接用 gap，干净利落。
它只作用于容器内部项目之间，不影响容器自身 padding 或 border，也不参与 margin 折叠：
.container {
display: flex;
gap: 12px; /* 水平 + 垂直都是 12px */
}
/* 或分别控制 */
.container { row-gap: 8px; column-gap: 16px; }
-
gap在 Flex 中 IE 完全不支持，在 Grid 中 IE16+ 才支持（实际需考虑 Edge 16+） - 不要和
margin混用：如果子项自己设了margin，gap是额外加上的，不是替代 - 响应式中可结合
clamp()动态调整：gap: clamp(8px, 2vw, 16px)
padding 和 border 的像素级对齐问题常被忽略
当元素有 border: 1px solid #000 且需要精确居中或对齐时，1px 边框会让整体尺寸多出 2px（上下或左右），容易导致视觉偏移或与其他无边框元素不对齐。
解决方案不是去掉 border，而是用 box-sizing: border-box + 显式预留空间：
.btn {
box-sizing: border-box;
width: 100px;
padding: 8px;
border: 1px solid #333;
/* 实际内容区宽 = 100px - 2×1px - 2×8px = 82px */
}
- 高 DPI 屏幕下 1px 可能渲染为 2 物理像素，此时
border: 0.5px无效，得用transform: scale(0.5)模拟，但会模糊 - 用
outline替代border可避免影响盒尺寸，但它不占布局空间、无法圆角、也不能设置不同边 - 调试时打开浏览器开发者工具的“显示盒子模型”选项，一眼看出 padding/border 是否被正确计入
真正难的不是写对某一行 CSS，而是理解每个属性在哪个盒模型阶段生效、谁先谁后、谁会被折叠或覆盖。改一个 box-sizing 可能省掉半天 margin 调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
