漂亮的文章阅读页靠line-height与font-size比例稳定、max-width控制单行字数合理、段落语义和间距物理基础扎实；650px是中文舒适阈值，因对应52–58字/行，契合人眼扫视生理极限，须配margin: 0 auto居中，且line-height须用无单位值、font-size宜设16px基准。
直接说结论：漂亮的文章阅读页不靠“视觉堆砌”，而靠三件事——line-height 与 font-size 的比例稳定、max-width 控制单行字数合理、段落语义和间距物理基础扎实。其他所有“黄金比例”“留白美学”都建立在这之上。
为什么max-width: 650px是中文阅读的舒适阈值
这不是玄学，是排版生理学：人眼水平扫视时，单行超过约 45–65 个汉字（对应英文 70–90 字符），回行定位容易出错，阅读节奏被打断。650px 在 16px 字号 + 1.6 行高下，中文通常落在 52–58 字/行区间，刚好卡在舒适带。
- 别盲目套用“黄金比 1.618”去算容器宽度——那是针对图形构图，不是文本流
-
max-width必须配合margin: 0 auto居中，否则左右不对称会加剧视觉疲劳 - 移动端要改用
max-width: 90vw，避免小屏上左右留白过大导致文字过窄 - 如果用了
column-count分栏，max-width要设在分栏容器上，而不是最外层 wrapper
line-height: 1.6 和 font-size: 16px 为什么不能妥协
这两个值组合起来，决定了行距是否“呼吸自然”。用像素值（如 line-height: 24px）或相对单位错误（如 font-size: 100%）会导致缩放、系统字体设置变更时排版崩塌。
-
font-size: 16px是底线——它让 1em = 16px，后续所有em单位（比如text-indent: 2em）才有确定意义 -
line-height: 1.6是无单位数值，它会随字号等比缩放；写成line-height: 1.6em反而会叠加计算，造成行高翻倍 - 首行缩进必须用
text-indent: 2em，不是32px——否则用户把浏览器字号调到 20px 时，缩进会变成 40px，破坏节奏 - 段落间距靠
margin-bottom: 1.2em控制，不是多个<br>或空<p></p>
中文两端对齐（text-align: justify）为何常失效
不是你代码错了，是缺了两个硬性条件：语言属性声明 + 拉伸策略指定。Safari 17.4+、Chrome 120+ 都已严格执行这个规则。
- 容器必须带
lang="zh"，比如<article lang="zh"></article>，否则浏览器默认按拉丁语系处理，不插字间间隙 - CSS 必须同时写
text-align: justify; text-justify: inter-character;，少任何一个都不生效 - 短段落（
- 单行标题想两端对齐？用
text-align-last: justify，但 iOS Safari text-align: center
别碰 <center></center>、<font></font> 和内联 style
这些标签或写法会让排版失控，且无法响应系统偏好（深色模式、减少动画、更大字体）。现代阅读页必须可访问、可缩放、可适配。
-
<center></center>已废弃，对齐全部交给 CSS 的text-align或 Flex/Grid -
<font></font>无法继承用户系统字号设置，font-size: 16px才是可控起点 - 所有样式走外部 CSS 文件或
<style></style>块，禁用style="..."写在 HTML 标签里——后期改一个 margin 就得全局 grep，维护成本爆炸 - 段落必须用
<p></p>包裹完整语义单元，不是按字数切，更不能把整篇文章塞进一个<p></p>
真正难的不是写出“看起来美”的页面，而是让每一处间距、缩进、行高在不同设备、不同系统设置、不同辅助技术下都保持一致。这需要克制——少用绝对定位，少手动算像素，多依赖 em、无单位 line-height、语义化标签和浏览器默认行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
