line-height
看似简单,其实还是有挺多不知道的奥妙。比如line-height:300%,line-height:3,有什么不同……

形式化语法

1
normal | <number> | <length> | <percentage>

取值

normal

取决于用户代理。桌面浏览器(包括火狐浏览器)使用默认值,约为1.2,这取决于元素的 font-family。

所用的值是无单位数值乘以元素的 font size。计算出来的值与使用数值指定的一样。大多数情况下,使用这种方法设置line-height是首选方法,在继承情况下不会有异常的值。

指定 用于计算 line box 的高度。查看 获取可能的单位。

与元素自身的字体大小有关。计算出的值是给定的百分比值乘以元素计算出的字体大小。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>line-height</title>
<style type="text/css">
p{margin:10px;background:#ddd;}
p+p{margin-left:40px;}
body{font-size:30px;}
.m-demo{line-height:40px;}
.m-demo p{background:#ddd;}
.m-demo .p1{line-height:3em;}
.m-demo .p2{line-height:300%;}
.m-demo .p3{line-height:3;}
.m-demo2{line-height:300%;}
.m-demo2 p{background:#fbb;}
.m-demo2 .p1{font-size:16px;}
.m-demo3{line-height:3;}
.m-demo3 p{background:#0dd;}
.m-demo3 .p1{font-size:16px;}
</style>
</head>
<body>
<div class="m-demo">
<p>行高:line-height:40px;</p>
<p class="p1">行高:line-height:3em;</p>
<p class="p2">行高:line-height:300%;</p>
<p class="p3">行高:line-height:3;</p>
</div>
<div class="m-demo2">
<p>行高:line-height:300%;</p>
<p class="p1">字体大小:font-size:16px;</p>
</div>
<div class="m-demo3">
<p>行高:line-height:3;</p>
<p class="p1">字体大小:font-size:16px;</p>
</div>
</body>
</html>

自己的理解:

1、normal由浏览器决定,一般是1.1到1.2之间,1.14左右。

2、最近遇到,安卓浏览器显示placeholder 垂直不居中,去掉line-height即可。或者line-height:normal。

3、font-size:30px;line-height:3em;(90px),
line-height:300px;(90px),
line-height:3;(90px)
百分比和数字的区别:number是直接继承。(推荐使用无单位数值给line-height赋值)
比如:m-demo2行高是90px;m-demo3行高是48px;

参见:MDN line-height
参见:CSS3在线手册
参见:css2.1规范

感悟,多查规范,看MDN。善用google搜索。

本文地址: https://lxchuan12.github.io/2016/08/08/20160808-line-height/