資訊專欄INFORMATION COLUMN
摘要：從一個內(nèi)聯(lián)元素布局引發(fā)對的探討一前言這個屬性對于各位前端的小伙伴來說并不陌生。對于塊級元素，它指定元素行盒的最小高度。對于非替代的元素，它用于計算行盒的高度。如存在屬性的六總結(jié)以上就是本人對行內(nèi)布局以及的一些思考總結(jié)。
從一個內(nèi)聯(lián)元素布局引發(fā)對line-height的探討 一、前言
line-height這個屬性對于各位前端的小伙伴來說并不陌生。在之前寫頁面的時候碰到過一個該屬性相關(guān)的問題，在查閱資料后決定跟大家分享一下我所理解的line-height。所講述的內(nèi)容不一定都是正確的，僅供參考。
二、line-height 定義 文檔規(guī)范line-height CSS 屬性用于設(shè)置多行元素的空間量，如多行文本的間距。對于塊級元素，它指定元素行盒（line boxes）的最小高度。對于非替代的 inline 元素，它用于計算行盒（line box）的高度。
屬性值| 屬性 | 描述 |
|---|---|
| normal | 默認值。合理的行間距。根據(jù)瀏覽器和字體"font-family"不同而不同。 |
| number | 設(shè)置數(shù)值，此數(shù)值會與當(dāng)前的字體尺寸相乘來設(shè)置行間距。 |
| length | 設(shè)置固定的行間距。 |
| % | 基于當(dāng)前字體尺寸的百分比間距。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承l(wèi)ine-height屬性的值 |
相信大家都有寫過這樣一個布局 一個大標題，然后接著一個小標題，需要垂直居中
.title {
font-size: 20px;
line-height: 20px;
}
.sub-title {
font-size: 14px;
line-height: 20px;
}
大標題
小標題
兩個相鄰的內(nèi)聯(lián)元素，字體一大一小。暢想的結(jié)果是兩個 span 的高度都是20px, div的高度也是20px，多么完美，但結(jié)果往往不近人意....
div的高度為22.4 .title 的高度為26.4 .sub-title 的高度為19
那么問題來了：為什么沒有一個元素的高度為20?
然而 規(guī)范 告訴我們，對于非替代的 inline 元素，它用于計算行盒（line box）的高度。
這里引出了兩個概念：替代元素、行盒（line-box）
六、總結(jié)替代元素
替代元素是指內(nèi)容可以替換的元素，實際上就是content box可以被替換的元素。如存在src=""屬性的
以上就是本人對行內(nèi)布局以及l(fā)ine-height的一些思考總結(jié)。
另外也可以使用flex布局一把梭，就沒這么多事了~。
參考
CSS深入理解vertical-align和line-height的基友關(guān)系
CSS行高line-height的一些深入理解及應(yīng)用
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/116129.html
摘要：從一個內(nèi)聯(lián)元素布局引發(fā)對的探討一前言這個屬性對于各位前端的小伙伴來說并不陌生。對于塊級元素，它指定元素行盒的最小高度。對于非替代的元素，它用于計算行盒的高度。如存在屬性的六總結(jié)以上就是本人對行內(nèi)布局以及的一些思考總結(jié)。 從一個內(nèi)聯(lián)元素布局引發(fā)對line-height的探討 一、前言 line-height這個屬性對于各位前端的小伙伴來說并不陌生。在之前寫頁面的時候碰到過一個該屬性相關(guān)的...
摘要：默認情況下，行內(nèi)元素不會以新行開始，而塊級元素會新起一行。常見的內(nèi)聯(lián)元素有分類替換元素在中，可替換元素的展現(xiàn)效果不是由來控制的。這些元素是一種外部對象，它們外觀的渲染，是獨立于的。 前言 在寫作本文章前原本打算只是復(fù)習(xí)一下 line-height 和 vertical-height 這兩個屬性而已, 結(jié)果發(fā)現(xiàn)掉進了一個大坑網(wǎng)上有很多篇文章看的我云里霧里的, 最后決定還是從頭來一遍吧, ...
摘要：默認情況下，行內(nèi)元素不會以新行開始，而塊級元素會新起一行。常見的內(nèi)聯(lián)元素有分類替換元素在中，可替換元素的展現(xiàn)效果不是由來控制的。這些元素是一種外部對象，它們外觀的渲染，是獨立于的。 前言 在寫作本文章前原本打算只是復(fù)習(xí)一下 line-height 和 vertical-height 這兩個屬性而已, 結(jié)果發(fā)現(xiàn)掉進了一個大坑網(wǎng)上有很多篇文章看的我云里霧里的, 最后決定還是從頭來一遍吧, ...
閱讀 3461·2023-04-26 02:48
閱讀 1465·2021-10-11 10:57
閱讀 2489·2021-09-23 11:35
閱讀 1195·2021-09-06 15:02
閱讀 3293·2019-08-30 15:54
閱讀 1612·2019-08-30 15:44
閱讀 879·2019-08-30 15:44
閱讀 987·2019-08-30 12:52
