html仅定义语义结构，css才负责排版；布局应基于display:flex/grid而非html标签，统一box-sizing:border-box避免盒模型误差，且父容器必须显式设置display属性才能启用子元素的布局指令。

HTML 本身不负责排版，它只定义内容结构；真正控制页面排版的是 CSS。把 HTML 当作“排版工具”来用（比如靠 <br> 换行、<center></center> 居中、嵌套一堆 <div> 猜宽度），后续改一个间距就得全局翻代码，而且根本没法响应式。<h3>HTML 标签语义决定布局起点，不是排版终点</h3> <p>浏览器默认按文档流渲染：块级元素（如 <code><p></p>、<div>、<code><h1></h1>）垂直堆叠，行内元素（如 <span></span>、<a></a>）水平排列。这个流是所有 CSS 布局的起点——Flex 和 Grid 都是在此基础上重新组织流，而不是绕过它。

• 用 <p></p> 包段落，不是为了“看起来有空行”，而是告诉浏览器“这是独立语义段”，后续才能用 p + h2 这类选择器精准控制样式
• 把导航栏写成 <nav><ul><li><a>...</a></li></ul></nav>，不是为了“好看”，而是让屏幕阅读器知道这是可跳转的导航区块
• 混用 <div> 模拟标题或段落，会导致 CSS 的 <code>h2 { margin-top: 2em } 规则失效——因为 <div class="title"> 根本不是 <code>h2

  CSS display 属性才是布局开关，不是 HTML 标签名

  很多人以为 <div> 天生“能撑宽高”、<code><span></span> 天生“不能设宽高”，其实全是 CSS 的 display 在控制。HTML 标签只是语义容器，行为由 CSS 覆盖：

  • <span></span> 加 display: block → 变成块级，能设 width、margin
  • <div> 加 <code>display: inline → 变成行内，忽略 width 和 height
  • <button></button> 默认是 inline-block，所以能设宽高又不会换行——这不是标签特性，是浏览器 UA 样式表写的

  真正该学的不是“哪个标签能排版”，而是“怎么用 display: flex 或 display: grid 让任意一组元素按需排列”。

  
  anything-to-html
  将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 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，等于没写。