重學前端學習筆記（十四）--瀏覽器工作解析（四）
筆記說明
重學前端是程劭非（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的一些東西了。。。