17370845950

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，居中就断掉了。