html标签仅负责语义，排版必须由css实现；text-align需作用于块级父容器才有效；line-height宜用无单位值，letter-spacing推荐em单位；竖排应使用writing-mode: vertical-rl并配text-orientation: upright。
HTML 标签本身不负责排版样式，只负责语义；所有“精美排版”都必须靠 CSS 实现。 直接写 <p></p> 或 <h2></h2> 看不出理想效果，是因为浏览器自带默认样式（比如 p 有上下 margin、h1 行高松散），不覆盖就等于没控制。
text-align 控制水平对齐但仅对块容器内联内容生效
它不是让整个 <p></p> 居中，而是让这个 p 里面的文字、图片等内联内容水平居中。常见错误是给行内元素（如 <span></span>）设 text-align，无效——因为 text-align 必须作用在**块级父容器**上。
- 正确用法：
<p style="text-align: center">这段文字会居中</p> -
text-align: justify会让英文单词间距拉伸以填满整行，中文效果差，慎用 -
align属性（如<p align="center"></p>）已废弃多年，用它会触发 quirks 模式，CSS 解析可能异常
line-height 和 letter-spacing 配比影响可读性
这两个值不是越大越好，得匹配字体大小和语言习惯。中文正文常见组合是：font-size: 16px + line-height: 1.75 + letter-spacing: 0.05em。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
line-height推荐用无单位数值（如1.6），避免固定像素值（如24px）在缩放时断裂 -
letter-spacing用em比px更稳——0.03em在14px字体下约0.42px，在20px下约0.6px，比例一致 - 中英文混排时，
letter-spacing对西文影响更明显，可加text-rendering: optimizeLegibility微调
writing-mode: vertical-rl 是唯一靠谱的竖排方案
别再用 transform: rotate(90deg) 或手动换行模拟竖排——那样文本不可选、无法复制、SEO 失效，响应式一塌糊涂。
- 竖排必须配
text-orientation: upright，否则英文字母会变成堆叠的单列（如 “HTML” 显示为 H↵T↵M↵L） - 容器必须设固定
height，否则竖排内容会让父容器无限拉长 -
text-align: center在竖排中表示**垂直居中**，text-align: right表示**顶部对齐**——方向逻辑和横排相反，容易踩坑
真正难的不是写对某一条 CSS，而是理解每个属性的生效范围、继承关系和浏览器默认行为。比如 letter-spacing 会继承给子元素，line-height 的无单位值依赖当前 font-size，而 writing-mode 会改变整个盒模型的方向逻辑——这些细节不厘清，样式就会反复失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
