关于行高lineheight的概念及与Verticalalign、内容框、基线等的关系

&＃xff08;1&＃xff09;内容区

&＃xff08;2&＃xff09;3. 行距、行高

一个空的div&＃xff0c;没有设置至少大于1像素高度height值时&＃xff0c;该div的高度就是0&＃xff1b;当打入

了一个空格或是文字&＃xff0c;则此div就会有一个高度&＃xff0c;但是根本不是文字撑开了div的高度&＃xff0c;而是line-

heigh

css代码&＃xff1a;

.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代码&＃xff1a;

结果如右图

test1 div有文字大小&＃xff0c;但行高为0&＃xff0c;结果div的高度就是个0&＃xff1b;test2 div文字大小为0&＃xff0c;但是有行高&＃xff0c;为20像素&＃xff0c;结果div高度就是20像素。这就说明撑开div高度的是line-height不是文字内容。艾佛森退役”这5个字一行显示只有一个line boxes罩着你春哥纯爷们”这5个字竖着写&＃xff0c;一行一个一个字一个line boxe总计五个line boxesline boxes什么特性也没有&＃xff0c;就高度所以一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的

line boxes不是直接的生产者真正的活儿都是它的手下 – inline boxes干的&＃xff0c;这些手下就是文字啦&＃xff0c;图片啊&＃xff0c;span之类的inline属性的标签啦。line boxes只是个考察汇报人员&＃xff0c;考察它的手下谁的实际line-height值最高&＃xff0c;谁最高&＃xff0c;它就要谁的值&＃xff0c;然后向上汇报&＃xff0c;形成高度。

例如&＃xff0c;取手下line-height

最高的值。则line boxes的高度就是40像素了。

把line-height设置为您需要的box的大小可以实现单行文字的垂直居中&＃xff1b;”实现高度不固定的文字垂直居中使用padding就好了。对于高度固定的div&＃xff0c;里面文字单行或多行显示&＃xff0c;字体大小有大有小方法之一就是借助于line-height。

实现高度不固定的文字垂直居中使用padding就好。对于高度固定的div&＃xff0c;里面文字单行或多行显示&＃xff0c;字体大小有大有小的情况怎么办呢&＃xff1f;方法之一就是借助于line-height。

.mulit_line{line-height:150px; border:1px dashed #cccccc; padding-left:5px;} .mulit_line span{display:-moz-inline-stack; display:inline-block; line-height:1.4em; vertical-align:middle;} .mulit_line i{width:0; display:-moz-inline-stack; display:inline-block; vertical-align:middle; font-size:0;}

html代码&＃xff1a;

像素。

这里是第二行&＃xff0c;用来测试多行的显示效果。

 

.article_box *{line-height:150%;}不会出现文字重叠的情况网易博客就是使用的这个方法。但是使用“*”通配符大大增加了css的渲染&＃xff0c;效率低&＃xff0c;而且有更好的方法&＃xff0c;就是使用数值。150%虽然和1.5在值上是一样的&＃xff0c;但是它们也是有差别的&＃xff0c;差别在于继承性&＃xff0c;使用百分比会计算line-height的值&＃xff0c;然后以px像素为单位继承下去&＃xff0c;而1.5则是先继承1.5这个值&＃xff0c;遍历到了该标签再计算去line-height的像素值。所以同样的效果只需要.article_box{line-height:1.5;}就可以实现了。如果line-height是相对单位&＃xff0c;例如line-height:1.6或者line-height:160%之类&＃xff0c;也可以使用font-size间接控制&＃xff0c;比方说来个狠的&＃xff0c;font-size设为大鸡蛋0, 本质上还是改变line-height值.

任意尺寸的图片&＃xff08;或者内联块状化的多行文字&＃xff09;的垂直居中效果

div { line-height: 240px; } img { vertical-align: middle; }

上面的效果并不是完全的垂直居中&＃xff0c;只是近似

高度行高撑开&＃xff0c;其垂直中心是字符content area的中心&＃xff0c;而对于字符x而言&＃xff0c;都是比绝对中心位置要下沉的&＃xff08;不同字体下沉幅度不一样&＃xff09;&＃xff0c;换句更易懂的描述就是x的中心位置都是在字符内容区域高度中心点的下方&＃xff0c;而这上下的偏差就是这里图片上下间距的偏差。

我特意把字符x使用大字号演示了下&＃xff1a;

换句更简单的话说就是&＃xff1a;middle中线位置(字符x的中心)并不是字符内容的绝对居中位置。两个位置的偏差就是图片近似居中的偏差。

div { line-height: 240px; font-size: 0; } img { vertical-align: middle; }