您的位置：首页 > Web前端 > CSS

CSS权威指南-line-height缩放因子

2016-06-25 19:25 281 查看

当一个块级元素从另一个元素继承line-height时，line-height值从父元素继承时，要从父元素计算，而不是在子元素上计算。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
font-size: 10px;
}
div{
line-height: 1em;
}
p{
width:200px;
font-size:18px;
}
</style>
</head>
<body>
<div>
<p>王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷
王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷
王丹婷王丹婷
</p>
</div>
</body>
</html>

解决办法，指定一个数由它设置缩放因子：指定一个数时，缩放因子将是继承值（1）而不是计算值。这个数会应用到该元素及其所有子元素，所有各元素都根据其自己的font-size计算line-height;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
font-size: 10px;
}
div{
line-height: 1;
}
p{
width:200px;
font-size:18px;
}
</style>
</head>
<body>
<div>
<p>王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷
王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷
王丹婷王丹婷
</p>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航