line-height 百分比与数值的区别

时间：2016-2-14类别：Web前端

line-height 百分比与数值的区别

line-height 百分比与数值的区别

一、line-height的值为百分比

子集元素继承父级元素的距离

1、例如


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>...
        body{...}{
            font-size:14px;
            line-height:150%;
            background: black;
        }
        p{...}{
            font-size:26px;
            background: gray;
            color: white;
        }
    </style>
</head>
<body>
    <p>你好！</p>
</body>
</html>

2、效果如图

3、说明


body{...}{font-size:14px;line-height:150%;}

p{...}{font-size:26px;}


//结果就是：


body{...}{line-height:21px;}//14*150%=21

			
				p{...}{line-heigt:21px;}//继承父元素

二、line-height的值为数值

子元素计算各自的行距离

1、例如


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>...
        body{...}{
            font-size:14px;
            line-height:1.5;
            background: black;
        }
        p{...}{
            font-size:26px;
            background: gray;
            color: white;
        }
    </style>
</head>
<body>
    <p>你好！</p>
</body>
</html>

2、效果如图

3、说明


body{...}{font-size:14px;line-height:1.5;}

p{...}{font-size:26px;}


//结果就是：

			
				body{...}{line-height:21px;} //14*1.5=21 
			
				p{...}{line-height:39px;} //26*1.5=39

标签：

line-height

line-height 百分比与数值的区别

line-height 百分比与数值的区别

猜您喜欢

热门推荐