行高 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /*css中没有直接设置行间距的方式
              通过设置行高进行设置行间距
              line-height设置行高
              
              行间距 = 行高 - 字体大小
              
            */
           .p1{
               
               /*
                 通过line-height可以间接设置行高
                    可以接受的值
                            接受一个大小
                            可以指定一个百分数，会相对于字体去计算行高
                            可以直接传一个数值，行高会设置字体大小相应的倍数
               */
               line-height: 40px;
               line-height: 1;
           }
           .box{
               width: 200px;
               height: 200px;
               background-color: #bfa;
               
               /*
                  
                  对于单行文本来说，可以将行高设置为和父元素的高度一致，
                  这样可以是单行文本在父元素中垂直居中
               */
               line-height:200px ;
           }
           .p2{
               line-height: 50px;
               /*
                 在font中也可以指定行高
                    在字体后可以添加/行高，来指定行高，该值是可选的，不指定则会使用默认值
                    
               */
               font: 30px/50px 微软雅黑;
           }
        </style>
    </head>
    <body>
        <p class="p2">
            我们那里没有姓长的；她生得黄胖而矮，“长”也不是形容词。又不是她的名字，记得她自己说过，她的名字是叫作什么姑娘的。什么姑娘，我现在已经忘却了，总之不是长姑娘；也终于不知道她姓什么。记得她也曾告诉过我这个名称的来历：先前的先前，我家有一个女工，身材生得很高大，这就是真阿长。后来她回去了，我那什么姑娘才来补她的缺，然而大家因为叫惯了，没有再改口，于是她从此也就成为长妈妈了。
            虽然背地里说人长短不是好事情，但倘使要我说句真心话，我可只得说：我实在不大佩服她。最讨厌的是常喜欢切切察察，向人们低声絮说些什么事，还竖起第二个手指，在空中上下摇动，或者点着对手或自己的鼻尖。我的家里一有些小风波，不知怎的我总疑心和这“切切察察”youxie 。又不许我走动，拔一株草，翻一块石头，就说我顽皮，要告诉我的母亲去了。一到夏天，睡觉时她又伸开两脚两手，在床中间摆成一个“大”字，挤得我没有余地翻身，久睡在一角的席子上，又已经烤得那么热。推她呢，不动；叫她呢，也不闻。
        </p>
        <div class="box">
            <a href="#">超链接</a>
        </div>
        
        <!-- 行间距 -->
        <p class="p1">
            我们那里没有姓长的；她生得黄胖而矮，“长”也不是形容词。又不是她的名字，记得她自己说过，她的名字是叫作什么姑娘的。什么姑娘，我现在已经忘却了，总之不是长姑娘；也终于不知道她姓什么。记得她也曾告诉过我这个名称的来历：先前的先前，我家有一个女工，身材生得很高大，这就是真阿长。后来她回去了，我那什么姑娘才来补她的缺，然而大家因为叫惯了，没有再改口，于是她从此也就成为长妈妈了。
            虽然背地里说人长短不是好事情，但倘使要我说句真心话，我可只得说：我实在不大佩服她。最讨厌的是常喜欢切切察察，向人们低声絮说些什么事，还竖起第二个手指，在空中上下摇动，或者点着对手或自己的鼻尖。我的家里一有些小风波，不知怎的我总疑心和这“切切察察”youxie 。又不许我走动，拔一株草，翻一块石头，就说我顽皮，要告诉我的母亲去了。一到夏天，睡觉时她又伸开两脚两手，在床中间摆成一个“大”字，挤得我没有余地翻身，久睡在一角的席子上，又已经烤得那么热。推她呢，不动；叫她呢，也不闻。
        </p>
        
    </body>
</html>

 

设置行间距可以通过line-height设置行高进行设置行间距

行间距 = 行高 - 字体大小

line- height 直接接收一个大小   也可指定一个百分数（会相当于字体去计算行高） 直接传一个数值（行高会设置字体大小相应倍数） 

对于单行文本来说，可将行高设置为何父元素的高度一致，这样可以在父元素中垂直居中

font也可以指定行高   在字体后可以添加/行高，来指定行高，值可选，不指定会使用默认值

.p2{
line-height: 50px;

font: 30px 微软雅黑;

这种情况就会导致添加行高后不显示

.p2{
line-height: 50px;

font: 30px/50px 微软雅黑;

.p2{

font: 30px 微软雅黑;

line-height: 50px;

解决方案

 

posted @ 2021-07-01 16:43  2237774566  阅读(121)  评论(0)    收藏  举报