第三十三章 行高和样式

行高这个属性可能是我们平常没有在意过的，它表示一行文字所占用的高度。我们写一段内容，两行文字之间会有一些空白，这样看起来很舒服。而之所以会有这些空白，是因为每一行文字所占用的高度都要比文字本身的高度更大。

你也许会说，为什么两段文字之间的空白要更大一些？这里的空白不只与行高有关，还受到了一些其他属性的影响，我们在后面会讲到。所以现在我们想测试行高的时候，请在一个段落内写足够多的文字，让它自动折行。

这个属性的名字也非常的简单，line-height，是多么的简单直白啊。

它的值也有多种的表达方式，默认是 normal，就是浏览器的默认值，大约是 1.2，和所选用的字体有关。

但是默认值是不需要我们进行设置的，而我们对它进行设置的时候，推荐使用没有单位的数字，比如：

p {line-height: 1.6;}

它表示行高是当前文字大小的多少倍。听起来好像和 em 相似。但这里指的是相对于这个元素本身字号的倍数；em 则是相对于父元素。

同样的，行高也可以使用 px、em、rem 和百分比，所代表的意义和我们前面所讲的是一样的。但是因为这些表示相对尺寸的单位，相对的是其他元素，这样可能引起一些混乱。所以没有特别的需求，推荐使用无单位数字。

我们认识这些单位之后，行高就显得非常简单了。为了凑字数，我们再讲一个非常简单的属性：font-style。字面上看，它就是文字的样式。它的设置本身就不复杂，而我们日常用到的就更简单了，一般就只有下面这种用法:

p {font-style: italic;}

就是把当前元素的文字设置为斜体，你也可以把它的值设置为 normal，这是我们正常看到不倾斜的样式，当然这是默认的，所以一般情况下，我们也不会用到这个设置。（除非你是想在一堆倾斜的文字中偶尔正常一下）

不过因为中文的斜体并不怎么好看，而且好多字体也并没有特意的给出它的斜体样式。觉得大部分中国人并不怎么喜欢这个设置，反正我是会在中文情况下，适当回避它（毕竟老鼠眼神不好，斜体字太不好读了。

到这里我们就学习了四个简单的属性，现在一起来把它们综合运用一下：

p {color: #0084FF;font-size: 22px;line-height: 2.6;font-style: italic;}

这里是许多的文字，为了能够明确查看效果，所以我故意把字号和行高的值都设置得大了一些。