HTML页面排版应以CSS盒模型、文档流和布局上下文为核心，优先使用Flex和Grid实现可预测、可维护的响应式布局，避免滥用、、float、absolute等易导致塌陷与难维护的旧方法。
HTML 页面排版不是靠 <center></center> 或一堆 <br> 拼出来的，核心是用 CSS 控制盒模型、文档流和布局上下文。直接写内联样式或靠 float 堆砌，后期改一个间距就得全局找 margin，不现实。
用 display: flex 替代浮动和定位做主容器布局
老式 float: left + clear: both 容易塌陷、响应差；绝对定位又脱离文档流，难维护。现代页面头部、导航栏、三栏内容区，优先用 Flex。
常见错误：只给父容器加 display: flex，但子元素没设 flex 相关属性，结果还是块级堆叠。
- 横向均分三栏：
<div class="container"> <aside>侧边</aside> <main>主内容</main> <aside>另一侧</aside> </div> <p>.container { display: flex; } .container > aside { flex: 0 0 240px; /<em> 不缩放，固定宽 </em>/ } .container > main { flex: 1; /<em> 剩余空间全占 </em>/ } - 导航栏右对齐某一项：用
margin-left: auto推开前面所有项，比text-align: right或float: right更可靠 - 移动端折叠时，把
flex-direction: column丢进媒体查询里，比 JS 切 class 更轻量
别滥用 position: absolute 做“精准像素定位”
绝对定位会让元素脱离文档流，父容器高度可能变成 0，导致下方内容上浮——这是最常被忽略的塌陷源头。
立即学习“前端免费学习笔记（深入）”；
适用场景其实很窄：tooltip、loading overlay、模态框遮罩层。除此之外，优先考虑 margin、padding、flex 或 grid。
- 如果非要用
absolute，父容器必须有position: relative显式声明定位上下文，否则会逐级往上找，可能跑到上去 -
top: 50%; transform: translateY(-50%)是垂直居中的安全写法；别用top: 50%; margin-top: -XXpx，字体缩放或换设备就错位 - 避免在
flex容器里混用absolute子项——它既不参与 flex 分配，又可能盖住其他 flex 项，调试极难
用 minmax() 和 fr 单位写响应式网格，而不是死写 px 或 %
grid-template-columns: repeat(3, 300px) 在手机上必然溢出；repeat(3, 33.33%) 遇到边框或 padding 就错位。CSS Grid 的弹性单位才是解法。
典型错误：把 grid 当成“画表格”的工具，每行都手动写 grid-row，完全没发挥自动轨道分配能力。
- 响应式卡片列表推荐写法：
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }浏览器会自动算最多能塞几列，小屏变 1 列，中屏 2 列，大屏 3 列以上 -
fr不是像素，是“剩余空间份数”。grid-template-columns: 2fr 1fr表示第一列占剩余空间的 2/3，第二列占 1/3，和具体内容宽度无关 - 慎用
grid-column: 1 / -1跨全行——它依赖列数固定，列数一变（比如从 3 列变 4 列），这个声明就失效了
真正卡住人的往往不是“怎么实现”，而是“为什么改了一处 margin，整个页脚飞到中间去了”。布局问题要先看文档流是否被破坏，再查 display 类型和定位上下文，最后才动像素值。Flex 和 Grid 不是炫技选项，是让排版可预测、可维护的基础设施。
