行高 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
    /*
    设置行高line-height
    可以接受值：
    1.直接接受一个大小px值
    2.可以指定一个百分数，相对于字体去计算行高
    3.可以直接传一个数值，则行高会设置字体大小相应的倍数
    行间距=行高-字体大小
    
    1.对于单行文本来说，可以将行高设置为和父元素的高度一致，这样可以是单行文本在父元素中垂直居中
    2.在font中也可以指定元素 字体大小/行高，该值是可选的，如果不指定则会使用默认值
    */
          .p1{
              font-size: 20px;
              line-height: 40px;
          }
          .box{
              width: 200px;
              height: 200px;
              background-color: #bfa;
              line-height: 200px;
          }
          .p2{
              font: 30px/30px;
          }
       </style>
    </head>
    <body>
        <div>hello你好</div>
        <p class="p1"></p>
        <span class="p2">hi我是一段文字</span>
        <span class="p3">hi我是一段文字</span>
        <span style="font-family:serif;">我是一段文字，ABCa</span>
        <div class="box">我是一段文字</div>
    </body>
</html>

 

效果：

 
hello你好

 

hi我是一段文字 hi我是一段文字 我是一段文字，ABCa

我是一段文字
posted @ 2019-07-12 11:04  zuiaimiusi  阅读(278)  评论(0)  编辑  收藏  举报