html无自动排版能力,所有样式须用css控制;text-align等属性仅对块级元素内行内内容有效,需避免废弃的align属性;line-height宜用无单位值,letter-spacing推荐em单位;竖排文字必须用writing-mode与text-orientation;text-indent专用于首行缩进,不可与margin混用;务必重置浏览器默认样式。

HTML本身不提供“自动排版美化”能力,所有文本样式必须通过CSS显式控制;靠写<p></p>、敲空格或用align属性,既无效也不合规。
text-align 不能只靠 align 属性
HTML5 已废弃 align 这类 presentational 属性(如 <p align="center"></p>),现代浏览器可能忽略它,或触发 quirks 模式导致 CSS 解析异常。真正可控、可继承、响应式友好的对齐方式,只能用 CSS 的 text-align:
-
text-align: left/right/center:适用于段落、标题等块级元素内的**行内内容**对齐 -
text-align: justify:长文阅读更友好,但需配合hyphens: auto防止单词撑破容器(注意 Safari 需加-webkit-hyphens) - 不要对行内元素(如
<span></span>)设text-align——它不起作用;要居中一个<span></span>,得让它变成display: inline-block再用text-align控制父容器
line-height 和 letter-spacing 的单位选错就白调
这两个值看着小,但单位选错会直接破坏缩放、可访问性和多端一致性:
-
line-height必须优先用**无单位数值**(如1.6),而不是24px或160%。前者随font-size自动缩放,后者在用户放大字体时会卡死行高,造成文字重叠 -
letter-spacing推荐用em(如0.05em),不是px。14px 字体下0.05em≈ 0.7px,20px 下 ≈ 1px,比例恒定;而1px在小字号下太突兀,大字号下又几乎不可见 - 中文正文慎用 >
0.08em的字距;标题可放宽到0.1–0.15em,但混排英文时要留意text-rendering: optimizeLegibility补偿
竖排文字必须用 writing-mode,别 rotate
用 transform: rotate(90deg) 或手动换行模拟竖排,会导致文本无法选中、复制、搜索,且无障碍支持归零。正确路径只有一条:
- 主声明:
writing-mode: vertical-rl(中文传统右→左竖排) - 必配项:
text-orientation: upright,否则英文字母会逐个堆成一列(H↵T↵M↵L),而不是保持水平方向 - 注意:
vertical-rl下,原本的line-height变成“列高”,text-align控制的是**列对齐**(即左右位置),而text-indent仍作用于首“行”(即首字符所在列的顶部)
text-indent 和 margin 混用会出事
中文段落首行缩进常用 text-indent: 2em,但它和 margin-left 完全不是一回事:
-
text-indent只缩进**首行第一字符的起始位置**,不影响整段盒模型尺寸,也不会触发外边距合并(margin collapse) -
margin-left是推整个<p></p>盒子,会导致段落间距离异常、与浮动元素冲突、响应式断点失效 - 若同时写了
text-indent和margin-left,缩进效果会叠加,但语义错乱——比如屏幕阅读器仍认为这是标准段落,而视觉上却像引用块
最易被忽略的一点:所有这些样式都依赖你是否清除了浏览器默认样式。没重置 body 的 margin、没覆盖 p 的默认上下间距、没处理 h1 的粗暴 font-size,再精细的 letter-spacing 也压不住基础节奏崩坏。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











