美文网首页
CSS line-height的理解

CSS line-height的理解

作者: HoooChan | 来源:发表于2020-07-08 09:05 被阅读0次

    真正的能理解CSS中的line-height,height与line-height

    line-height是基线到基线的距离,当我们不设置行高的时候,可以看到line-height默认值是normal,看下面的例子,line-height等于内容的高度:

    .title {
        background-color: orange;
        font-size: 80px;
        word-break: break-all;    
    }
    

    为啥内容的高度不等于font-size呢?这个其实是由浏览器的实现决定的。

    设置line-height为150px:

    .title {
        background-color: orange;
        font-size: 80px;
        line-height: 150px;
        word-break: break-all;
        border: solid darkgreen 5px;
    }
    

    加上padding,会影响内容高度但不会影响布局:

    .title {
        background-color: orange;
        font-size: 80px;
        line-height: 150px;
        word-break: break-all;
        border: solid darkgreen 5px;
        padding: 5px;
    }
    

    重新认识font-size、line-height和行高

    Inline elements and line-height

    div的高度由内部的line boxes中的inline boxes的line-height决定的:

    到底这个line-height行高怎么就产生了高度呢?在inline box模型中,有个line boxes,这玩意是看不见的,这个玩意的工作就是包裹每行文字。一行文字一个line boxes。例如“艾佛森退役”这5个字,如果它们在一行显示,你艾佛森再牛逼,对不起,只有一个line boxes罩着你;但“春哥纯爷们”这5个字,要是竖着写,一行一个,那真是够爷们,一个字罩着一个line boxes,于是总计五个line boxes。line boxes什么特性也没有,就高度。所以一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的。

    其实line boxes不是直接的生产者,属于中层干部,真正的活儿都是它的手下 – inline boxes干的,这些手下就是文字啦,图片啊,<span>之类的inline属性的标签啦。line boxes只是个考察汇报人员,考察它的手下谁的实际line-height值最高,谁最高,它就要谁的值,然后向上汇报,形成高度。例如,<span style="line-height:20px;">取手下line-height<span style="line-height:40px;">最高</span>的值</span>。则line boxes的高度就是40像素了。
    css行高line-height的一些深入理解及应用

    div内部的line box由一个无法看到的strut支杆开头,这个strut的高度就是block的line-height:

    Block layouts, like div is by default, are made up of a vertical stack of line boxes, which never have space between them and never overlap. Each line box starts with a strut which is an imaginary inline box the height of the line-height specified for the block. The line box then continues with the inline boxes of the markup, according to their line heights.
    Why is the span's line-height is useless?

    浏览器认为每个 line-box 的起始位置都有一个宽度为 0 的字符(CSS 文档将其称为 strut),并将其纳入 line-box 的高度的计算中。
    深入理解 CSS:字体度量、line-height 和 vertical-align

    <html>
    
    <head>
        <style>
            .top {
                background-color: green;
                font-weight: bold;
            }
    
            .title-wrapper {
                line-height: 200px;
                background-color: orange;
            }
    
            .title {
                font-size: 80px;
                line-height: 50px;
                word-break: break-all;
            }
        </style>
    </head>
    
    <body>
        <div class="top">Top</div>
        <div class="title-wrapper">
            <span class="title">abczwf</span>
        </div>
    </body>
    
    </html>
    

    为啥这个不会被撑开成200px呢?

    相关文章

      网友评论

          本文标题:CSS line-height的理解

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