深入了解css的行高LineHeight属性.docx

CSS浏览器什么是行间距？古时候我们是用印刷机来处理文字，印出来的每个字都位于独立的一个块里。行间距，即传说中控制两行文字之间垂直距离的东东。在CSS，line-height被用来控制行与行之间的垂直距离。不过行间距与半行间距还是取决于CSS中的line-height。那么如何来使用line-height？默认状态，浏览器使用1.0-1.2 line-height .这是一个初始值。你可以定义CSS里的line-height属性来覆盖默认值Css代码??p?{?line-height:140%;?}p { line-height:140%; }你可以用5种方式来定义line-height:1、line-height可以被定义为normal。Css代码??body?{?line-height:normal;?}body { line-height:normal; }2、line-height可以被定义为继承p { line-height:inherit; }3、line-height可以使用一个百分比的值p { line-height:120%; }4、line-height可以被定义为一个长度值（单位px、em等）p { line-height:20px; }5、line-height也可以被定义为纯数字（甚至没有单位）p { line-height:1.2; }缩写line-height那5种line-height值也可以在font属性里缩写line-height值紧跟着font-size值，使用斜杠隔开font-size/line-height举例来说......值normalbody { font:100%/normal arial; helvetica, sans-serif; }值百分比body { font:100%/120% arial; helvetica, sans-serif; }值长度body { font:100%/20px arial; helvetica, sans-serif; }值纯数字body { font:100%/1.2arial; helvetica, sans-serif; }计算line-height有些CSS属性是可继承(inherited)(从层叠的元素里传递下来)这样设计是为了方便开发者于是他们不用为所有后代元素再设置一次例如：color属性是可继承的。如果body被定义了color，那么它会传递给页面里的所有元素对于line-height继承会有一点复杂为了更好的演示line-height的各种用法使用如下的HTML代码h1 consectetueradipiscing .... /h1p Loremipsum dolor sit amet .... /pdiv id=footer Duisautemveleum .... /div这些代码有着如下文档树结构我们同时使用如下CSS（注：文字大小使用像素是为了看起来简单，尽管不推荐这么干！）Css代码??body?{?font-size:16px;?line-height:XXX;?}h1?{font-size:32px;}p?{font-size:16px;}?#footer?{font-size:12px;}body { font-size:16px; line-height:XXX; }h1 {font-size:32px;}p {font-size:16px;} #footer {font-size:12px;}例1：值百分比line-height被设置为百分比（120%）Css代码??body?{?font-size:16px;?line-height:120%;?}h1?{font-size:32px;}p?{font-size:16px;}#footer?{font-size:12px;}body { font-size:16px; line-height:120%; }h1 {font-size:32px;}p {font-size:16px;}#footer {font-size:12px;}line-height的百分比（120%）和body的文字大小（16px）被用来计算值（16px*120%=19.2px）这个计算出来的值会被层叠下去的元素所继承所有继承下来的元素会忽略本身的font-size，而使用相同的，计算出来的line-height.line-height不会随着相关的font-size做相应的比例缩放例2、值：长度line-height被设置成一个长度值（20px）Css代码??body?{?font-size:16px;?line-height:20px;?}h1?{font-size:32p