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