一、前言
本文整理了 CSS 中文本排版、行高控制、对齐方式、阴影效果等核心属性的用法，结合代码案例讲解，帮助快速掌握文本样式的精细化控制。
二、 行高（line-height）
1. 核心概念
行高 = 上间距 + 文字大小 + 下间距，上间距 = 下间距。
2. 核心作用
- 实现文本垂直居中：将容器
height与line-height设置为相同值。 - 控制多行文本的行间距。
3. 语法与取值
css
/* 方式1：直接写长度单位 */
line-height: 30px;
/* 方式2：写数值（倍数），基于当前字体大小 */
line-height: 1.5;
/* 方式3：在font属性中简写 [字体样式 字重 字号/行高 字体族] */
font: italic bold 30px/2 serif;4. 代码案例
css
li {
height: 80px;
line-height: 80px; /* 实现文本垂直居中 */
background-color: #ccc;
}三、 文本样式核心属性
1. 文本大小写转换（text-transform）
仅对英文有效，取值如下：
| 取值 | 效果 |
|---|---|
none |
默认值，文本正常显示 |
capitalize |
每个单词首字母大写 |
uppercase |
所有字母大写 |
lowercase |
所有字母小写 |
2. 文本修饰（text-decoration）
控制文本下划线、删除线等效果：
| 取值 | 效果 |
|---|---|
none |
默认值，无修饰（常用于清除 a 标签下划线） |
underline |
下划线 |
overline |
上划线 |
line-through |
删除线 |
3. 字符 / 单词间距
-
letter-spacing ：设置字符间距 （中英文均生效）
cssletter-spacing: 3px; /* 字符之间间隔3px */ -
word-spacing ：设置单词间距 （以空格为分隔符，仅英文生效）
cssword-spacing: 20px; /* 单词之间间隔20px */
4. 文本对齐（text-align）
控制块级元素内文本的水平对齐方式，行内元素无效。
| 取值 | 效果 |
|---|---|
left |
左对齐（默认） |
right |
右对齐 |
center |
居中对齐 |
5. 首行缩进（text-indent）
控制文本首行缩进，支持正负值：
css
p {
text-indent: 2em; /* 首行缩进2个字符宽度 */
text-indent: -100px; /* 向左缩进（可用于隐藏文字） */
}6. 单行文本省略号（高频面试题）
核心三属性：
css
h1 {
width: 200px; /* 限定容器宽度 */
white-space: nowrap; /* 强制文本不换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 溢出部分显示省略号 */
}7. 垂直对齐（vertical-align）
（1）核心作用
- 控制行内元素 / 行内块元素的垂直对齐方式（如图片与文字对齐）。
- 解决图片底部默认留白问题。
（2）常用取值
| 取值 | 效果 |
|---|---|
baseline |
基线对齐（默认，字母 x 的底部） |
top |
顶部对齐 |
middle |
居中对齐 |
bottom |
底部对齐 |
（3） 解决图片留白的 4 种方法
css
/* 方法1：设置vertical-align为非baseline值 */
img { vertical-align: top; }
/* 方法2：将图片转为块级元素 */
img { display: block; }
/* 方法3：设置父元素font-size为0 */
.box1 { font-size: 0; }
/* 方法4：让图片脱离文档流（如浮动） */
img { float: left; }四、 阴影效果
1. 文本阴影（text-shadow）
语法
css
text-shadow: h-shadow v-shadow blur color;| 参数 | 说明 | 是否必填 |
|---|---|---|
h-shadow |
水平偏移量（正值右移，负值左移） | 是 |
v-shadow |
垂直偏移量（正值下移，负值上移） | 是 |
blur |
模糊半径（值越大越模糊，默认 0） | 否 |
color |
阴影颜色（默认与文本颜色一致） | 否 |
案例
css
h1 {
color: red;
text-shadow: 10px 10px 5px #ccc; /* 右下偏移10px，模糊5px，灰色阴影 */
}2. 盒子阴影（box-shadow）
语法
css
box-shadow: h-shadow v-shadow blur color;参数含义与 text-shadow 一致，区别是作用于元素盒子而非文本。
案例
css
.box2 {
width: 200px;
height: 200px;
background-color: red;
box-shadow: 10px 10px 5px #666; /* 右下阴影，模糊5px */
}五、 总结
- 行高
line-height是实现文本垂直居中的核心属性，简写时需注意font属性的顺序。 - 单行文本省略号需要 宽度 + 不换行 + 隐藏溢出 + 省略号 四属性配合。
vertical-align专门解决行内元素垂直对齐问题，是处理图片留白的关键。- 阴影属性
text-shadow/box-shadow参数一致，作用对象不同，可通过模糊半径控制阴影柔和度。