HTML仅定义语义结构，CSS才负责排版；布局应基于display:flex/grid而非HTML标签，统一box-sizing:border-box避免盒模型误差，且父容器必须显式设置display属性才能启用子元素的布局指令。
HTML 本身不负责排版，它只定义内容结构；真正控制页面排版的是 CSS。把 HTML 当作“排版工具”来用（比如靠 <br> 换行、<center> 居中、嵌套一堆 <div> 猜宽度），后续改一个间距就得全局翻代码，而且根本没法响应式。
HTML 标签语义决定布局起点，不是排版终点
浏览器默认按文档流渲染：块级元素（如 <p>、<div>、<h1>）垂直堆叠，行内元素（如 <span>、<a>）水平排列。这个流是所有 CSS 布局的起点——Flex 和 Grid 都是在此基础上重新组织流，而不是绕过它。
- 用
<p>包段落，不是为了“看起来有空行”，而是告诉浏览器“这是独立语义段”，后续才能用p + h2这类选择器精准控制样式 - 把导航栏写成
<nav><ul><li><a>...，不是为了“好看”，而是让屏幕阅读器知道这是可跳转的导航区块 - 混用
<div>模拟标题或段落，会导致 CSS 的h2 { margin-top: 2em }规则失效——因为<div class="title">根本不是h2
CSS display 属性才是布局开关，不是 HTML 标签名
很多人以为 <div> 天生“能撑宽高”、<span> 天生“不能设宽高”，其实全是 CSS 的 display 在控制。HTML 标签只是语义容器，行为由 CSS 覆盖：
-
<span>加display: block→ 变成块级，能设width、margin -
<div>加display: inline→ 变成行内，忽略width和height -
<button>默认是inline-block，所以能设宽高又不会换行——这不是标签特性，是浏览器 UA 样式表写的
真正该学的不是“哪个标签能排版”，而是“怎么用 display: flex 或 display: grid 让任意一组元素按需排列”。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
盒模型是排版误差的根源，必须统一 box-sizing
新手写 width: 300px; padding: 10px; border: 1px solid #000; 后发现盒子总宽 322px，不是 300px——因为默认 box-sizing: content-box，width 只算内容区。
- 全局加
* { box-sizing: border-box; }，让width表示“边框+内边距+内容”的总宽，符合直觉 - 不设
box-sizing: border-box时，flex: 1子项遇到padding会溢出父容器，尤其在移动端窄屏下直接横向滚动 - Grid 的
gap不受box-sizing影响，但子元素自身的margin会和gap叠加，造成间距失控
Flex 和 Grid 是现代布局的默认选项，不是“进阶技巧”
别再用 float 做三栏、别再用 position: absolute 拼首页。它们不是“错”，但在绝大多数场景下，是更难维护、更易出错的退化方案。
- 单行/单列排列（导航栏、按钮组、卡片列表）→ 用
display: flex，配justify-content和align-items - 二维网格（页头+侧边栏+主内容+页脚）→ 用
display: grid，配grid-template-columns和grid-template-rows - 想让某个子元素居中？先看父容器有没有
display: flex或display: grid——没有就加，别去试margin: auto或transform: translate - IE11 不支持 Grid？那就用 Flex fallback，而不是退回 float + clearfix —— 后者在 Flex 容器里会被完全忽略
最常被忽略的一点：所有布局能力都依赖父容器显式开启上下文。子元素上写 flex: 1 或 grid-column: 2，但父容器没设 display: flex 或 display: grid，等于没写。
