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）的典型表现，发生在父元素没有边框、内边距、内容或清除机制时。
NITC效益型企业网站系统(PHP)产品特色1、企业网站模块：1）网站设计精美：前台页面全部采用DIV+CSS，设计严谨，布局合理，页面精美大气。2）管理操作方便：后台管理界面友好，简单易用，区别于一般CMS系统的复杂与繁琐，功能强大，系统安全，性能稳定。用户使用全自动化控制，功能模块可扩展性强。2、搜索引擎优化： 经众多网络营销专家制定，系统自带搜索引擎基础优化功能，能在最短的时间内提升网站的曝
立即学习“前端免费学习笔记（深入）”；
- 快速验证：打开浏览器开发者工具 → 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，居中就断掉了。
