html与css是同步协同而非线性先后的关系：1. 语义化结构与布局意图需在写首个标签时共同决策；2. 必须全局设box-sizing: border-box避免尺寸失控；3. flex/grid使用前需明确主轴、对齐与换行需求；4. grid-template-areas应按视觉草图声明，命名须严格匹配；5. 居中方案须匹配定位上下文，不可套用万能公式。
HTML 与 CSS 不是“先写完结构再套样式”的线性流程，而是从第一行 <div> 就该共同决策的协同过程。没想清楚语义和布局意图就闭眼写标签，后面十有八九要重写。<h3>盒模型不设 <code>box-sizing: border-box，所有尺寸都不可信
新手最常踩的坑：以为 width: 300px 就是盒子总宽，结果加上 padding: 15px 和 border: 2px 后实际占满 334px，导致 Flex/Grid 列错位、媒体查询断点失效。
- 必须在 CSS 入口统一加：
* { margin: 0; padding: 0; box-sizing: border-box; } - 例外情况极少（比如需要精确模拟传统表单控件内边距时），别为个别元素覆盖它
- 不设这个，
flex: 1或grid-column: span 2的行为会因 padding/border 溢出而难以预测
用 display: flex 前先问：主轴方向、对齐需求、子项是否需伸缩
不是所有并排场景都适合 Flex；盲目套 display: flex 可能引入多余嵌套或破坏语义流。
- 导航栏、按钮组、卡片列表这类「一维线性排列 + 明确对齐」场景，
justify-content和align-items能直接解决问题 - 如果子项宽度不固定且需自动换行，改用
flex-wrap: wrap，而非强行塞进单行 - 避免给
<ul></ul>直接设display: flex—— 它本就是语义化列表，用<li>做 flex item 更合理
Grid 布局中 grid-template-areas 不是炫技，是视觉优先的声明式表达
当你脑子里已经画出「header / sidebar / main / footer」的区块草图，grid-template-areas 就比一堆 grid-column 数字更直观、更难写错。
- 命名区域必须一一对应真实元素的
grid-area值，拼写错误不会报错，但区域会空白 - 空单元格用
.占位，别留空格或换行符，否则解析失败 - 响应式切换布局时，可为不同断点重定义
grid-template-areas，比手动改grid-column清晰得多
居中不是“技巧合集”，而是看透定位上下文
margin: 0 auto、text-align: center、transform: translate(-50%, -50%) 看似都能居中，但触发条件完全不同。
-
margin: 0 auto只对「块级 + 有明确 width」元素生效；给<span></span>加它毫无反应 -
text-align: center居中的是**行内内容**，不是容器本身；父元素设了它，子<div> 不会动，但里面的文字会居中<li>绝对定位 + <code>transform需要父容器position: relative，否则参照的是视口，滚动时会“飘走”
真正卡住人的，从来不是某个属性记不牢，而是写 <header></header> 时没想好它将来要不要撑满全宽、要不要吸顶、会不会被其他组件遮挡 —— 布局的思考必须前置到 HTML 结构设计那一刻。
