首页 > 代码库 > CSS使用注意(1):关于line-height理解
CSS使用注意(1):关于line-height理解
Line-height是前端用语,经常被前端开发人员经常使用.
line-height设置1.5和150%有什么区别?这是一个比较常见的前端面试题.
定义:
line-height指的是文本行基线间的距离(文字尺寸和行距之间的和). 但是文本之间的空白距离不仅仅是行高决定的,同时也受字号的影响.
基线:
基线(baseline),指的是一行字横排时下沿的基础线,基线并不是汉字的下端沿,而是英文字母x的下端沿,同时还有文字的顶线(Top line),中线(Middle line)和底线(Bottom line),用以确定文字行的位置.行高与字体尺寸的差称为行距(leading),也就是说行高是指文字尺寸与行距之间的和.
<!DOCTYPE html><html> <head> <title>Test</title> <meta charset="UTF-8"> <style type="text/css" > span{ padding:0px; line-height:1.5; } </style> </head> <body> <div class="test"> <div style="background-color:#ccc;"> <span style="font-size:3em;background-color:#999;">中文English</span> <span style="font-size:3em;background-color:#999;">English中文</span> </div> </div> </body><html>顶线、中线、基线、底线:
从上到下四条线分别是顶线、中线、基线、底线,很像才学英语字母时的四线三格，我们知道vertical-align属性中有top、middle、baseline、bottom,就是和这四条线相关.
尤其记得基线不是最下面的线,最下面的是底线.
行高、行距与半行距
行高是指上下文本基线间的垂直距离,即图中两条红线间垂直距离.
行距是指一行底线到下一行顶线的垂直距离,即第一行粉线和第二行绿线间的垂直距离.
半行距是行距的一半,及区域3垂直距离/2,区域1、2、3、4的距离之和为行高,而区域1、2、4距离之和为字体size,所以行半距也可以这么算: (行高-字体size)/2.
内容区、行内距、行框:
内容区:底线和顶线包裹的区域,即下图深灰色背景区域.
行内框,每个行内元素会生成一个行内框,行内框是一个浏览器渲染模型中的一个概念,无法显示出来,在没有其他因素影响的时候(padding等),行内框等于内容区域,而设定行高时行内框高度不变,半行距【(行高-字体size)/2】分别增加/减少到内容区域的上下两边(深蓝色区域)
行框(line box),行框是指本行的一个虚拟的矩形框,是浏览器渲染模式中的一个概念，并没有实际显示.行框高度等于本行内所有元素中行内框最大的值(以行高值最大的行内框为基准,其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度),当有多行内容时，每行都会有自己的行框.
<div style=""> <span style="font-size:1em;">中文English</span> <span style="font-size:3em;">中文English</span> <span style="font-size:3em;">English中文</span> <span style="font-size:1em;">English中文</span></div>
值:
line-height有5个可能的值,分别是normal,number,length,%,inherit.
normal:默认.设置合理的行间距.
number:设置数字,此数字会与当前的字体尺寸相乘来设置间距.(line-height:1.5;)
length:设置固定的行间距.(line-height:18px;)
%:基于当前字体尺寸的百分比行间距.(line-height:150%;)
inherit:规定应该从父元素继承line-height属性的值.
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title>line-height</title><style type="text/css">p{font-size:20px;width:400px;}p.c1{line-height:normal} /*line-height:24px;在chrome下,line-height为font-size的1.2倍*/p.c2{line-height:1.5;} /*line-height=20*1.5=30px*/p.c3{line-height:30px;} /*line-height:30px*/p.c4{line-height:150%;} /*line-height=20*150%=30px*/</style><script type="text/javascript" src="http://www.mamicode.com/jquery-1.11.2.min.js"></script></head><body> <p class="c1">line-height与font-size的计算值之差(在CSS中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部.可以包含这些内容的最小框就是行框.</p> <p class="c2">line-height与font-size的计算值之差(在CSS中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部.可以包含这些内容的最小框就是行框.</p> <p class="c3">line-height与font-size的计算值之差(在CSS中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部.可以包含这些内容的最小框就是行框.</p> <p class="c4">line-height与font-size的计算值之差(在CSS中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部.可以包含这些内容的最小框就是行框.</p> <script type="text/javascript"> $("p").each(function(){ console.info( $(this).css("line-height") ) }); </script></body></html>line-height设置1.5和150%有什么区别?
你会发现,当line-height设置成1.5和150%的效果是一样的.那么行高设置为一个缩放因子和一个百分比的区别在哪里?区别就在于继承上,当元素A的行高设置为缩放因子时,元素的子元素B会继承这个缩放因子并将缩放因子乘以B的font-size得到B元素的行高;当元素A的行高设置为百分比时,元素A的子元素B的行高直接继承A元素计算后的行高.
例如有两个元素A和B,元素B是元素A的子元素:
父元素A设置行高为缩放因子时
元素A font-size:14px; line-height:1.5; 计算后行高为14*1.5 = 21px；
元素B font-size:28px; line-height:1.5 (继承来的)； 计算后行高为28*1.5 = 42px；
父元素A设置行高为百分比时
元素A font-size:14px; line-height:150%; 计算后行高为14*150% = 21px；
元素B font-size:28px; 直接继承父元素A的行高计算值21px，此时B的行高比font-size还小,就会导致B元素内的文字上下重叠.
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title>line-height</title><style type="text/css">.c1{font-size:14px;line-height:1.5;width:200px;}.c2{font-size:28px;}.c3{font-size:14px;line-height:150%;width:200px;}.c4{font-size:28px;}</style></head><body><div class="c1">line-height与font-size的计算值之差(在CSS中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部.可以包含这些内容的最小框就是行框. <p class="c2">line-height与font-size的计算值之差(在CSS中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部.可以包含这些内容的最小框就是行框.</p></div><div class="c3">line-height与font-size的计算值之差(在CSS中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部.可以包含这些内容的最小框就是行框. <p class="c4">line-height与font-size的计算值之差(在CSS中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部.可以包含这些内容的最小框就是行框.</p></div></body></html>因此,为了避免这种情况发生,建议将行高设置缩放因子,避免使用百分比或具体值.
div文字垂直居中:
div居中对齐一直是个难题,水平还好解决,margin:0 auto;
IE下text-align:center;但是垂直居中就没那么简单了,默认是这个样子的.
<div style="width:150px;height:100px;"> <span>This is a test.<br/>This is a test.</span></div>
效果如下:
我们可以利用line-block这样做,
<div style="width:150px;height:100px;line-height:100px;font-size:0"> <span style="display:inline-block;font-size:10px;line-height:1.4em;vertical-align:middle;">This is a test.<br/>This is a test.</span></div>
单行就比较简单了,把line-height设置为box的大小就可以实现单行文字垂直居中.
<div style="line-height:100px;border:dashed 1px #0e0;"> This is a test.</div>
元素对行高的影响:
行框高度是行内最高的行内框高度，通过line-height调整，内容区行高与字体尺寸有关，padding不对行高造成影响。
<div style="border:dashed 1px #0e0;margin-bottom:30px;"> <span style="font-size:14px;">This is a test</span></div><div style="border:dashed 1px #0e0;"> <span style="font-size:14px;padding:20px;">This is a test</span></div>
第二个span虽然因为padding原因内容区变大，当行高并未改变.
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 1.div文字垂直居中: 9 <div style="width:150px;height:100px;background-color:#ccc;">10 <span>This is a test.<br/>This is a test.</span>11 </div>12 <br><br>13 2.单行div文字垂直居中:14 <div style="width:150px;height:100px;line-height:100px;background-color:#ccc;font-size:0">15 <span style="display:inline-block;font-size:10px;line-height:1.4em;vertical-align:middle;">This is a test.<br/>This is a test.</span>16 </div>17 <br><br>18 3.元素对行高的影响1:19 <div style="line-height:100px;border:dashed 1px #0e0;">20 This is a test.21 </div>22 <br><br>23 4.元素对行高的影响:24 <div style="border:dashed 1px #0e0;margin-bottom:30px;">25 <span style="font-size:14px;background-color:#999;">This is a test</span>26 </div>27 <div style="border:dashed 1px #0e0;">28 <span style="font-size:14px;padding:20px;background-color:#999;">This is a test</span>29 </div>30 31 32 </body>33 </html>
CSS使用注意(1):关于line-height理解