資訊專欄INFORMATION COLUMN
摘要：瀏覽器最基本的排版方案是正常流排版。元素非常特別，瀏覽器對的處理是先排入正常流，再移動到排版寬度的最左最右主軸的最前和最后。瀏覽器支持的每一種排版方式，都是按照對應的標準來實現(xiàn)的。
筆記說明
重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權(quán)請聯(lián)系我，郵箱：kaimo313@foxmail.com。一、概括
本文主要聊聊瀏覽器是怎樣確定每一個元素的位置的二、基本概念 2.1、排版
瀏覽器把排版的內(nèi)容（文字、圖片、圖形、表格等等）確定它們位置的過程，叫作排版。瀏覽器最基本的排版方案是正常流排版。2.2、盒模型
瀏覽器又可以支持元素和文字的混排（元素被定義為占據(jù)長方形的區(qū)域），還允許邊框、邊距和留白，這個就是所謂的盒模型。2.2.1、絕對定位元素
絕對定位元素把自身從正常流抽出，直接由 top 和 left 等屬性確定自身的位置，不參加排版計算，也不影響其它元素。完全跟正常流無關(guān)的一種獨立排版模式。2.2.2、浮動元素
浮動元素則是使得自己在正常流的位置向左或者向右移動到邊界，并且占據(jù)一塊排版空間。 float 元素非常特別，瀏覽器對 float 的處理是先排入正常流，再移動到排版寬度的最左 / 最右（主軸的最前和最后）。三、正常流文字排版 3.1、字體解析庫（freetype）
來自freetype的兩張圖片關(guān)于獲取某個特定的文字相關(guān)信息：
縱向版本：
advance：每一個文字排布后在主軸上的前進距離。
3.2、css屬性影響除了字體提供的字形本身包含的信息，文字排版還受到一些 CSS 屬性影響，如 line-height、letter-spacing、word-spacing 等。display 值為 inline 的元素中的文字排版時會被直接排入文字流中，inline 元素主軸方向的 margin 屬性和 border 屬性也會被計算進排版前進距離當中。
即使沒有元素包裹，混合書寫方向的文字也可以形成一個盒結(jié)構(gòu)，在排版時，遇到這樣的雙向文字盒，會先排完盒內(nèi)再排盒外。
四、正常流中的盒多數(shù) display 屬性都可以分成兩部分：內(nèi)部的排版和是否 inline，帶有 inline- 前綴的盒，被稱作行內(nèi)級盒。
vertical-align 屬性決定了盒在交叉軸方向的位置，也會影響實際行高。
瀏覽器對行的排版，一般是先行內(nèi)布局，再確定行的位置，根據(jù)行的位置計算出行內(nèi)盒和文字的排版位置。
塊級盒比較簡單，它總是多帶帶占據(jù)一整行，計算出交叉軸方向的高度即可。
五、其他排版比如: flex 排版，支持了 flex 屬性，flex 屬性將每一行排版后的剩余空間平均分配給主軸方向的 width/height 屬性。
瀏覽器支持的每一種排版方式，都是按照對應的標準來實現(xiàn)的。
個人總結(jié)大漠老師在這篇文章下留言說：“文檔流和排版是最難的部分！”
看來下次要看看flex的一些東西了。。。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/114621.html
摘要：瀏覽器最基本的排版方案是正常流排版。元素非常特別，瀏覽器對的處理是先排入正常流，再移動到排版寬度的最左最右主軸的最前和最后。瀏覽器支持的每一種排版方式，都是按照對應的標準來實現(xiàn)的。 筆記說明 重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習...
摘要：瀏覽器最基本的排版方案是正常流排版。元素非常特別，瀏覽器對的處理是先排入正常流，再移動到排版寬度的最左最右主軸的最前和最后。瀏覽器支持的每一種排版方式，都是按照對應的標準來實現(xiàn)的。 筆記說明 重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習...
摘要：二標簽超鏈接型標簽超鏈接型標簽是一種被動型鏈接。四標簽與標簽非常相似，不同的是，它不是文本型的鏈接，而是區(qū)域型的鏈接。是整個規(guī)則中唯一支持非矩形熱區(qū)的標簽。 筆記說明 重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語...
摘要：二標簽超鏈接型標簽超鏈接型標簽是一種被動型鏈接。四標簽與標簽非常相似，不同的是，它不是文本型的鏈接，而是區(qū)域型的鏈接。是整個規(guī)則中唯一支持非矩形熱區(qū)的標簽。 筆記說明 重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語...
閱讀 1446·2021-11-16 11:44
閱讀 3286·2021-09-29 09:43
閱讀 620·2019-08-30 10:52
閱讀 938·2019-08-29 11:01
閱讀 3258·2019-08-26 11:47
閱讀 2885·2019-08-23 12:18
閱讀 1358·2019-08-22 17:04
閱讀 2046·2019-08-21 17:04
