文本效果
深入text-indent
- 实现首行缩进2字符：
text-indent:2em - 在引擎优化中，h1是非常重要的标签，一般情况下，我们都是把网站的LOGO图片放在h1标签中。但是搜索引擎只能识别文字，不能识别图片。为了更好地进行搜索引擎优化，一个很好的解决方案是：
- 指定h1元素的长宽和LOGO图片的长宽一样
- 定义h1的背景图片为LOGO图片
- 使用
text-indent:-9999px来隐藏h1的文字内容
深入text-align
text-align属性用来定义文本或图片的对齐方式，常用取值为left、right、center。
text-align属性对文本、inline元素以及inline-block元素都会起作用，但对block元素不起作用。
关于页面居中
在实现页面居中的方式中，text-align:center和margin:0 auto是最常见的两种居中方式，不过这两者也有着本质的区别。
text-align:center实现的是文本、inline元素以及inline-block元素的水平居中。margin:0 auto实现的是block元素的水平居中。text-align:center在父元素中定义，margin:0 auto在当前元素中定义。
深入line-height
line-height的准确定义：两行文字基线之间的距离。关于顶线、中线、基线、底线的内容本文不再赘述。
height和line-height
line-height是有默认值的，当没有定义line-height属性时，浏览器就会采用默认的line-height值。
一行文字的高度是由line-height决定，而不是由height决定。例如在p标签中，一个p标签的文字可以有很多行，其中line-height定义的是一行文字的高度，而height定义的才是整个段落的高度（即p标签的高度）。
line-height的取值
当line-height的取值为百分比或者em值时，元素的行高是相对于“当前元素”的font-size值来计算的。计算公式如下：
line-height = （当前元素font-size）×（百分比）
line-height =（当前元素font-size）×（em值）
应用场景
-
对于多行文字：控制行与行之间的距离。
-
对于单行文字：让
height等于line-height，可以实现文字垂直居中。由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感。
注意事项
line-height过小——文字产生重叠，且最小值是0，不能为负数。line-height是可以继承的，且为了能更好的呈现文字，最好写数值。line-height和height是什么关系？
- 设置了
height，那么高度就是height的值。- 不设置
height的时候，会根据line-height计算高度。
深入vertical-align
W3C官方对vertical-align属性的定义有以下4个方面的解释。
- vertical-align属性用于定义周围的文字、inline元素以及inline-block元素内文字的垂直对齐方式（同一行元素、表格单元格）。
- 在表格单元格中，vertical-align属性可以定义单元格td元素中内容的对齐方式。td元素是table-cell元素，也就是说vertical-align属性对table-cell类型元素有效（针对自身而言）。
- vertical-align属性对inline元素、inline-block元素和table-cell元素有效，对block元素无效。
- vertical-align属性允许制定负长度值（如-2px）和百分比值（如50%）。
vertical-align属性中最常见的属性值有4个：top、middle、baseline、bottom
baseline（默认值）：使元素的基线与父元素的基线对齐。top：使元素的顶部与其所在行的顶部对齐。middle：使元素的中部与父元素的基线加上父元素字母x的一半对齐。bottom：使元素的底部与其所在行的底部对齐。
