1.水平对齐(text-align)
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性，是让盒子里面的内容水平居中， 而不是让盒子居中对齐。其可用属性值如下：
-
left：左对齐（默认值）
-
right：右对齐
-
center：居中对齐
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div { 8 background-color: pink; 9 text-align: center; 10 } 11 </style> 12 </head> 13 <body> 14 <div>码海无际</div> 15 </body> 16 </html>
2.文本行高(line-height)
line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div { 8 background-color: pink; 9 line-height: 50px; 10 } 11 </style> 12 </head> 13 <body> 14 <div> 15 码海无际<br> 16 码海无际 17 </div> 18 </body> 19 </html>
3.首行缩进(text-indent)
-
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
-
1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .one { 8 text-indent: 2em; 9 } 10 div { 11 background-color: pink; 12 } 13 </style> 14 </head> 15 <body> 16 <div class="one">码海无际勤作舟，志向高远写春秋</div> 17 <div>码海无际勤作舟，志向高远写春秋</div> 18 </body> 19 </html>
4.字符间距(letter-spacing)
设置文字水平之间的间距
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div { 8 background-color: pink; 9 letter-spacing: 10px; 10 } 11 </style> 12 </head> 13 <body> 14 <div>码海无际勤作舟，志向高远写春秋</div> 15 </body> 16 </html>
5.文本装饰(text-decoration)
通常我们用于给链接修改装饰效果，属性值：
-
none：默认。定义标准的文本。
-
underline：下划线，也是我们链接自带的。
-
overline：上划线，就是线条在文本的上面。
-
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div { 8 text-decoration: line-through; 9 } 10 </style> 11 </head> 12 <body> 13 <div>码海无际勤作舟，志向高远写春秋</div> 14 </body> 15 </html>
6.处理空白符(white-space)
-
white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
-
通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的 XHTML 处理已经完成了空白符处理：它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行。
| 值 | 空白符 | 换行符(回车) | 自动换行 |
|---|---|---|---|
| pre-line | 合并 | 保留 | 允许 |
| normal | 合并 | 忽略 | 允许 |
| nowrap | 合并 | 忽略 | 不允许 |
| pre | 保留 | 保留 | 不允许 |
| pre-wrap | 保留 | 保留 |
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div { 8 white-space: pre; 9 background-color: pink; 10 width: 60px; 11 } 12 </style> 13 </head> 14 <body> 15 <div> 16 码海无 际勤作舟， 17 志向高远写春秋 18 </div> 19 </body> 20 </html>
