重學前端學習筆記(十四)--瀏覽器工作解析(四)
筆記說明
重學前端是程劭非(winter)【前手機淘寶前端負責人】在極客時間開的一個專欄, 每天10分鐘,重構你的前端知識體系 ,筆者主要整理學習過程的一些要點筆記以及感悟,完整的可以加入winter的專欄學習【原文有winter的語音】,如有侵權請聯絡我,郵箱:[email protected]。
一、概括
本文主要聊聊瀏覽器是怎樣確定每一個元素的位置的
二、基本概念
2.1、排版
瀏覽器把排版的內容(文字、圖片、圖形、表格等等)確定它們位置的過程,叫作 排版
。瀏覽器最基本的排版方案是 正常流排版
。
2.2、盒模型
瀏覽器又可以支援元素和文字的混排(元素被定義為佔據長方形的區域),還允許邊框、邊距和留白,這個就是所謂的 盒模型
。
2.2.1、絕對定位元素
絕對定位元素把自身從正常流抽出,直接由 top
和 left
等屬性確定自身的位置,不參加排版計算,也不影響其它元素。完全跟正常流無關的一種獨立排版模式。
2.2.2、浮動元素
浮動元素則是使得自己在正常流的位置向左或者向右移動到邊界,並且佔據一塊排版空間。 float
元素非常特別,瀏覽器對 float
的處理是先排入正常流,再移動到排版寬度的最左 / 最右(主軸的最前和最後)。
三、正常流文字排版
3.1、字型解析庫(freetype)
來自 freetype
的兩張圖片關於獲取某個特定的文字相關資訊:
縱向版本:
advance
:每一個文字排布後在主軸上的前進距離。
3.2、css屬性影響
除了字型提供的字形本身包含的資訊,文字排版還受到一些 CSS
屬性影響,如 line-height、letter-spacing、word-spacing
等。 display
值為 inline
的元素中的文字排版時會被直接排入文字流中, inline
元素主軸方向的 margin
屬性和 border
屬性也會被計算進排版前進距離當中。
即使沒有元素包裹,混合書寫方向的文字也可以形成一個盒結構,在排版時,遇到這樣的 雙向文字盒
,會先排完盒內再排盒外。
四、正常流中的盒
- 多數
display
屬性都可以分成兩部分:內部的排版和是否inline
,帶有inline-
字首的盒,被稱作行內級盒
。 -
vertical-align
屬性決定了盒在交叉軸方向的位置,也會影響實際行高。 - 瀏覽器對行的排版,一般是先行內佈局,再確定行的位置,根據行的位置計算出行內盒和文字的排版位置。
- 塊級盒比較簡單,它總是單獨佔據一整行,計算出交叉軸方向的高度即可。
五、其他排版
比如: flex
排版,支援了 flex
屬性, flex
屬性將每一行排版後的剩餘空間平均分配給主軸方向的 width/height
屬性。
瀏覽器支援的每一種排版方式,都是按照對應的標準來實現的。
個人總結
大漠老師在這篇文章下留言說:“文件流和排版是最難的部分!”
看來下次要看看flex的一些東西了。。。