CSS行框,你真的理解么?

  • 時間:2018-11-03 23:12 作者:LearnInPro 來源:LearnInPro 閱讀:165
  • 掃一掃,手機訪問
摘要:什么叫做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)
最新發布的資訊信息
【系統環境|服務器應用】前臺開發入門到實戰:HTML5語義化元素你真的用的正確嗎?(2019-08-22 04:16)
【系統環境|服務器應用】Vue仿微信app頁面跳轉動畫(2019-08-22 04:16)
【系統環境|服務器應用】webstorm使用快捷鍵快速修正單個文件的style(2019-08-22 04:16)
【系統環境|服務器應用】程序員從學生到阿里經歷的5次蛻變:海闊憑魚躍,天高任鳥飛(2019-08-22 04:16)
【系統環境|服務器應用】var、let、const的區別(2019-08-22 04:16)
【系統環境|服務器應用】mini-ui加載框Indicator 被遮擋問題(2019-08-22 04:15)
【系統環境|服務器應用】【對講機的那點事】玩對講機,對于對講機的亞音你理解嗎?(2019-08-22 04:15)
【系統環境|服務器應用】前臺中高級面試,內功心法(上)(2019-08-22 04:15)
【系統環境|服務器應用】17、改進輪播圖之功能封裝(2019-08-22 04:15)
【系統環境|服務器應用】第10題- 你不知道的delete操作符(2019-08-22 04:15)
手機二維碼手機訪問領取大禮包
返回頂部