html布局核心是语义化结构而非视觉对齐：语义标签定义逻辑骨架，flex/grid控制流向，响应式交由css处理；等不可替换为div，因其承载浏览器、辅助技术和seo的解析锚点。
HTML布局不是“怎么把元素摆整齐”，而是“用结构自带表现意图”——语义标签定骨架，Flex/Grid控流，响应式写在CSS里。
为什么<header></header>和<main></main>不能随便替换成<div class="header">
<p>它们是浏览器、辅助技术、搜索引擎理解页面逻辑的锚点，不是视觉装饰。比如<code><main></main>必须唯一，且不能嵌套在<article></article>或<aside></aside>内；<nav></nav>会被NVDA/VoiceOver识别为可跳转导航区。
- SEO：Google 明确利用语义标签判断内容主次，
<main></main>区域权重高于同级<div>
<li>无障碍：屏幕阅读器靠<code><section></section> + <h2></h2>生成逻辑区块，<div class="section">完全不触发
<li>维护成本：<code>main { color: var(--text-primary); }比.content-wrapper { color: #333; }更易定位、更难误改
display: flex失效的三个高频原因
Flex 不是“设了就灵”，它依赖干净的继承链和明确的尺寸约束。常见失灵场景：
- 父容器没开上下文：仅给子项加
flex: 1完全无效，必须先设display: flex或display: inline-flex
- 子元素脱离文档流：用了
float或position: absolute，Flex 容器对其失去控制权
- 父容器高度为
auto却要求垂直居中：当align-items: center时，若父容器无高度（如没内容撑开、没设min-height），视觉上会“消失”——加min-height: 100vh或临时border可快速验证
grid-template-areas怎么写才不报错
它不是字符串拼接，而是网格轨道的可视化映射，命名和格式必须严丝合缝：
- 每行引号内列数必须一致：
"header header" "nav main" "footer footer"合法；"header" "nav main"报错（第一行1列，第二行2列）
- 空白区域必须用
.（英文句点）占位，不能留空格，也不能写none
- 子元素的
grid-area值必须与模板中名称**完全匹配**：大小写敏感，且不带引号
- 响应式时别硬改整个
grid-template-areas，建议用@media重定义grid-template-columns和grid-column，保持区域名稳定
移动端<meta name="viewport">最容易被忽略的细节
<meta name="viewport" content="width=device-width, initial-scale=1">只是起点。真正在意体验的人会补上两处：
-
maximum-scale=1和user-scalable=no要慎用：禁用缩放会破坏低视力用户的可访问性，WCAG 2.1 明确反对（2026年5月4日生效）
- 未设
height=device-height时，某些安卓 WebView 在横屏下可能渲染异常，虽非必需，但加height=device-height可规避部分边缘 case
真正难的从来不是怎么写display: grid，而是判断什么时候该用<main></main>而不是<div id="main">，以及是否意识到<code>box-sizing: border-box漏设后，所有padding都在悄悄撑破你写的width。
<main></main>区域权重高于同级<div>
<li>无障碍：屏幕阅读器靠<code><section></section> + <h2></h2>生成逻辑区块，<div class="section">完全不触发
<li>维护成本：<code>main { color: var(--text-primary); }比.content-wrapper { color: #333; }更易定位、更难误改
display: flex失效的三个高频原因
Flex 不是“设了就灵”，它依赖干净的继承链和明确的尺寸约束。常见失灵场景：
- 父容器没开上下文：仅给子项加
flex: 1完全无效，必须先设display: flex或display: inline-flex - 子元素脱离文档流：用了
float或position: absolute，Flex 容器对其失去控制权 - 父容器高度为
auto却要求垂直居中：当align-items: center时，若父容器无高度（如没内容撑开、没设min-height），视觉上会“消失”——加min-height: 100vh或临时border可快速验证
grid-template-areas怎么写才不报错
它不是字符串拼接，而是网格轨道的可视化映射，命名和格式必须严丝合缝：
- 每行引号内列数必须一致：
"header header" "nav main" "footer footer"合法；"header" "nav main"报错（第一行1列，第二行2列） - 空白区域必须用
.（英文句点）占位，不能留空格，也不能写none - 子元素的
grid-area值必须与模板中名称**完全匹配**：大小写敏感，且不带引号 - 响应式时别硬改整个
grid-template-areas，建议用@media重定义grid-template-columns和grid-column，保持区域名稳定
移动端<meta name="viewport">最容易被忽略的细节
<meta name="viewport" content="width=device-width, initial-scale=1">只是起点。真正在意体验的人会补上两处：
-
maximum-scale=1和user-scalable=no要慎用：禁用缩放会破坏低视力用户的可访问性，WCAG 2.1 明确反对（2026年5月4日生效） - 未设
height=device-height时，某些安卓 WebView 在横屏下可能渲染异常，虽非必需，但加height=device-height可规避部分边缘 case
真正难的从来不是怎么写display: grid，而是判断什么时候该用<main></main>而不是<div id="main">，以及是否意识到<code>box-sizing: border-box漏设后，所有padding都在悄悄撑破你写的width。
