真正起作用的是CSS属性组合且必须覆盖默认值：p和h1有默认margin、line-height等，需重置；中文justify需text-align+text-justify+lang；vertical-rl竖排需配text-orientation和height；letter-spacing用em更稳。
纯靠 <p> 和 <h1> 标签写不出“优化过的排版”——浏览器默认样式会干扰视觉一致性，真正起作用的是 CSS 属性组合，且必须覆盖默认值。
为什么直接写 <p> 和 <h2> 看不出效果
浏览器对这些标签有固定默认样式：<p> 自带上下 margin，<h1> 默认加粗+大字号+松散 line-height。不显式重置或覆盖，就等于把排版权交给了 UA stylesheet。
-
margin和line-height值未统一时，段落间距忽大忽小，尤其在嵌套或响应式缩放下更明显 - 中文段落首行不会自动缩进，靠空格或
-
align属性（如<p align="center">）已废弃多年，触发 quirks 模式，CSS 解析可能异常
text-align: justify 对中文无效？必须配 text-justify: inter-character 和 lang="zh"
纯 text-align: justify 在中文段落上基本没反应——不是你写错了，是浏览器默认只在空格、连字符等 Unicode 分隔符处插入弹性间距，汉字之间没有断点。
- 必须同时声明：
text-align: justify+text-justify: inter-character，缺一不可 -
lang="zh"必须设在<html>或最近的块级父容器上，否则 Safari 可能静默失效 - 短段落（少于 4 行）可能因换行点不足，末行仍左对齐；单行文本需改用
text-align-last: justify - 旧环境兼容：用
@supports not (text-justify: inter-character)包裹降级样式，避免覆盖原生支持环境
writing-mode: vertical-rl 是唯一可靠的竖排方案
别再用 transform: rotate(90deg) 或手动 <br> 模拟竖排——那样文本不可选、无法复制、SEO 失效，响应式一塌糊涂。
立即学习“前端免费学习笔记（深入）”；
- 必须配
text-orientation: upright，否则英文字母会堆成一列（如 “HTML” 显示为 H↵T↵M↵L） - 容器必须设固定
height，否则竖排内容会让父容器无限拉长；建议加overflow: hidden或text-overflow: ellipsis -
line-height在竖排中控制的是字符垂直间距（即列距），推荐用无单位值（如1.6），避免缩放断裂 -
margin-top在竖排中实际表现为左侧间距，padding-bottom变成右侧填充——方向逻辑和横排相反，容易踩坑
letter-spacing 和 line-height 的安全配比
这两个值不是越大越好看，而是要匹配字体大小和语言习惯。中文正文常见组合是：font-size: 16px + line-height: 1.75 + letter-spacing: 0.05em。
-
line-height推荐用无单位数值（如1.6），固定像素值（如24px）在用户缩放页面时会断裂 -
letter-spacing用em单位比px更稳——0.03em在14px字体下约0.42px，在20px下约0.6px，比例一致 - 标题可适当加大字距（
0.1em～0.15em），但正文超过0.08em就容易降低可读性 - 中英文混排时，
letter-spacing对西文影响更明显，建议加text-rendering: optimizeLegibility微调
最容易被忽略的其实是链路完整性：比如写了 text-align: justify 却漏了 lang="zh"，或用了 writing-mode: vertical-rl 却没设 height 导致布局塌陷——这些都不是“功能没生效”，而是前提条件没满足。
