line-height的真相

今天学习了一个css的技巧：明白了以下这句话的实现原理

“高度给定的元素, 其内部单行文本垂直居中的一种实现方式为: 给当前定高元素, 设置line-height属性, 其属性值等于当前元素的height值.”

我们常说的单倍行距, 双倍行距等等, 主观上认为是line-height设置的值, 如果量一下实际的效果, 会发现, 两行文本的间距, 并非等于line-height的值.

浏览器计算和分配行间距的方法

间距 = "line-height" – "font-size";
文本上下分配大小 = 间距/2;
字号 = 12px; line-height:3;
间距 = 3*12 – 12 = 24(px);
文本上下分配大小 = 24/2 = 12(px)

"line-height的值, 推荐使用数字而非带有单位的值, 如, 推荐使用line-height:2; 不推荐使用line-height:24px;" 原因在于, line-height:24px;是一个固定的值, 对于任何大小的文本, 都采用这个值来计算行间距. 若文本的字号过大, 会出现重叠的问题. 不带单位的值表示倍数. 自然避免了该问题.
看下边的例子

 1 <!doctype html>
 2 <html>
 3         <head>
 4                 <meta charset="utf-8" />
 5                 <style type="text/css">
 6                 div{
 7                         font-size:30px;
 8                         font-family:Consolas,Microsoft Yahei,SimSun;
 9                         margin:10px 10px 0px 10px;
10                       padding:10px;
11 }
12               #demo_1{
13                       background:#EEE;
14                       border:solid 1px #CCC;
15                       line-height:12px;
16 }
17               #demo_2{
18                       background:#333;
19                       border:solid 1px #000;
20                       line-height:2;color:#FFF;
21 }
22 </style>
23               <title>Line-heighg demo</title>
24       </head>
25       <body>
26       <div id="demo_1">
27               line-height:24px;<br />
28               line-height:24px;
29       </div>
30       <div id="demo_2">
31               line-height:2;<br />
32               line-height:2;
33       </div>
34       </body>
35 35.</html>

运行结果是：

posted on 2012-03-22 17:59 爱睡觉的鱼阅读(343) 评论(0) 收藏举报