html布局应先写语义化标签骨架，再用flex/grid布局，避免div套娃和float；调试聚焦盒模型与文档流，统一box-sizing:border-box。
直接上手写结构，别先学“布局理论”——HTML布局的本质是用语义化标签组织内容，再用CSS控制位置和尺寸。学不会，90%是因为卡在了“不知道该从哪写起”和“写了但不生效”这两个环节。
先写出有语义的HTML骨架，不是套div
很多人一上来就写 <div class="header">，结果后期改样式、加交互、做SEO全乱套。现代布局依赖HTML5语义标签，浏览器和辅助工具能自动识别它们的用途。<ul>
<li>
<code><header></header>、<nav></nav>、<main></main>、<aside></aside>、<footer></footer> 是页面级容器，每个只用一次（除非嵌套）
<section></section> 用于逻辑分组，比如“产品介绍”“用户评价”，不是为了撑宽度或清浮动<div> 套娃，比如 <code><div><div><div>内容</div></div></div> —— 这会让CSS选择器越来越长，也增加可访问性障碍用Flex或Grid写第一版三栏布局，别碰float
网上大量教程还在教 float: left + overflow: hidden 清浮动，那是2012年的解法。现在写布局，要么用 display: flex，要么用 display: grid，没有第三种推荐路径。
- 三栏等宽：父容器加
display: flex，子项都设flex: 1 - 左右固定+中间自适应：左栏
flex: 0 0 200px，右栏同理，中间用flex: 1 - Grid更直白：
grid-template-columns: 200px 1fr 200px，一行搞定，天然等高，不用管内容长短 - 别给子项写
height: 100%——Flex/Grid下高度由容器分配，硬写会破坏拉伸逻辑
调试时盯住两个地方：盒模型和文档流
80%的“布局错位”“宽度不对”“margin不生效”，根源就在这两处。Chrome DevTools 的 Elements 面板里，把鼠标悬停在元素上，看右边 Styles 栏顶部的 Layout 小窗，它实时显示 content / padding / border / margin 四层尺寸。
- 默认
box-sizing: content-box：width 只算 content，padding 和 border 会额外加进去 → 容易撑破容器 - 统一加
* { box-sizing: border-box; }，让 width 包含 padding 和 border，所见即所得 - 绝对定位（
position: absolute）和浮动（float）会让元素脱离文档流 → 父容器可能塌陷，高度为0，这时候再调子元素的 margin 就没意义 - Flex/Grid 容器内的子项默认不脱离文档流，所以
margin有效，vertical-align无效（那是 inline 元素用的）
真正卡住人的，往往不是语法记不住，而是改了一行 CSS 后页面突然错位，却不知道该去检查哪个层级的盒模型或是否意外触发了文档流脱离。打开 DevTools，从最外层 往里一层层点开，比查文档更快定位问题。
