CSS文本样式
文本样式
文本缩进
属性名：text-indent
取值：
1、数字+px
2、数字+em(推荐：1em=当前标签font-size的大小)(推荐使用)
<style>
p{
/* text-indent: 32px; */ //第一种
text-indent: 2em;
}
</style>
文本水平对齐方式
属性名：text-align
取值：
| 属性值 | 效果 |
|---|---|
| left | 左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
注意点：如果需要让文本水平居中，text-align属性给文本所在标签(文本的父元素)设置。例如：
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
text-align:center;
}
</style>
</head>
<body>
<div class="box"> //div标签相当于是文本的父元素，所以text-align设置在父元素中。
我是一行文本 //这里的文本相当于是div标签的子元素
</div>
文本修饰
属性名：text-decoration
取值：
| 属性值 | 效果 |
|---|---|
| underline | 下划线(常用) |
| line-through | 删除线(不常用) |
| overline | 上划线(几乎不用) |
| none | 无装饰线(常用) |
注意点：在开发中会使用text-decoration：none；清除a标签默认下的下划线。例如：
<style>
div{
text-decoration: underline;
color: red;
}
a{
text-decoration: none; //在此把下划线去掉
}
</style>
</head>
<body>
<div>我是一个标签</div>
<a href="#">我是一个链接标签</a> //在刷新时会默认带有下划线
</body>
水平居中的方法
1、text-align属性
可以使文本，span，a，input，img标签水平居中。例如：
<style>
div{
width: 400px;
height: 400px;
background-color: skyblue;
text-align: center;
}
span{
color: red;
}
a{
color:orangered
}
</style>
</head>
<body>
<div>
<!-- 我是一个标签 -->
<!-- <span>我是一个span标签</span> -->
<!-- <a href="#">我是一个a标签</a> -->
<!-- <input type="text"> -->
<img src="images1/a74e3e6f7ba6cdd52e9cd9fbd0ffca81.jpg">
</div>
</body>
2、margin：0 auto
如果需要div、p、h(大盒子)水平居中，我们可以通过margin：0 auto；来实现
注意点：
如果需要让div、p、h(大盒子)水平居中，直接给当前元素本身设置即可。
margin：0 auto一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度。
行高
行高计算方法：行高-当前文本的高度，剩余的距离进行等分。
作用：控制行间距(给一行上下增加间距)
属性名：line-height
取值：1、数字+px
2、倍数(当前标签font-size的倍数)
应用：1、让单行文本垂直居中可以设置line-height：文字父元素高度
2、网页精准布局时，会设置line-height：可以取消上下间距
行高font连写的注意点：
1、如果同时设置了行高和font连写，注意覆盖问题
2、font：style、weight、size/line-height family(较为标准的写法)
Chrome调试工具
