Text（文本样式）
大约 2 分钟
来源：MDN-text
| 样式 | 含义 | 属性值 | 备注 |
|---|---|---|---|
| color | 文本颜色 | ||
| text-align | 文本水平对齐方式 | center居中left居右right居左justify两端对齐 | 如果想对某个行内元素\行内块元素水平居中，则给父元素添加text-algin:center即可 |
| text-indent | 文本缩进 | text-indent="2rem"（段落会缩进两个汉字） | |
| text-decoration | 文本修饰 | none通常用于去掉链接的下划线、overline 上划线、 line-through 删除线、 underline 下划线 | 不要在非链接上设置下划线，会使读者感到困惑。 此标签也可以定义文本使用那种样式的线以及颜色。如： text-decoration:overline wavy red;表示上红色波浪线 |
| line-height | 行高 | 子元素会继承父元素的行高。 | line-height 和 height 设置相同的值，字体会垂直居中。 一般情况下，line-height 设置为 font-size 的 1.5~2 倍比较合适。 |
| vertical-align | 用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式 | baseline(默认)使元素的基线与父元素的基线对齐top使元素的顶部与其所在行的顶部对齐middle使元素的中部与父元素中字母 x 的中心对齐bottom使元素的底部与其所在行的底部对齐 | 只会对行内元素和行内块元素起作用 |
text-shadowCSS3 | 文本阴影 | h-shadow 水平阴影的位置（允许负值） v-shadow 垂直阴影的位置（允许负值） blur 模糊的大小 color 阴影的颜色 | 语法text-shadow: h-shadow v-shadow blur color;x 前两个参数必填 |
| text-overflow | 文字溢出 | 使用 text-overflow:cllipsis;可以让溢出文字使用省略号代替 | |
| text-transform | 文本转换 | uppercase（全部大写） capitalize（每个单词首字母大写） lowercase(全部小写) | |
| letter-spacing、word-spacing | 文本间距 | letter-spacing 表示字母间距， word-spacing 表示单词间距 | 单位为像素，正直让间距增大，负值让间距缩小。 |
line-height 和 height 的关系？
- 行高大于盒子高度（文本会往下偏移）
- 行高等于盒子高度（文本会垂直居中）
- 行高小于盒子高度（文本会往上偏移）
文本中基线、顶线、中线和底线
