重學前端學習筆記（十四）--瀏覽器工作解析（四）

馬忠志發布于2019-08-26 13:46 / 1054人閱讀

摘要：瀏覽器最基本的排版方案是正常流排版。元素非常特別，瀏覽器對的處理是先排入正常流，再移動到排版寬度的最左最右主軸的最前和最后。瀏覽器支持的每一種排版方式，都是按照對應的標準來實現的。

筆記說明

重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯系我，郵箱：kaimo313@foxmail.com。

一、概括

本文主要聊聊瀏覽器是怎樣確定每一個元素的位置的

二、基本概念 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的一些東西了。。。

云服務器 GPU云服務器前端工作學習筆記學習筆記一基礎學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109483.html

重學前端學習筆記（十四）--瀏覽器工作解析（四）

摘要：瀏覽器最基本的排版方案是正常流排版。元素非常特別，瀏覽器對的處理是先排入正常流，再移動到排版寬度的最左最右主軸的最前和最后。瀏覽器支持的每一種排版方式，都是按照對應的標準來實現的。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習...

masturbator 2019-08-02 16:17 評論0 收藏0
重學前端學習筆記（十四）--瀏覽器工作解析（四）

摘要：瀏覽器最基本的排版方案是正常流排版。元素非常特別，瀏覽器對的處理是先排入正常流，再移動到排版寬度的最左最右主軸的最前和最后。瀏覽器支持的每一種排版方式，都是按照對應的標準來實現的。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習...

dingda 2019-08-30 10:52 評論0 收藏0
重學前端學習筆記（二十四）--HTML里的鏈接元素

摘要：二標簽超鏈接型標簽超鏈接型標簽是一種被動型鏈接。四標簽與標簽非常相似，不同的是，它不是文本型的鏈接，而是區域型的鏈接。是整個規則中唯一支持非矩形熱區的標簽。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語...

April 2019-08-26 13:56 評論0 收藏0
重學前端學習筆記（二十四）--HTML里的鏈接元素

摘要：二標簽超鏈接型標簽超鏈接型標簽是一種被動型鏈接。四標簽與標簽非常相似，不同的是，它不是文本型的鏈接，而是區域型的鏈接。是整個規則中唯一支持非矩形熱區的標簽。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語...

CastlePeaK 2019-08-30 11:01 評論0 收藏0