使用语义化标签（如header、main、footer）而非div，是因为浏览器和读屏软件能自动识别其隐式ARIA role（banner、main、contentinfo），无需额外role属性即可被正确朗读或聚焦；而div无论嵌套多深，在辅助技术中均为“无意义容器”，导致语义断裂与无障碍失焦。
为什么用 header、main、footer 而不是一堆 div
因为浏览器和读屏软件会直接识别这些标签的隐式 ARIA role，header 对应 banner，main 对应 main，footer 对应 contentinfo——不用加 role 属性就能被正确朗读或聚焦。而纯 div 无论套几层，对辅助技术来说都是“无意义容器”。
常见错误现象：div class="header" + div class="nav" + div class="content"，看着结构清晰，实则语义断裂；JS 用 document.querySelector('div.content') 查询，在无障碍测试中直接失焦。
- 必须用
header、nav、main、footer，它们是语义刚需，不是“可选美化” -
section必须配h2或更高级标题才有语义价值；单独一个没标题的section和div在可访问性层面完全等价 - 嵌套不超过三层：比如
main→section→article是合理上限；再深一层（如article→section）就该考虑拆页或改成交互式折叠
Flexbox 布局中 justify-content 和 align-items 怎么选主轴/交叉轴
默认主轴是水平方向（flex-direction: row），所以 justify-content 控制左右分布，align-items 控制上下对齐。一旦改成 flex-direction: column，二者作用就互换——这是最容易写反的地方。
使用场景举例：垂直居中一个卡片，父容器设 display: flex + flex-direction: column，子元素要居中，就得用 justify-content: center（此时是控制垂直方向），而不是习惯性写 align-items: center。
立即学习“前端免费学习笔记（深入）”；
- 记住口诀：“justify 是主轴，align 是交叉轴”，主轴由
flex-direction决定，不是固定左右 - 移动端 iOS Safari 对超过 5 层嵌套的 flex 容器渲染帧率明显下降，实测数据，不是理论推测
- 避免在 flex 容器里混用
float或position: absolute：前者脱离文档流会破坏 flex 计算，后者让align-items失效
CSS Grid 中 grid-template-areas 为什么比手算 grid-column 更可靠
手写 grid-column: 2 / 4 看似精确，但一旦中间插入新区块，所有后续数字都要重调；而 grid-template-areas 用 ASCII 式命名区域，视觉即逻辑，增删区块只需改一行字符串，CSS 自动重映射。
常见错误现象：用 grid-column: 1 / -1 想让某元素横跨全行，结果在有 gap 的网格里被 gap 截断——因为 -1 指的是最后一根线，不是最后一格内容区。
-
grid-template-areas要求每个区域名用引号包裹，且每行单词数必须等于列数，缺位用.占位 - 命名区域不能含空格或特殊字符，
hero-section可以，hero section会报语法错误 -
gap是网格项之间间距，不影响grid-column的线序编号；想跨全宽请用grid-column: 1 / -1并确认容器没 padding 干扰
响应式断点下 max-width 和 min-width 媒体查询怎么选
用 max-width 是“移动优先”，小屏样式写在默认 CSS 里，大屏用 @media (max-width: 768px) 覆盖；用 min-width 是“桌面优先”，默认写大屏样式，小屏用 @media (min-width: 768px) 覆盖。现在主流框架（如 Bootstrap）都采用前者，因为小屏设备性能弱，越早加载轻量样式越稳。
容易踩的坑：在 max-width 查询里写 width: 100%，结果桌面端也继承了这个规则；或者把断点设在 768px 却没处理平板横竖屏切换导致的布局错乱。
- 关键断点建议：
480px（老手机）、768px（iPad 竖屏）、1024px（iPad 横屏）、1200px（桌面窄屏） - 不要只靠像素断点，配合
prefers-reduced-motion或prefers-color-scheme做渐进增强 - 每个断点内，
padding、font-size、gap应成比例缩放，避免一处 16px、另一处 20px 导致视觉割裂
div 比调十分钟颜色更有用。 
