【13】winter重學前端 筆記 - 瀏覽器：一個瀏覽器是如何工做的？（階段四）排版layout

基本概念

• 排版：把瀏覽器肯定元素位置的過程
• 分類：正常流中的文字排版、正常流中的盒、絕對定位元素、浮動元素排版、flex 排版、表格相關排版、grid 排版
• 正常流排版：它包含了順次排布和折行等規則，跟咱們平時書寫文字的方式一致
• 文字排版：它規定了行模型和文字在行模型中的排布，行模型規定了行頂、行底、文字區域、基線等對齊方式。(英語本：四條線就是一個簡單的行模型）
• 盒模型：素被定義爲佔據長方形的區域，還容許邊框、邊距和留白(瀏覽器爲支持元素和文字的混排)
• 絕對定位元素：把自身從正常流抽出，直接由 top 和 left 等屬性肯定自身的位置，不參加排版計算，也不影響其它元素。絕對定位元素由position 屬性控制
• 浮動元素：本身在正常流的位置向左或者向右移動到邊界，而且佔據一塊排版空空間。浮動元素由 float 屬性控制。
• 這些排版方式由外部元素的 display 屬性來控制（注意：display 同時還控制元素在正常流中屬於 inline等級仍是 block 等級）

正常流

詳細正常流排版的行爲查閱24講

正常流是惟一一個文字和盒混排的排版方式

正常流文字排版

• 正常書寫文字：是從左到右依次書寫，每個字跟上一個字都不重疊，文字之間有必定間距，當寫滿一行時，咱們換到下一行去繼續寫，書寫中文時，文字的上、下、中軸線都對齊，書寫英文時，不一樣字母的高度不一樣，可是有一條基線對齊(瀏覽器相似)

• 瀏覽器特色：還支持改變排版方向

  • 文字依次書寫的延伸方向稱爲主軸
  • 換行延伸的方向，跟主軸垂直交叉，稱爲交叉軸

• 開源字體解析庫 freetype

  • advance：每個文字排布後在主軸上的前進距離，它跟文字的寬 / 高不相等
  • 文字排版還受到一些 CSS 屬性影響：line-height(行高)、letter-spacing(字母間距中文字和英文字母)、word-spacing(單詞間距：英文單詞，中文無做用)
  • 橫向：

• 縱向：

正常流中的盒元素排版

• display 不爲 inline 的元素或者僞元素，會以盒的形式跟文字一塊兒排版
• display 屬性均可以分紅兩部分：內部的排版和是否 inline，帶有 inline- 前綴的盒，被稱做行內級盒。
• 盒模型在主軸方向佔據的空間是由對應方向的這幾個屬性之和決定的(margin、border、padding、width/height 等屬性）

• 瀏覽器排版

  • inline行的排版：先行內佈局，再肯定行的位置，根據行的位置計算出行內盒和文字的排版位置
  • block塊級盒: 單獨佔據一整行，計算出交叉軸方向的高度便可

絕對定位元素

• position 屬性爲 absolute 的元素
• 其父級的 position 非 static 元素的包含塊來肯定位置

浮動元素排版

• 瀏覽器對 float 的處理：先排入正常流，再移動到排版寬度的最左 / 最右（這裏其實是主軸的最前和最後）
• 移動以後，float 元素佔據了一塊排版的空間，所以，在數行以內，主軸方向的排版距離發生了變化，直到交叉軸方向的尺寸超過了浮動元素的交叉軸尺寸範圍，主軸排版尺寸纔會恢復
• float 元素排布完成後，float 元素所在的行須要從新肯定位置

flex排版和其餘排版

• CSS 的每一種排版都有一個很複雜的規定，都有對應的標準
• flex 排版，支持了 flex 屬性，flex 屬性將每一行排版後的剩餘空間平均分配給主軸方向的 width/height 屬性

不一樣排版混用

• 關係複雜，winter不過多贅述
• 遵照能夠內外嵌套、可是不混用的規則便可

總結

這節我能夠理解爲正常流的排版方式，裏面的文字元素的排版，盒元素的排版，以及定義爲絕對元素，浮動元素的排版。