二、一些字面意思
“行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。基线实在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有四条线,其中底部第二条线就是基线,是a,c,z,x等字母的底边线。下图的红色线即为基线。
vertical-align
中有top
,middle
,baseline
,bottom
与之是由关联的,但具体细节如何,浏览器差异怎样,我还不是很清楚。
但是由于中文跟英文长得不一样,所以基线的说法就像老太太穿线——对不上眼。您理解为底线之差也不为不可。只是定义一回事,表现则另一回事。
三、line-height与line boxes高度
CSS中起高度作用的应该就是height
以及line-height
了吧!如果一个标签没有定义height
属性(包括百分比高度),那么其最终表现的高度一定是由line-height
起作用,即使是IE6下11
像素左右默认高度bug也是如此。待我慢慢叙来。
先说一个大家都熟知的现象,有一个空的div
,<div></div>
,如果没有设置至少大于1
像素高度height
值时,该div
的高度就是个0
。如果该div
里面打入了一个空格或是文字,则此div
就会有一个高度。那么您思考过没有,为什么div
里面有文字后就会有高度呢?
这是个看上去很简单的问题,是理解line-height
非常重要的一个问题。可能有人会跟认为是:文字撑开的!文字占据空间,自然将div
撑开。我一开始也是这样理解的,但是事实上,深入理解inline
模型后,我发现,根本不是文字撑开了div
的高度,而是line-height
!要证明很简单(如下测试代码):
CSS代码:
.test1{font-size:20px; line-height:0; border:1px solid #cccccc; background:#eeeeee;} .test2{font-size:0; line-height:20px; border:1px solid #cccccc; background:#eeeeee;}
HTML代码:
<div class="test1">测试</div> <div class="test2">测试</div>
结果如下图(windows IE6浏览器下):
结果是如此的显而易见,test1 div
有文字大小,但行高为0
,结果div
的高度就是个0
;test2 div
文字大小为0
,但是有行高,为20
像素,结果div
高度就是20
像素。这就说明撑开div
高度的是line-height
不是文字内容。
到底这个line-height
行高怎么就产生了高度呢?在inline
box
模型中,有个line boxes
,这玩意是看不见的,这个玩意的工作就是包裹每行文字。一行文字一个line
boxes
。例如“艾佛森退役”这5个字,如果它们在一行显示,你艾佛森再牛逼,对不起,只有一个line boxes
罩着你;但“春哥纯爷们”这5个字,要是竖着写,一行一个,那真是够爷们,一个字罩着一个line
boxes
,于是总计五个line boxes
。line
boxes
什么特性也没有,就高度。所以一个没有设置height
属性的div
的高度就是由一个一个line
boxes
的高度堆积而成的。
其实line boxes
不是直接的生产者,属于中层干部,真正的活儿都是它的手下 – inline
boxes
干的,这些手下就是文字啦,图片啊,<span>
之类的inline
属性的标签啦。line
boxes
只是个考察汇报人员,考察它的手下谁的实际line-height
值最高,谁最高,它就要谁的值,然后向上汇报,形成高度。例如,<span
style="line-height:20px;">取手下line-height<span style="line-height:40px;">最高</span>的值</span>
。则line boxes的高度就是40像素了。