1. 为什么文本排版总是不听话从一次导航栏错位说起很多人第一次写页面时都会遇到这种场景导航栏文字明明设置了text-align: center结果它偏左列表项想换成小箭头图标list-style-image写了却没反应段落行距挤成一团line-height调了半天还是别扭。问题往往不在“属性没写”而在于没搞清楚每个属性作用在哪个盒子上、继承关系怎么走、以及浏览器默认样式在背后做了什么。CSS 文本属性text-align、line-height、letter-spacing、text-decoration、text-indent、text-transform、text-shadow 等控制的是“文字在容器里怎么排”而列表样式list-style-type、list-style-position、list-style-image、list-style控制的是“标记符号长什么样、待在哪”。这两组属性看起来简单但组合起来能覆盖 80% 的日常排版需求文章正文、导航菜单、商品参数表、步骤说明、FAQ 折叠列表。这篇内容面向两类人刚学完 HTML 标签、准备把页面做“好看一点”的前端初学者以及已经能写页面、但每次调排版都要靠试的开发者。我会用一份可直接复制的 HTML CSS 示例把文本属性和列表样式逐项跑一遍每改一个值就刷新浏览器确认渲染结果。你不需要装任何构建工具一个.html文件加浏览器就能跟做。核心检索词先明确CSS 文本属性怎么用、列表样式 list-style 配置、text-align 与 line-height 实战。下面从环境准备开始一步步把每个属性的效果验证出来。2. 前置准备一个 HTML 文件 浏览器开发者工具就够了这一节不涉及任何账号或密钥纯粹是本地环境。你只需要一个文本编辑器VS Code、Sublime、甚至记事本都行一个现代浏览器Chrome、Edge、Firefox 均可。新建一个文件text-list-demo.html把下面的骨架贴进去。这份骨架同时包含了后面要验证的文本区块和列表区块你可以边改边看。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleCSS 文本属性与列表样式实战/title style /* 所有样式都写在这里方便逐项修改 */ body { font-family: Microsoft YaHei, PingFang SC, sans-serif; max-width: 720px; margin: 40px auto; padding: 0 16px; color: #222; } .article p { font-size: 16px; line-height: 1.8; text-indent: 2em; letter-spacing: 0.5px; } .article h2 { text-align: center; text-transform: capitalize; text-shadow: 1px 1px 2px rgba(0,0,0,0.15); } .link-demo a { text-decoration: none; color: #0a66c2; } .link-demo a:hover { text-decoration: underline; } .menu { list-style: none; padding-left: 0; } .menu li { display: inline-block; margin-right: 16px; } .steps { list-style-type: decimal; list-style-position: outside; } .custom-list { list-style-image: url(data:image/svgxml,%3Csvg xmlnshttp://www.w3.org/2000/svg width12 height12%3E%3Ccircle cx6 cy6 r5 fill%230a66c2/%3E%3C/svg%3E); } /style /head body div classarticle h2css text and list demo/h2 p这是一段用于验证文本属性的段落。你可以修改 line-height、letter-spacing、text-indent 观察变化。/p p classlink-demo访问 a hrefhttps://taotoken.net/api示例链接/a 查看 text-decoration 效果。/p /div ul classmenu li首页/li li文档/li li控制台/li /ul ol classsteps li打开浏览器开发者工具/li li选中列表项查看 computed 样式/li li逐项修改属性并刷新/li /ol ul classcustom-list li自定义图标列表项一/li li自定义图标列表项二/li /ul /body /html保存后用浏览器打开按 F12 打开开发者工具切到 Elements 面板。选中任意元素右侧 Styles 和 Computed 两个区域是你后面排查的主力Styles 显示你写的规则和浏览器默认规则Computed 显示最终计算值。比如你给p写了line-height: 1.8Computed 里会显示成具体的像素值如 28.8px这能帮你确认相对单位到底算成了多少。这里有个初学者常踩的坑浏览器对ul、ol默认给了padding-left: 40px和上下margin: 16px对p也给了上下margin: 16px。你写list-style: none只是去掉了标记缩进还在所以导航栏看起来还是偏右。正确做法是同时把padding-left归零。这个细节在下一节会反复出现。3. 文本属性逐项配置text-align、line-height、letter-spacing 与 text-decoration这一节把文本属性拆成可复制的配置片段每段都告诉你改哪里、看什么。建议你按顺序改改一项刷新一次。3.1 text-align 与 line-height 的组合text-align控制行内内容在块级容器里的水平对齐取值left、right、center、justify。注意它作用在块级父元素上不是直接写在文字上。line-height控制行高取值可以是无单位数字推荐如 1.8、像素、百分比。无单位数字的好处是会随font-size缩放子元素继承时不会锁死。.article p { font-size: 16px; line-height: 1.8; /* 16 * 1.8 28.8px */ text-align: justify; /* 两端对齐中文段落常用 */ }把text-align依次改成left、center、right、justify刷新看段落对齐变化。justify在中文里效果不错但英文长单词可能被拉开间距这时可以配合word-break或hyphens。3.2 letter-spacing 与 text-indentletter-spacing控制字符间距正值拉开、负值收紧。标题上轻微拉开0.5px 到 1px会显得更透气。text-indent控制首行缩进中文段落常用2em因为1em等于当前字号2em正好两个汉字宽。.article p { letter-spacing: 0.5px; text-indent: 2em; }把text-indent改成0首行缩进消失改成32px效果和2em字号 16px 时一样但字号一变px就不跟着变这就是为什么推荐em。3.3 text-decoration 与链接下划线text-decoration常用值underline、line-through、overline、none。最常见的用途是去掉a标签默认下划线再在 hover 时加回来。.link-demo a { text-decoration: none; color: #0a66c2; } .link-demo a:hover { text-decoration: underline; }这里有个细节text-decoration在现代浏览器里可以简写颜色和样式比如text-decoration: underline wavy #e00;但兼容性一般生产环境建议分开写text-decoration-line、text-decoration-color。3.4 text-transform 与 text-shadowtext-transform取值none、uppercase、lowercase、capitalize、full-width。它只改变显示不改变 DOM 里的原始文本所以复制出来还是原样。text-shadow格式是h-shadow v-shadow blur color前两个必填后两个可选。.article h2 { text-align: center; text-transform: capitalize; text-shadow: 1px 1px 2px rgba(0,0,0,0.15); }把text-transform改成uppercase标题全大写改成lowercase全小写。text-shadow把 blur 调大如 8px会变成发光效果调成负偏移会往左上投影。3.5 字体简写 font 的注意事项font简写格式是font: style weight size/line-height family;。其中size和family必填且size必须在family前面line-height用斜杠跟在size后面。.article p { font: italic bold 16px/1.8 Microsoft YaHei, sans-serif; }注意简写会把没写的属性重置为初始值比如你之前单独设了font-variant用font简写后会被清掉。所以生产环境里简写适合一次性定义完整字体栈局部微调还是用单独属性更安全。4. 列表样式完整配置list-style-type、list-style-position 与 list-style-image列表这块的坑比文本属性更集中因为浏览器默认样式参与得多。先把默认值说清楚ul、ol默认margin-top、margin-bottom为16px约1empadding-left为40px约2.5emli本身没有默认行间距dl有上下margin但没有内边距dd的margin-left是40px。这些默认值是你调列表时“怎么都不对齐”的根源。4.1 list-style-type 与 list-style-positionlist-style-type控制标记类型disc实心圆ul默认、circle、square、decimalol默认、lower-alpha、upper-roman、none等。list-style-position控制标记在内容框内还是外outside默认标记在内容左侧外部、inside标记进入内容框换行时文字会绕到标记下方。.steps { list-style-type: decimal; list-style-position: outside; }把list-style-position改成inside刷新后你会看到长文本换行时第二行会顶到标记下面而不是和第一行文字左对齐。这就是inside和outside最直观的区别。4.2 list-style-image 与自定义标记list-style-image用url()指定图片作为标记。它有个优先级问题如果同时设置了list-style-type和list-style-image图片会覆盖类型标记但图片加载失败时会回退到list-style-type。所以稳妥写法是两个都写。.custom-list { list-style-image: url(data:image/svgxml,%3Csvg xmlnshttp://www.w3.org/2000/svg width12 height12%3E%3Ccircle cx6 cy6 r5 fill%230a66c2/%3E%3C/svg%3E); list-style-type: disc; /* 图片加载失败时的回退 */ }这里用内联 SVG 的 data URI避免你还要去找图片文件。实际项目里更推荐用::marker伪元素或background-image方案因为list-style-image对图片尺寸和对齐的控制很弱图片大小不会自动适配字号。4.3 list-style 简写与导航栏实战list-style简写顺序是type image position三者都可省略。最常用的就是list-style: none;去掉标记然后用 CSS 自定义。.menu { list-style: none; padding-left: 0; /* 关键清掉浏览器默认缩进 */ margin: 0; } .menu li { display: inline-block; margin-right: 16px; }如果你只写list-style: none不写padding-left: 0导航项还是会整体右移 40px。这是新手最常问的“为什么去掉了圆点还是没对齐”。把padding-left归零后再配合display: inline-block横向导航就成型了。4.4 用 ::marker 做更精细的控制现代浏览器支持::marker伪元素可以直接改标记的颜色、字号甚至内容。.steps li::marker { color: #0a66c2; font-weight: bold; }这比list-style-image灵活得多因为标记会跟随字号缩放。如果你的目标浏览器支持Chrome 86、Firefox 68、Safari 11.1优先用::marker。5. 浏览器验证与常见报错排查配置写完怎么确认真的生效打开开发者工具选中元素看 Computed 面板。下面列出几个高频“报错”场景它们不是控制台报错而是渲染不符合预期。第一个list-style-image写了但没显示。先看图片路径对不对data URI 有没有拼错再看是不是被list-style-type覆盖了其实不会图片优先最后看图片尺寸如果图片是 100x100标记会巨大甚至撑破布局。解决用::marker或把图片做成 12x12 的小图。第二个text-align: center不生效。检查你写在了哪个元素上。如果写在span这种行内元素上它没有块级宽度居中看不出来。要写在块级父元素div、p、h2上。另外如果父元素宽度是fit-content居中也没有空间可居中。第三个line-height设了但行距没变。检查是不是被font简写覆盖了或者子元素有自己的line-height。用 Computed 面板看最终值如果显示normal说明你的规则没命中检查选择器优先级。第四个text-indent在非首行也缩进了。text-indent只作用于块级元素的第一行如果你看到每行都缩进说明你把text-indent写在了行内元素上或者用了display: inline。第五个letter-spacing让文字溢出容器。负值收紧一般没事正值拉开时如果容器宽度固定长标题可能换行或溢出。解决给容器留足空间或用overflow-wrap: break-word。第六个text-decoration: none去不掉链接下划线。检查是不是有更高优先级的规则比如a:visited或框架样式。用开发者工具看 Styles 面板里哪条规则赢了被划掉的规则就是没生效的。第七个list-style-position: inside后标记和文字挤在一起。这是正常行为inside会把标记当作文本流的一部分。如果你想要标记和文字有间距用::marker加margin-right或者干脆用background-image方案。排查通用方法在 Elements 面板选中元素看 Styles 里你的规则有没有被划横线被覆盖看 Computed 里最终值是多少。90% 的“没生效”都是选择器没命中或被覆盖。6. 把排版能力接到真实项目里上面这些属性单独看都不难难的是组合起来用。给你一个可以直接套用的思路正文区域用line-height: 1.8letter-spacing: 0.3pxtext-indent: 2em标题用text-align: centertext-shadow轻微投影导航用list-style: nonepadding-left: 0inline-block步骤列表用decimal::marker改颜色。这套组合覆盖了大部分内容型页面。如果你在把页面接到后端接口、或者用 AI 辅助生成代码时需要频繁调试请求可以顺手把接口调试环境也配好。模型对话入口在 https://taotoken.net/api接入文档在 https://taotoken.net/doc需要长期跑编码任务的话看 Coding Plan。这些和 CSS 排版是两条线但都属于前端日常要碰的工具链。最后留一个练习把本文示例里的.article p的line-height从1.8改成2.5再把letter-spacing改成-0.5px刷新看段落气质的变化。你会发现同样的文字行距和字距一调阅读节奏完全不同。排版这件事参数是死的眼睛是活的多改多比手感就出来了。