您的位置：首页 > 其它

line-height

2016-04-20 10:48 288 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>line-height</title>
<link rel="stylesheet" href="demo.css"/>
<style type="text/css">
p{margin:10px;background:#ddd;}
p+p{margin-left:40px;}
body{font-size:30px;}
<!-------------------------------------------------->
.m-demo{line-height:40px;} <!--line-height被定义为一个长度值(px,em等) body{line-height:40px;}-->
.m-demo p{background:#ddd;}
.m-demo .p1{line-height:3em;}
.m-demo .p2{line-height:300%;}<!--line-height可以用一个百分比的值body{line-height:300%;}-->
.m-demo .p3{line-height:3;}<!--line-height可以被定义为纯数字， body{line-height:3}-->
<!--line-height还可以被定义为：body{line-height:normal;}  大约line-height：1.14左                     右。-->

<!-------------------------------------------------->
.m-demo2{line-height:300%;}  <!--line-height基于继承的body{font-size:30px}的大小，  -->
.m-demo2 p{background:#fbb;} <!--进行缩放，line-height计算为30px*300%=90px，       -->
.m-demo2 .p1{font-size:16px;}<!--这个值将会被层叠下去的元素继承，font-size会随着不同标签设置字形变化，而,  -->
<!--line-height不会随着font-size自由缩放-->
<!-------------------------------------------------->
.m-demo3{line-height:3;}  <!-- 纯数字更好，line-height可以基于font-size作相应的缩放-->
.m-demo3 p{background:#0dd;}
.m-demo3 .p1{font-size:16px;}<!--基于font-size，line-height做相应的缩放，这里line-height：16px*3=48px-->
</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:40px;</p>
</div>
</body>
</html>

疯狂深入研究line-height和linebox，请移步：

/content/3940852.html

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

标签：

相关文章推荐

新的分享

章节导航