一、行高：line-height
line-height CSS 属性用于设置多行元素的空间量。
1、语法：
line-height: normal;
初始值 normal
是否是继承属性 yes2、取值：
normal
取决于用户端。桌面浏览器（包括Firefox）使用默认值，约为1.2，这取决于元素的 font-family。
<长度>：px
<数字>：
该属性的应用值是这个无单位数字<数字>乘以该元素的字体大小。计算值与指定值相同。大多数情况下，这是设置line-height的推荐方法，不会在继承时产生不确定的结果。
<百分比>：
与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。
3、注意：
1)行高的取值一般要大于自身的字体。
2)行高的继承：
- 百分比：继承的是计算后的值
- 数字（行高因子）：继承的不是计算后的值。直接拿行高因子
3)行高经典场景：单行文本垂直居中
/*行高经典场景：单行文本垂直居中*/
#p5{
border: 1px solid;
height: 100px;
line-height: 100px;
}4、代码示例：
<!--
行高（line_hight）=字体大小+行间距 默认值 1.2~1.5（本身大小的倍数）
参数：
normal：默认。1.2
px：固定像素
数字（1.2~1.5）：行高因子
%：当前字体尺寸的百分比行间距，继承的是计算后的值
使用规则：行高设为font-size 的1.2~1.5倍。
-->
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#p1 {
font-size: 30px;
line-height: normal;
}
#p2 {
font-size: 30px;
line-height: 40px;
}
#p3 {
font-size: 30px;
line-height: 1.5;
}
#p4 {
font-size: 30px;
line-height: 350%;
}
/*行高经典场景：单行文本垂直居中*/
#p5{
border: 1px solid;
height: 100px;
line-height: 100px;
}
</style>
</head>
<body>
<div id="p1">
<p>这是一段文本内容 </p>
</div>
<div id="p2">
<p>这是一段文本内容 </p>
</div>
<div id="p3">
<p>这是一段文本内容 </p>
</div>
<div id="p4">
<p>这是一段文本内容 </p>
</div>
<div id="p5" class="box" >
<span style="background: pink;">
Avoid unexpected results by using unitless line-height
</span>
</div>
</body>二、文本装饰-水平对齐方式：text-align
text-align 属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。注意此处的行内内容指的是 行内元素或行内块元素。
text-align只作用于块级元素
取值：left | right | center
语法：
text-align: left;
初始值 left if direction is ltr,
right if direction is rtl
是否是继承属性 yes代码示例：
<!--
水平居中：text-aligh 只作用于块级元素
取值：left | right | center
text-align属性指定元素文本的水平对齐方式。
取值：
left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
-->
<style>
#wrap1 {
text-align: left;
}
#wrap2 {
text-align: right;
}
.wrap22 {
text-align: right;
}
#wrap3 {
text-align: center;
}
#wrap4 {
text-align: justify;
}
</style>
</head>
<body>
<div id="wrap1">
2018年6月13日，早晨7点多钟，在山东省日照市，某房产商一座新开的楼盘开盘，现场涌入了1000多人</div>
<div class="wrap22">
2018年6月13日，早晨7点多钟，在山东省日照市，某房产商一座新开的楼盘开盘，现场涌入了1000多人</div>
<div id="wrap2">
2018年6月13日，早晨7点多钟，在山东省日照市，某房产商一座新开的楼盘开盘，现场涌入了1000多人</div>
<div id="wrap3">
2018年6月13日，早晨7点多钟，在山东省日照市，某房产商一座新开的楼盘开盘，现场涌入了1000多人</div>
<div id="wrap4">
2018年6月13日，早晨7点多钟，在山东省日照市，某房产商一座新开的楼盘开盘，现场涌入了1000多人</div>
</body>三、文本装饰-首行缩进：text-indent
text-indent 属性规定了一个元素首行文本内容之前应该有
多少水平空格。
取值：一般使用em为单位的数值
语法：
text-indent: 2em
初始值 0
是否是继承属性 yes四、文本装饰-文本排版：text-decoration
text-decoration 这个 CSS 属性是用于设置文本排版（下划线、顶划线、删除线）。下划线和顶划线修饰于文本的下部，删除线位于文本之上
text-decoration属性是一种简写属性，并且可以使用普通属性三个值中的任何一个。普通属性如下：text-decoration-line，text-decoration-color和text-decoration-style
text-decoration-line：指定线的位置
none：表示没有文本修饰效果。
underline：在文本的下方有一条修饰线。
Overline：在文本的上方有一条修饰线。
line-through：有一条贯穿文本中间的修饰线
text-decoration-color：指定线的颜色
text-decoration-style：指定线的类型
solid： 画一条实线。
double： 画一条双实线。
dotted： 画一条点划线。
dashed： 画一条虚线。
wavy： 画一条波浪线语法：
text-decoration: none;
初始值
text-decoration-color: currentcolor
text-decoration-style: solid
text-decoration-line: none
是否是继承属性 yes五、文本装饰-文字间隙：letter-spacing
CSS 的 letter-spacing 属性明确了文字的间距行为
取值：
长度（px em等。。。）
语法：
letter-spacing: normal;
初始值 normal
是否是继承属性 yes六、文本装饰-单词间隙：word-spacing
CSS 的 word-spacing 属性明确了文字的间距行为
取值：
长度（px em等。。。）
语法：
word -spacing: normal;
初始值 normal
是否是继承属性 yes七、文本装饰-文本换行：white-space
white-space CSS 属性是用来设置如何处理元素中的空白
取值：
normal
连续的空白符会被合并，换行符会被当作空白符来处理。填充line盒子时，必要的话会换行。
nowrap
和 normal 一样，连续的空白符会被合并。但文本内的换行无效。
语法：
white-space: normal;
初始值 normal
是否是继承属性 yes八、垂直对齐方式：vertical-algin
vertical-align 一般用来指定inline-block的垂直对齐方式。
我们经常会在img（替换元素）上使用vertical-align属性.
语法：
vertical-algin: baseline;
初始值 baseline
是否是继承属性 no值
baseline
元素基线与父元素的基线对齐。
对于一些 可替换元素，比如 ， HTML标准没有说明它的基线，这意味着对其使用这个关键字，各浏览器表现可能不一样。一般情况下如果元素没有基线baseline，则以它的外边距的下边缘为基线。
text-top：元素顶端与父元素字体的顶端对齐。
text-bottom：元素底端与父元素字体的底端对齐。
middle：元素中线与父元素的小写x中线对齐。
sub：
元素基线与父元素的下标基线对齐。（使元素的基线相对于基准基线下降，下降的幅度有浏览器厂商决定）
super：
元素基线与父元素的上标基线对齐。（使元素的基线相对于基准基线升高，升高的幅度有浏览器厂商决定）
以下两个值是相对于整行来说的：
top
元素及其后代的顶端与整行的顶端对齐。
bottom
元素及其后代的底端与整行的底端对齐。
331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
