目录
[一、行高（line height）:](#一、行高（line height）:)
[2、 text-decoration](#2、 text-decoration)
[8、 text-overflow](#8、 text-overflow)
[10、text-shadow: h-shadow v-shadow blur color;](#10、text-shadow: h-shadow v-shadow blur color;)
[11、box-shadow: h-shadow v-shadow blur color;](#11、box-shadow: h-shadow v-shadow blur color;)
一、行高（line height）:
文字占有的实际高度
行高=上间距+文字大小+下间距
作用：
（1）、由于上间距=下间距（css默认规范），设置高度和行高一致，可以实现文本的垂直居中
（2）、使用行高来控制第一行文本与第二行文本之间的距离
line-height: 设置行高
可选值：
xxx长度单位 例如：30px
数值 例如：2，3，1.5，是当前文字大小的倍数，没有就继承祖先元素
css
.p2 {
color: orange;
line-height: 2;
font: italic bold 30px/2 serif;
}
设置行高时也可在font中简写，在字体大小后面/行高即可
二、文本样式：
1: text-transform 可以用来设置文本的大小写,主要针对英文
2: text-decoration 可以用来设置文本的修饰
3: letter-spacing 可以指定字符间距
4: word-spacing 可以设置单词之间的距离
5: text-align 用于设置文本的对齐方式
6: text-indent 设置首行缩进
7: white-space 设置网页如何处理空白
8: text-overflow 文本溢出包含元素时发生的事情
9:vertical-align 设置元素垂直对齐的方式
10: text-shadow: h-shadow v-shadow blur color; 设置文字的阴影
11: box-shadow: h-shadow v-shadow blur color; 设置盒模型的阴影
1、text-transform
可以用来设置文本的大小写,主要针对英文
可选值：
none 默认值 文本正常显示
capitalize 首字母大写
uppercase 所有字母大写
lowercase 所有字母小写
2、 text-decoration
可以用来设置文本的修饰
可选值：
none 默认值，文本没有修饰
underline 下划线
overline 上划线
line-through 删除线
3、letter-spacing
可以指定字符间距
css
.element {
letter-spacing: 3px;
}
4、word-spacing
以空格为一个单位，设置距离
css
.example {
word-spacing: 50px;
}
5、text-align
用于设置文本的对齐方式
可选值：
left 默认值 文本左对齐
right 文本右对齐
center 文本居中对齐
注意：设置前提，必须有可以移动的空间，行内元素来说，它是被撑开的，无法设置大小，
所有设置text-align没有效果
6、text-indent
设置首行缩进
可以直接跟一个长度，正值向右缩进，负值向左缩进
设置一个比较大的负值，可以用来隐藏元素（缩到屏幕外面去了，看不见但实际还在）
css
text-indent: -1000px;
7、white-space
设置网页如何处理空白
可选值：
normal：默认值 空白会被浏览器忽略，文本会自动换行。
pre：空白会被浏览器保留，文本不会换行直到遇到标签或换行符
nowrap：文本不会换行，直到遇到标签。空白会被浏览器忽略。
8、 text-overflow
文本溢出包含元素时发生的事情
制作单行文本省略号
css
/* 设置不换行 */
white-space: nowrap;
/* 设置多余文本以省略号的形式显示 */
text-overflow: ellipsis;
/* 裁剪多余文本 */
overflow: hidden;
/* 控制宽度 */
width: 500px;
9、vertical-align
设置元素垂直对齐的方式
可选值：
baseline 基线对齐 默认值，沿着字母x的最下方对齐
bottom 图文靠下对齐
top 图文靠上对齐
middle 图文居中对齐
作用1:设置图文对齐方式
作用2:解决图片底部三像素的问题
面试题：如何解决图片的三像素问题？
1、给图片设置vertical-align,非baseline即可
2、将图片这个行内块元素转成块元素 display: block;
3、在图片的父元素上设置font-size:0;
4、将图片脱离文档流（页面最底层），例如设置浮动
10、text-shadow: h-shadow v-shadow blur color;
设置文本的阴影
参数：
h-shadow ：阴影的水平移动距离，正值向右移动，负值向左移动,必写
v-shadow 阴影的垂直移动距离，正值向下移动，负值向上移动,必写
blur 阴影的模糊半径，值越大，越模糊，可不写，默认是0
color： 阴影的颜色 可不写，默认是字体的颜色
11、box-shadow: h-shadow v-shadow blur color;
设置元素框（盒模型）等容器元素
参数：
h-shadow ：阴影的水平移动距离，正值向右移动，负值向左移动,必写
v-shadow 阴影的垂直移动距离，正值向下移动，负值向上移动,必写
blur 阴影的模糊半径，值越大，越模糊，可不写，默认是0
color： 阴影的颜色 可不写，默认是字体的颜色