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