line-height

来源：互联网发布：C语言exit(-1) 编辑：程序博客网时间：2024/05/17 23:36

<!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，请移步：
http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html

0 0