1. 文本缩进
text-indent 属性取值：1）数字 + px ； 2）数字 + em
推荐使用第二种，当字体大小改变时，使用第一种写法缩进不会随文字大小改变；使用第二种，缩进会随文字大小自动调整，因为 1em = 当前标签的 font-size 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.one {
font-size: 15px;
text-indent: 30px;
}
.two {
font-size: 15px;
text-indent: 2em;
}
.three {
font-size: 30px;
text-indent: 30px;
}
.four {
font-size: 30px;
text-indent: 2em;
}
</style>
</head>
<body>
<div class="one">推荐使用第二种，当字体大小改变时，使用第一种写法缩进不会随文字大小改变；使用第二种，缩进会随文字大小自动调整</div>
<hr />
<div class="two">推荐使用第二种，当字体大小改变时，使用第一种写法缩进不会随文字大小改变；使用第二种，缩进会随文字大小自动调整</div>
<hr />
<div class="three">推荐使用第二种，当字体大小改变时，使用第一种写法缩进不会随文字大小改变；使用第二种，缩进会随文字大小自动调整</div>
<hr />
<div class="four">推荐使用第二种，当字体大小改变时，使用第一种写法缩进不会随文字大小改变；使用第二种，缩进会随文字大小自动调整</div>
</body>
</html>
2. 文本水平对齐方式
text-align 的属性值有：
- left：左对齐
- center：居中对齐
- right：右对齐
text-align 可以使以下元素居中：
- 文本内容
- span 标签
- a 标签
- input 标签
- img 标签
这里有一点需要注意，text-align:center 要给以上元素的父元素设置，才能实现水平居中效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p {
text-align: center;
}
div {
text-align: center;
}
</style>
</head>
<body>
<p>文本的父元素 --- p 标签</p>
<div>
<span>span 标签的父元素 --- div 标签</span><br>
<a href="www.baidu.com">百度</a>
</div>
</body>
</html>
3. 文本修饰
文本修饰 text-decoration取值：
- underline : 下划线
- line-through : 删除线
- overline : 上划线
- none ：无装饰线，常用于清除 a 标签的默认下划线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.one {
text-decoration: underline;
}
.two a {
text-decoration: none;
}
</style>
</head>
<body>
<div class="one">文本修饰：下划线</div>
<br />
<div class="two">
<a href="www.baidu.com">百度搜索</a>
</div>
</body>
</html>
4. 行高
行高 line-height控制一行的上下行间距，取值：1）数字 + px；2）倍数，即当前标签 font-size 的倍数。
单行文本垂直居中：line-height : 文字父元素高度;
网页精准布局时，取消上下行间距：line-height : 1;
如果同时设置了 font 连写和行高，要注意覆盖问题：font:style weight size/line-height family;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.one {
font-size: 20px;
line-height: 20px;
background-color: aqua;
}
.two {
font: italic bold 20px/1 宋体;
background-color: antiquewhite;
}
.three {
line-height: 2;
background-color: bisque;
}
</style>
</head>
<body>
<div class="one">行高控制一行的上下行间距，取值：1）数字 + px；2）倍数，即当前标签字体大小的倍数。</div><br>
<div class="two">行高控制一行的上下行间距，取值：1）数字 + px；2）倍数，即当前标签字体大小的倍数。</div><br>
<div class="three">行高控制一行的上下行间距，取值：1）数字 + px；2）倍数，即当前标签字体大小的倍数。</div>
</body>
</html>
