[TOC] # 簡介 * 排版：把瀏覽器確定元素位置的過程 * 分類：正常流中的文字排版、正常流中的盒、絕對定位元素、浮動元素排版、flex 排版、表格相關排版、grid 排版 * 正常流排版：它包含了順次排布和折行等規則，跟我們平時書寫文字的方式一致 * 文字排版：它規定了行模型和文字在行模型中的排布，行模型規定了行頂、行底、文字區域、基線等對齊方式。(英語本：四條線就是一個簡單的行模型） * 盒模型：素被定義為占據長方形的區域，還允許邊框、邊距和留白(瀏覽器為支持元素和文字的混排) * 絕對定位元素：把自身從正常流抽出，直接由 top 和 left 等屬性確定自身的位置，不參加排版計算，也不影響其它元素。絕對定位元素由position 屬性控制 * 浮動元素：自己在正常流的位置向左或者向右移動到邊界，并且占據一塊排版空空間。浮動元素由 float 屬性控制。 * 這些排版方式由外部元素的 display 屬性來控制（注意：display 同時還控制元素在正常流中屬于 inline等級還是 block 等級） <br> <br> # 布局 ## 正常流 詳細正常流排版的行為查閱24講 正常流是唯一一個文字和盒混排的排版方式 <br> ### 正常流文字排版 * 正常書寫文字：是從左到右依次書寫，每一個字跟上一個字都不重疊，文字之間有一定間距，當寫滿一行時，我們換到下一行去繼續寫，書寫中文時，文字的上、下、中軸線都對齊，書寫英文時，不同字母的高度不同，但是有一條基線對齊(瀏覽器類似) * 瀏覽器特點：還支持改變排版方向 * 文字依次書寫的延伸方向稱為主軸 * 換行延伸的方向，跟主軸垂直交叉，稱為交叉軸 * 開源字體解析庫 freetype * advance：每一個文字排布后在主軸上的前進距離，它跟文字的寬 / 高不相等 * 文字排版還受到一些 CSS 屬性影響：line-height(行高)、letter-spacing(字母間距中文字和英文字母)、word-spacing(單詞間距：英文單詞，中文無作用) <br> ### 正常流中的盒元素排版 * display 不為 inline 的元素或者偽元素，會以盒的形式跟文字一起排版 * display 屬性都可以分成兩部分：內部的排版和是否 inline，帶有 inline- 前綴的盒，被稱作行內級盒。 * 盒模型在主軸方向占據的空間是由對應方向的這幾個屬性之和決定的(margin、border、padding、width/height 等屬性） * 瀏覽器排版 * inline行的排版：先行內布局，再確定行的位置，根據行的位置計算出行內盒和文字的排版位置 * block塊級盒: 單獨占據一整行，計算出交叉軸方向的高度即可 <br> ## 絕對定位元素 * position 屬性為 absolute 的元素 * 其父級的 position 非 static 元素的包含塊來確定位置 <br> ## 浮動元素排版 * 瀏覽器對 float 的處理：先排入正常流，再移動到排版寬度的最左 / 最右（這里實際上是主軸的最前和最后） * 移動之后，float 元素占據了一塊排版的空間，因此，在數行之內，主軸方向的排版距離發生了變化，直到交叉軸方向的尺寸超過了浮動元素的交叉軸尺寸范圍，主軸排版尺寸才會恢復 * float 元素排布完成后，float 元素所在的行需要重新確定位置 <br> ## flex排版和其他排版 * CSS 的每一種排版都有一個很復雜的規定，都有對應的標準 * flex 排版，支持了 flex 屬性，flex 屬性將每一行排版后的剩余空間平均分配給主軸方向的 width/height 屬性 <br> ## 不同排版混用 * 遵守可以內外嵌套、但是不混用的規則即可 <br> <br> # Dirty bit 系統 為了不因為每個小變化都全部重新布局，瀏覽器使用一個dirty bit 系統，一個渲染對象發生了變化或是被添加了，就標記它及他的children 為dirty - 需要layout ，存在兩個標識－dirty 及 children are dirty， children are dirty說明即使這個渲染對象可能沒問題，但它至少有一個child需要layout。 <br> <br> # 全局和增量layout 當layout 在整顆渲染樹觸發時，稱為全局layout ，這可能在下面這些情況下發生 1\. 一個全局的樣式改變影響所有的渲染對象，比如字號的改變 2\. 窗口resize? <br> layout 也可以是增量的，這樣只有標志為dirty 的渲染對象會重新布局（也將導致一些額外的布局）。增量layout會在渲染對象dirty 時異步觸發，例如，當網絡接收到新的內容并添加到dom樹后，新的渲染對象會添加到渲染樹中。 # 異步和同步layout 　　增量layout的過程是異步的，Firefox為增量layout生成了reflow隊列，以及一個調度執行這些批處理命令。WebKit也有一個計時器用來執行增量layout－遍歷樹，為dirty狀態的渲染對象重新布局。 <br> 　　另外，當腳本請求樣式信息時，例如“offsetHeight”，會同步的觸發增量布局。 <br> 　　全局的layout一般都是同步觸發。 <br> 　　有些時候，layout會被作為一個初始layout之后的回調，比如滑動條的滑動。 <br> <br> # 優化 　　當一個layout因為resize或是渲染位置改變（并不是大小改變）而觸發時，渲染對象的大小將會從緩存中讀取，而不會重新計算。 <br> 　　一般情況下，如果只有子樹發生改變，則layout并不從根開始。這種情況發生在，變化發生在元素自身并且不影響它周圍元素，例如，將文本插入文本域（否則，每次擊鍵都將觸發從根開始的重排）。 <br> <br> # layout過程 layout一般有下面這幾個部分： 1. 父渲染對象決定它自己的寬度 2. 父渲染對象讀取chilidren，并： 1. 放置child渲染對象（設置它的x和y） 2. 在需要時（它們當前為dirty或是處于全局layout或者其他原因）調用child渲染對象的layout，這將計算child的高度 3. parent渲染對象使用child渲染對象的累積高度，以及margin和padding的高度來設置自己的高度－這將被parent渲染對象的parent使用 4. 將dirty標識設置為false <br> Firefox使用一個“state”對象（nsHTMLReflowState）做為參數去布局（firefox稱為reflow），state包含parent的寬度及其他內容。 <br> Firefox布局的輸出是一個“metrics”對象（nsHTMLReflowMetrics）。它包括渲染對象計算出的高度。 <br> <br> # 參考資料 重學前端