排版异常主因是协议、编码或继承问题：双击打开html因file://协议限制导致资源加载失败；letter-spacing意外继承使按钮文字异常；line-height依赖字体度量引发垂直偏移；utf-8编码声明与文件实际编码不一致造成乱码。
文字排版显示异常，绝大多数情况不是 CSS 写错了，而是底层协议、编码或继承行为没被控制住——直接双击打开 HTML 文件、letter-spacing 意外继承、line-height 依赖字体度量，这三类问题占了实际排版故障的 80% 以上。
为什么双击打开 HTML 就排版错乱
浏览器对 file:// 协议有硬性限制：CSS 中的 @import 或 url() 引用本地资源（比如图片、字体）会被拒绝加载，控制台报 Not allowed to load local resource；JavaScript 调用 fetch('./data.json') 触发 CORS 错误；某些 CSS 特性（如 contain: layout）在 file:// 下直接失效。
必须让页面运行在 http:// 或 https:// 下：
- VS Code 安装 Live Server 插件，右键 HTML 文件 →
Open with Live Server - 命令行起服务：
python3 -m http.server 8000，然后访问http://localhost:8000/index.html - Node.js 用户：
npm install -g serve，进项目目录执行serve -s .
button 文字被撑开或挤成一团？先查 letter-spacing
按钮文字异常拉长或粘连，大概率是 letter-spacing 从 body 或父容器意外继承而来。它对 <button></button> 这类替换元素影响极直接。
- 别在全局样式里设
letter-spacing，改用显式类名（如.title-spaced）控制范围 - 给按钮加重置：
button { letter-spacing: normal; }（比设0更可靠） - 真要微调，用
em单位（如0.03em），避免像素值在高 DPI 屏下失准
换字体后按钮文字突然贴顶或下沉
新字体（如 Inter 替换 system-ui）的 ascent/descent 和 line-gap 不一致，而 button 默认 line-height: normal 会跟随字体度量变化，导致垂直对齐漂移。
- 显式设置无单位
line-height：button { line-height: 1.2; } - 搭配
padding精细控制高度，例如padding: 6px 12px比单靠line-height更稳 - WebFont 加载时加
font-display: swap，并为 fallback 字体预设相近的line-height和padding
中文乱码或符号变方块？编码声明和文件存储必须一致
<meta charset="UTF-8"> 必须放在 最开头，且文件本身也得是 UTF-8 编码（不含 BOM）。VS Code 右下角状态栏显示 “UTF-8” 才算数，显示 “UTF-8 with BOM” 或 “GBK” 都会失效。
- 检查文件真实编码：
head -c 4 index.html | xxd，输出含ef bb bf就是带 BOM 的 UTF-8，需另存为纯 UTF-8 - VS Code 快捷键
Ctrl+Shift+P→Change File Encoding→Save with Encoding→UTF-8 - 删掉所有冗余声明，确保整个 HTML 文件只有一处
</meta charset="UTF-8">，且在第一行
真正难调的不是样式本身，而是协议层、编码层、继承链这些看不见的约束。一旦漏掉其中一环，再精细的 CSS 也会失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
