- A+
所属分类：Web前端
文本样式
文本缩进
属性名：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" alt="CSS文本样式"> </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调试工具
