CSS布局需校准盒模型、文档流与脱离机制；box-sizing: border-box应全局设置，浮动塌陷需clearfix清除，margin穿透可用padding-top或border-top解决，居中须按场景选用margin:auto、text-align或transform。
CSS 布局不是“写完就跑”，而是对盒模型、文档流和脱离机制的持续校准——多数布局问题，根源不在 Flex 或 Grid 写得不对，而在没真正理解 box-sizing、float 塌陷、或 margin 穿透这些基础行为。
box-sizing: border-box 是现代布局的默认起点，不是可选项
标准盒模型（box-sizing: content-box）下，width: 300px; padding: 20px; border: 1px solid 的元素实际占宽是 342px。这在响应式中极易导致溢出或错位。
- 全局重置推荐：
* { box-sizing: border-box; } - 不建议只给部分元素设，容易漏掉
input、textarea等表单控件——它们默认是content-box，不统一就会出现内边距“吃掉”宽度的问题 - 注意：伪元素（如
::before）也受此影响，若用它做装饰性边框，需确认是否要参与尺寸计算
浮动塌陷不是“bug”，是文档流逻辑的必然结果
当所有子元素都设了 float: left，父容器就“看不见”它们了，高度坍缩为 0 ——这不是浏览器缺陷，而是浮动本意：让文字环绕图像，自然要脱离常规流。
- 清除浮动的可靠写法（推荐）：
.clearfix::after { content: ""; display: table; clear: both; } - 避免用
overflow: hidden治标：它会意外裁剪position: absolute子元素或阴影（box-shadow） - 如果父容器本身有
padding或border，overflow: hidden还可能遮住这些视觉层
margin-top 穿透：不是子元素错了，是父元素没“兜住”
给子 div 设 margin-top: 20px，结果整个父容器被往下顶——这是外边距穿透（margin collapse）的典型表现，发生在父元素没有边框、内边距、内容或清除机制时。
立即学习“前端免费学习笔记（深入）”；
- 快速验证：打开浏览器开发者工具 → Elements 面板 → 选中父元素 → 看 Computed 标签页里
margin-top是否显示为子元素的值 - 可靠解法（按优先级）：
– 给父元素加padding-top: 1px（最小干预）
– 或border-top: 1px solid transparent
– 或overflow: auto（但注意滚动条副作用） - 别用
float治这个病：它会引发新的塌陷问题，属于问题套问题
居中不是“一种技巧”，而是三类场景对应三种机制
“怎么让盒子居中”这个问题，答案取决于你面对的是什么：
-
定宽块级元素水平居中：
margin: 0 auto（仅对display: block且有明确width的元素有效） -
未知宽行内/行内块内容居中：
text-align: center在父容器上，子元素设display: inline-block -
绝对定位元素完全居中：
.centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }（注意：父容器需position: relative或非static）
最常被忽略的一点：Flex/Grid 居中（如 justify-content: center; align-items: center）只作用于其直接子项；如果中间夹了一层未设 display: flex 的包裹 div，居中就断掉了。
