CSS行框,你真的理解么?

  • 時間:2018-11-03 23:12 作者:LearnInPro 來源:LearnInPro 閱讀:118
  • 掃一掃,手機訪問
摘要:什么叫做css行框呢?我們先看下行框的概念:子元素的虛擬矩形區域,形成的每一行。這個概念有點籠統,我們結合下面這張圖來了解下。我們可以看到,當行內元素或者者行內塊級元素并排排列的時候,可能他們的字體大小,高度都是不一樣的。那么行框就是包裹他們的一個框。就是圖中Line box所指的區域。行框規定了這

什么叫做css行框呢?

我們先看下行框的概念:子元素的虛擬矩形區域,形成的每一行。

這個概念有點籠統,我們結合下面這張圖來了解下。

CSS行框,你真的理解么?

我們可以看到,

  • 當行內元素或者者行內塊級元素并排排列的時候,可能他們的字體大小,高度都是不一樣的。那么行框就是包裹他們的一個框。就是圖中Line box所指的區域。
  • 行框規定了這些元素排列時候的對齊方式。默認他們的對齊方式是根據baseline基準線對齊。就好像圖上的對齊方式一樣。
  • 在行框中,我們利用vertical-align來改變他們的對齊方式。他的值有很多,常用的有top,middle,bottom等,這個比較簡單就不多詳情了。

要特別注意的點有兩個

  1. 我們說過行內元素是不可設置高度的,那么他的高度是如何決定的呢? 任何一個行內元素,他的高度是由font-size和line-height共同決定的
  • 首先,文本的高度是跟line-height無關的。我們可以給span設置一個背景色,而后我們改變他的line-height會發現,無論line-height設置成多高,span的背景色的高度都不會改變,但是span整體的高度會隨line-height的增大而變高。所以說文本的高度是跟line-height無關的(注意這里說的是文本)。
  • 那么,文本的高度只跟font-size有關,但是注意,文本的高度永遠會大于font-size的值。就像下面這張圖,font-size的大小只是規定了text-top到text-bottom的距離,而文本高度是top到bottom的距離,而這之間的距離是多少,每個瀏覽器都不太一樣。總之是為了保護文本,不希望行與行之間產生重疊。( 假如你強行將line-height設置的特別小,希望產生重疊,在大部分現代瀏覽器中是無效的,也就是在大部分瀏覽器中line-height的值最小等于文本的高度,所以不建議將line-height設的比文本高度小。 )
  • 所以,行內元素的高度(不折行的情況下)當沒設置line-height或者者line-height小于等于文本的內容高度時,行內元素高度取決于font-size,等于文本的高度。 當line-height大于文本高度時,則由line-height決定。
CSS行框,你真的理解么?

2. 當行內元素和行內塊級元素在一個行框內排列的時候,比方:





Document




LearnInPro


双色球号码300期遗传走势图

就會變成下圖這樣

CSS行框,你真的理解么?

我們看這個紅色的行內塊級元素下方的空隙,就是因為行框默認的對齊方式導致的。因為行框默認是baseline對齊,行內塊級元素也要遵守所以這個紅框的底部會騎在baseline線上。導致baseline到bottom的區域空著,產生空隙。那么處理方案也很簡單,只需改變行框的對齊方式,在這兩個元素上都加上vertical-align: top || middle || bottom 等即可以把這個空隙消除掉。

這個就是CSS中行框的概念,在很多垂直方向對齊的問題中,css行框發揮著重要的作用,很多情況中,可能開發者只知道如何使其對齊或者者某些情況下發現對齊會出現問題。深入理解css行框的概念即可以幫助你理解其原理或者者處理問題,知其然也知其所以然。

編寫文章不易,假如你覺得我們的文章對你有幫助,希望你能關注、轉發我們的文章,深表感謝。

同時我們也會持續帶來更多更好的前臺學習教程與文章,歡迎關注我們。

  • 全部評論(0)
最新發布的資訊信息
【系統環境|數據庫】零基礎如何快速學好大數據?(2019-06-29 12:27)
【系統環境|Linux】零基礎如何學好大數據?必備需要學習知識(2019-06-18 11:54)
【系統環境|】Hadoop環境中管理大數據存儲八大技巧(2019-06-15 11:01)
【系統環境|服務器應用】現在國內IT行業是不是程序員過多了?(2019-06-11 06:34)
【系統環境|服務器應用】新貴 Flutter(2) 自己設置 Widget(2019-06-11 06:34)
【系統環境|服務器應用】Android完整知識體系路線(菜鳥-資深-大牛必進之路)(2019-06-11 06:34)
【系統環境|服務器應用】Java程序員小伙經歷三個月備戰,終獲阿里offer(2019-06-11 06:34)
【系統環境|服務器應用】每日一問:談談對 MeasureSpec 的了解(2019-06-11 06:34)
【系統環境|服務器應用】【科普】晶體管-1(2019-06-11 06:34)
【系統環境|服務器應用】一個很多人都會答錯的java基礎題(2019-06-11 06:33)
手機二維碼手機訪問領取大禮包
返回頂部