• 技术文章 >web前端 >前端问答

    css文本行高是哪个属性

    青灯夜游青灯夜游2022-08-31 19:04:27原创938

    css文本行高属性是“line-height”。该属性可以设置行间的距离(行高),语法“line-height:值;”,属性值不可为负数。line-height属性会影响行框的布局;在应用到一个块级元素时,line-height属性定义了该元素中基线之间的最小距离而不是最大距离。

    大前端成长进阶课程:进入学习

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    行高是包括内容区与以内容区为基础对称拓展的空白区域。一般情况下,也可以认为是相邻文本行基线间的垂直距离。

    基线、底线、顶线

    行高

    行距、行高

    1.gif

    css文本行高属性

    在CSS中我们可以使用line-height属性来设置行高。line-height属性可用于设置行间的距离(行高),不允许使用负值。

    line-height属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。

    line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

    line-height属性可以设置的属性值:

    描述
    normal默认。设置合理的行间距。
    number设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
    length设置固定的行间距。
    %基于当前字体尺寸的百分比行间距。
    inherit规定应该从父元素继承 line-height 属性的值。

    示例:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p
    {
    border:1px solid red;
    }
    p.small
    {
    line-height: 0.5
    }
    p.big
    {
    line-height: 2
    }
    </style>
    </head>
    <body>
    
    <p>
    这是一个标准行高的段落。
    浏览器的默认行高为“1”。
    这是一个标准行高的段落。
    这是一个标准行高的段落。
    </p>
    
    <p class="small">
    这是一个更小行高的段落。
    这是一个更小行高的段落。
    这是一个更小行高的段落。
    这是一个更小行高的段落。
    </p>
    
    <p class="big">
    这是一个更大行高的段落。
    这是一个更大行高的段落。
    这是一个更大行高的段落。
    这是一个更大行高的段落。
    </p>
    
    </body>
    </html>

    效果图:

    1.png

    元素对行高影响

    <div style="border:dashed 1px #0e0;margin-bottom:30px;">
                    <span style="font-size:14px;background-color:#999;">This is a test</span>
    </div>
    <div style="border:dashed 1px #0e0;">
                    <span style="font-size:14px;padding:20px;background-color:#999;">This is a test</span>
     </div>

    行高的继承

    行高是可继承的,但并不是简单的copy父元素行高,继承的是计算得来的值。

    <div style="border:dashed 1px #0e0;line-height:150%;font-size:10px;">
                    <p style="font-size:30px;">
                        1232<br/>
                        123
                    </p>
    </div>

    按一般理解既然line-height可以继承,那么p元素的行高也是150%了,可是事实是这样的

    非但没有变成150%,反而连100%都没有,重叠了!这就是继承计算的结果,如果父元素的line-height有单位(px、%),那么继承的值则是换算后的一个具体的px级别的值;上例p得到的是10px*150%=15px的行高,而P的字体大小为30px,所以发生了重叠。

    而如果属性值没有单位,则浏览器会直接继承这个“因子(数值)”,而非计算后的具体值,此时它的line-height会根据本身的font-size值重新计算得到新的line-height 值。

    <div style="border:dashed 1px #0e0;line-height:1.5;font-size:10px;">
                    <p style="font-size:30px;">
                        1232<br/>
                        123
                    </p>
    </div>

    所以在使用line-height时,除非你刻意否则尽量使用倍数设值

    (学习视频分享:web前端入门

    以上就是css文本行高是哪个属性的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:css
    上一篇:css怎么将内联元素转为块级元素 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• css怎么实现奇数偶数不一样的样式• css如何排除第一个子元素• 初始化css又叫什么• css字体样式有几种• css怎么实现文字不同颜色
    1/1

    PHP中文网