现代HTML页面布局核心是用display: flex或grid控制结构，float、absolute、table仅限极少数兼容或特殊场景；父容器不设flex上下文，子元素flex属性无效。
现代HTML页面布局，核心就一条：用 display: flex 或 display: grid 控制结构，其他方式（float、position: absolute、table）只在极少数兼容或特殊场景下被动使用，不是默认选项。
为什么父容器不设 display: flex，子元素写 flex: 1 就无效
Flex 布局必须由父容器开启上下文；子元素的 flex、align-self 等属性只是“参与规则”，不是“创建规则”。没上下文，这些声明直接被浏览器忽略。
- 常见翻车现场：
.main { flex: 1; }却忘了给.container加display: flex - 调试技巧：在 DevTools 里选中父容器，看 computed 样式中是否出现
display: flex和flex-direction - 移动端适配时，容易只改子元素的
flex-basis，却漏掉媒体查询里对父容器flex-direction的切换
grid-template-areas 看起来直观，但为什么实际项目要慎用
命名区域写法（grid-template-areas）适合教学演示，但在真实迭代中极易失控：
- 新增一个区域（比如加个广告位），所有
grid-template-areas行都要重写，且每个对应子元素的grid-area也得同步改 - 无法动态插入/隐藏某一块而不破坏整体字符串结构（比如用 JS 切换侧边栏显隐）
- 更稳妥的做法是用线性定义：
grid-template-columns: 240px 1fr 320px+ 显式定位：grid-column: 2 / 3 - IE11 完全不支持 Grid（包括带前缀的版本），如果还要兼容，得提前准备
display: flexfallback
侧边栏固定宽 + 主内容自适应，为什么只写 flex: 1 不够
当主内容区含长文本、URL 或内联图片时，flex: 1 默认不会收缩，可能撑破容器甚至导致横向滚动。这不是 bug，而是 Flex 的默认行为（min-width: auto）。
- 必须显式加
min-width: 0在主内容元素上，才能让overflow: hidden或text-overflow: ellipsis生效 - 侧边栏推荐写法：
flex: 0 0 240px（不增长、不缩小、基础宽 240px） - 别用
width: 240px配合flex: 1—— width 会被 flex 计算覆盖，语义混乱 - 如果侧边栏需要响应式收起，优先用
flex: 0 0 0+overflow: hidden+transition: flex-basis，比 display: none 更平滑
绝对定位不是布局工具，那它该用在哪
position: absolute 的唯一合理用途，是让元素彻底脱离文档流、不参与尺寸计算——这恰恰和“布局”目标相反。
- 典型正当场景：tooltip、loading 遮罩层、模态框 backdrop、下拉菜单浮层
- 危险信号：用它来“把按钮钉在右上角”或“微调某个 div 的像素位置”——这说明父容器缺少合适的布局上下文
- 必须配套：
position: relative显式设在最近的定位上下文父容器上，否则会一直往上找直到 - 垂直居中别写
top: 50%; margin-top: -20px，用top: 50%; transform: translateY(-50%)才可靠
真正难的不是写对某一行 CSS，而是在整个页面结构里保持布局意图的一致性：哪些区域必须严格等高，哪些要随内容伸缩，哪些根本不能参与流式计算——这些判断一旦错位，后面所有 margin、padding、media query 都是在补洞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
