美文网首页
8.css行高三种设置和垂直居中及简写方式

8.css行高三种设置和垂直居中及简写方式

作者: 欣博客 | 来源:发表于2020-02-17 23:01 被阅读0次

    在CSS并没有为我们提供一个直接设置行间距的方式
    我们只能通过设置行高来间接的设置行间距,行高越大行间距越大

    使用line-height来设置行高

    行高类似于我们上学单线本,单线本是一行一行,线与线之间的距离就是行高,
    网页中的文字实际上也是写在一个看不见的线中的,而文字会默认在行高中垂直居中显示

    行间距 = 行高 - 字体大小

    通过设置line-height可以间接的设置行高,
    可以接收的值:

    1. 直接就设置一个大小
    2. 可以指定一个百分数,则会相对于字体去计算行高
    3. 可以直接传一个数值,则行高会设置字体大小相应的倍数

    1.直接设置一个大小

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .p1{
                    font-size: 20px;
                    line-height: 43px;
                }
            </style>
        </head>
    
        <body>
            <p class="p1">
                 枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。
            </p>
        </body>
    </html>
    
    
    预览效果:
    image.png

    2.设置百分比

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .p1{
                    font-size: 20px;
                    line-height: 200%;
                    /*line-height: 2;*/
                }
            </style>
        </head>
    
        <body>
            <p class="p1">
                 枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。
            </p>
        </body>
    </html>
    
    

    预览效果:

    image.png

    3.设置数值

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .p1{
                    font-size: 20px;
                    /*line-height: 200%;*/
                    line-height: 2;
                }
            </style>
        </head>
    
        <body>
            <p class="p1">
                 枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。
            </p>
        </body>
    </html>
    
    

    预览效果:

    image.png

    使用行高来设置垂直居中

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

    预览效果:


    image.png

    可以通过font简写,来设置一个行高

    在字体大小后可以添加/行高,来指定行高,该值是可选的,如果不指定则会使用默认值

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>简写行高设置</title>
            <style type="text/css">
                .p2{
                    /*
                     * 在font中也可以指定行高
                     *  在字体大小后可以添加/行高,来指定行高,该值是可选的,如果不指定则会使用默认值
                     */
                    font: 12px/40px "微软雅黑";
                }
    
            </style>
        </head>
        <body>
            <p class="p2">
                猩红的栀子开花时,枣树又要做小粉红花的梦,青葱地弯成弧形了……我又听到夜半的笑声;我赶紧砍断我的心绪,看那老在白纸罩上的小青虫,头大尾小,向日葵子似的,只有半粒小麦那么大,遍身的颜色苍翠得可爱,可怜。 我打一个呵欠,点起一支纸烟,喷出烟来,对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
            </p>
        </body>
    </html>
    
    
    预览效果图:
    image.png

    相关文章

      网友评论

          本文标题:8.css行高三种设置和垂直居中及简写方式

          本文链接:https://www.haomeiwen.com/subject/pmqwfhtx.html