CSS line-height的理解

真正的能理解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干的烂叔，這些手下就是文字啦谨胞，圖片啊，之類的inline屬性的標簽啦蒜鸡。line boxes只是個考察匯報人員胯努，考察它的手下誰的實際line-height值最高，誰最高逢防，它就要誰的值叶沛，然后向上匯報，形成高度忘朝。例如灰署，取手下line-height最高的值。則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呢晌畅？

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者