HTML格式化后样式错乱主因是工具修改空白字符分布，而浏览器对inline元素间空格/换行解析不一致；table中URL被拆分、pre/textarea换行丢失、Flex/Grid因空白变化导致布局异常，需针对性配置Prettier、禁用VS Code内置格式器、设white-space: pre-wrap及box-sizing: border-box等。
HTML格式化后样式乱了，**不是代码写错了，而是格式化工具改了空白字符分布，而浏览器对 inline 元素间空格、换行的解析逻辑不一致**。尤其在 table、pre、textarea 或含 flex/grid 的容器里，问题最明显。
为什么 table 一格式化就错位？
表格单元格（<td>）里的纯文本和 URL 混在一起时，Prettier 默认按“CSS whitespace 敏感度”处理，会把原本连着的 https://a.b/c 拆成多行或插空格，导致链接失效、列宽崩塌。
- 必须在
.prettierrc中设"htmlWhitespaceSensitivity": "css"，否则<td>text</td>可能被加空行，破坏渲染 - VS Code 右键“Format Document”默认走内置格式器，哪怕装了 Prettier 插件——要手动设置默认格式器为
esbenp.prettier-vscode - 禁用
html.format.enable（删掉或设为false），避免它和 Prettier 冲突
pre 和 textarea 里换行消失怎么办？
格式化工具常把 <pre>foo\nbar</pre> 改成带缩进的多行结构，但 pre 依赖原始换行符，缩进空格会被当成内容；textarea 更危险——用 innerHTML 读写会丢失换行符，Chrome 返回 \r\n，Firefox 是 \n。
-
pre标签内不要套任何 CSS 干扰white-space，优先用white-space: pre-wrap，并加font-family: monospace统一基准 -
textarea永远用.value读写，别碰innerHTML；需要标准化换行就用value.replace(/\r\n/g, '\n') - 如果用了 Prettier，加配置
"html.format.unformatted": ["pre", "textarea"]，跳过这两类标签的格式化
Flex/Grid 容器里元素突然不占宽高了？
格式化本身不改语义，但会改变标签间空白。而 flex 容器默认 flex-shrink: 1，grid 项默认不撑满轨道——当格式化把 <div><span>a</span><span>b</span></div> 拆成多行，中间空格变成换行符，就可能触发 flex 项收缩或 grid 轨道重算。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 检查
display: flex容器是否意外加了flex-wrap: wrap，或子项没设flex-shrink: 0 - Grid 项想填满列轨道，别依赖
width: 100%，改用justify-self: stretch或确保父级有明确grid-template-columns - 统一加
* { box-sizing: border-box }，避免padding撑出额外宽度引发换行
为什么 Chrome 和 Firefox 渲染结果不一样？
Blink（Chrome）会自动修复未闭合标签、错误嵌套，Gecko（Firefox）更严格——格式化后多出一个换行或空格，Blink 可能“帮你补全”，Firefox 就直接暴露 DOM 结构异常。
- 用
document.querySelectorAll('*').length在两个浏览器里比节点数，快速定位是否多出div或br - 验证 HTML 结构用 W3C Validator，重点看
<p>里有没有塞<div>、<span>是否被意外闭合 - 禁用所有浏览器扩展再测试，某些广告拦截插件会注入
style直接覆盖你的规则
真正难调的从来不是某条 CSS，而是格式化工具和浏览器对“看不见的空白”的不同理解——尤其当它们叠加在表格、预格式化文本或现代布局上时，一个空格就能让整行错位。
