CSS 排版與正常流 —— 重學CSS

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"同學們好，我是來自 《","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"技術銀河","attrs":{}},{"type":"text","text":"》的 💎 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"三鑽","attrs":{}},{"type":"text","text":" 。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這一週我們重新回到《重學 CSS》系列，之前的文章中我們重新學習了《 ","attrs":{}},{"type":"link","attrs":{"href":"https://xie.infoq.cn/article/c2f2e662bd7d53fa742a92c65","title":""},"content":[{"type":"text","text":"CSS 選擇器","attrs":{}}]},{"type":"text","text":"》和《 ","attrs":{}},{"type":"link","attrs":{"href":"https://xie.infoq.cn/article/01488eeda5beb5f2dc9e2ff1a","title":""},"content":[{"type":"text","text":"CSS 語法與規則","attrs":{}}]},{"type":"text","text":"》。接下來我們就一起來講講 CSS 裏面的排版與正常流","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在講解 CSS 當中的排版和正常流的時候，我們會按照屬性的一些邏輯關係來分成幾個部分來講解與學習。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b3/b34c995f506fd74ab4d6e4adb20b4706.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"盒 ( Box )","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"講到排版，我們需要引入的第一個概念就是 \"","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"盒","attrs":{}}],"attrs":{}},{"type":"text","text":"\"。之前我們在《模擬瀏覽器》和之前的一些 CSS 的文章中都講到了排版相關的概念。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"而我們真正去講到排版的時候，我們需要用到的單位一定就是 \"","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"盒","attrs":{}}],"attrs":{}},{"type":"text","text":"\"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在真正進入詳細瞭解 \"盒\" 的概念之前，我們先來做認識一下 3 個比較容易混交的概念。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":"1","normalizeStart":1},"content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"標籤 ( Tag ) —— ","attrs":{}},{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"源代碼","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"元素 (Element) —— ","attrs":{}},{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"語義","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"盒 ( Box ) —— ","attrs":{}},{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"表現","attrs":{}}]}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"HTML 代碼中可以書寫開始","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"標籤","attrs":{}}],"attrs":{}},{"type":"text","text":"，結束","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"標籤","attrs":{}}],"attrs":{}},{"type":"text","text":"，和自封閉","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"標籤","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"標籤是一個源代碼的概念，所以方式我們提到在 HTML 代碼中寫的肯定都是標籤。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一對起止","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"標籤","attrs":{}}],"attrs":{}},{"type":"text","text":"，表示一個","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"元素","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"元素是存在我們腦子裏的一個概念，它是語義領域的一個概念，所以一對起止標籤它一定是表示一個我們腦子裏面的概念。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"DOM 樹中存儲的是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"元素","attrs":{}}],"attrs":{}},{"type":"text","text":"和其他類型的節點 ( Node )。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"DOM 樹中存儲的不全是元素，因爲DOM 樹中存儲的東西叫節點 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Node","attrs":{}}],"attrs":{}},{"type":"text","text":"，所以元素只是是節點的一種。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"比如說我們的文本節點也是節點，但他並不是元素。再比如我們的註釋節點，它也是節點但是它也不是元素。當然還有 CDATA 節點，還有 processing-instruction，DTD等這些都是會存入 DOM 樹的，當時它們都並不是元素。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"很多同學的理解，DOM 樹中存儲的都是元素，不過這樣也沒有錯。因爲其他的節點相對來說都沒有那麼重要。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS 選擇器中的是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"元素","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其實這裏還可以加一個 \"或\"，在《CSS 選擇器》中講到的，CSS 選擇器選中的是元素或者是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"僞元素","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS 選擇器中的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"元素","attrs":{}}],"attrs":{}},{"type":"text","text":"，在排版時可能產生多個","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"盒","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個地方是大家需要注意到的一個概念，","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"CSS 選擇器選中的元素，它不一定和盒是一一對應的關係","attrs":{}},{"type":"text","text":"。它有可能是一對多的關係的。但是","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"有盒一般來說必定是有對應的元素的","attrs":{}},{"type":"text","text":"。我們不可能無中生有產生一個元素，即使是號稱是無中生有的僞元素也是依附於一個選中的元素產生的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"排版和渲染的基本單位是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"盒","attrs":{}}],"attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" 在我們的《模擬瀏覽器》的實現過程中，我們的排版盒渲染都是直接拿元素當盒去用了。但是這是一個很粗糙的做法，在實際上我們很多元素都會產生多個盒。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"比如說 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"inline","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素就會因爲分行而產生多個盒。又比如說帶有僞元素，被僞元素選擇器選中的元素也會生成多個盒。所以","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"我們排版盒渲染的基本單位都是盒","attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b3/b34c995f506fd74ab4d6e4adb20b4706.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"盒模型","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"既然我們講到盒，我們都會講到大名鼎鼎的 \"","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"盒模型","attrs":{}}],"attrs":{}},{"type":"text","text":"\"。我相信很多同學都知道盒模型，並且也學習過盒模型。但是也有很多同學可能沒有理清楚摸透這個概念，所以就會導致不知道什麼是盒模型，更不知道\"","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"盒","attrs":{}}],"attrs":{}},{"type":"text","text":"\"這個概念是從何而來。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面我們已經講清楚了盒是從，標籤到元素，到 CSS 選擇器到如何產生了盒。所以對盒的來龍去脈我們都很清楚了，所以這裏我們就可以開始詳細的去了解盒模型的概念。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"盒模型是我們排版的時候所用的一種基本單位","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"盒模型中的\"盒\"，不光是有一個寬和一個高。不像在《模擬瀏覽器》部分裏面那樣非常的好算，其實它還是挺複雜的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"盒模型是一個多層的結構，從裏面到外面分爲：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":"1","normalizeStart":1},"content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"最裏面就是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"content","attrs":{}}],"attrs":{}},{"type":"text","text":"，也就是我們的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"內容","attrs":{}}],"attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"content 到 border 之間有一個圈空白，這個圈叫做 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"padding","attrs":{}}],"attrs":{}},{"type":"text","text":"，也就是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"內邊距","attrs":{}}],"attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"Border 的外面又有一個圈空白叫 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin","attrs":{}}],"attrs":{}},{"type":"text","text":"，也就是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"外邊距","attrs":{}}],"attrs":{}}]}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/fe/fe5c9c804195e0f30cd981d8bafc47e0.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"padding 主要影響的是盒內的空間 —— 主要決定盒內的空間排布，也就是 content 區域的大小","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"margin 主要影響的是盒外的空間 —— 決定了盒周圍空白區域的大小","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"盒模型裏面的 寬 (width) 是有講究的，盒子的寬度是有可能被 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box-sizing","attrs":{}}],"attrs":{}},{"type":"text","text":" 屬性所影響的。最常見的兩個值就是：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"content-box","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"設置的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"width","attrs":{}}],"attrs":{}},{"type":"text","text":" 屬性只包含 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"content","attrs":{}}],"attrs":{}},{"type":"text","text":" 的內容的空間。也就是說：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"盒子佔用的空間","attrs":{}}],"attrs":{}},{"type":"text","text":" = ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"content 的大小","attrs":{}}],"attrs":{}},{"type":"text","text":" + ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"padding 的大小","attrs":{}}],"attrs":{}},{"type":"text","text":" + ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border 的大小","attrs":{}}],"attrs":{}},{"type":"text","text":" + ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin 的大小","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/a6/a6b050f46c6b36fd26c6181d1b746e33.gif","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"怎麼聽起來就是一臉懵的感覺。😂","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其實更接近人類的理解就是，我們在 CSS 中設置的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"width","attrs":{}}],"attrs":{}},{"type":"text","text":"屬性只對最裏面的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"content","attrs":{}}],"attrs":{}},{"type":"text","text":"的空間有效。其餘的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"padding","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border","attrs":{}}],"attrs":{}},{"type":"text","text":"和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin","attrs":{}}],"attrs":{}},{"type":"text","text":" 都會疊加到盒子的佔用空間。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那這個爲什麼程序員都說這種盒子是 \"反人類\" 的呢？如果很早起就接觸到 HTML 和 CSS 的同學應該都知道這麼一個讓人痛不欲生的場景：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在排版時候我們明明設置好這個盒子的寬度，但是最後加了 border 和 padding 就讓盒子 \"變大\" 了。所以最後我們要反過來重新計算 width 屬性來保證這個盒子是我們想要的寬度。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對！可能很多用習慣 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box-sizing: border-box","attrs":{}}],"attrs":{}},{"type":"text","text":" 的同學，早就忘記了這些痛苦的日子了。但是事實上這個設計理念就是有點反人類的。所以後面就打了一個補丁來拯救我們程序員，加入了 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border-box","attrs":{}}],"attrs":{}},{"type":"text","text":"。從此之後程序員就又可以開心的敲代碼了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/d9/d96e8f326989bd3a18822b8c629efdc3.gif","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"border-box","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border-box","attrs":{}}],"attrs":{}},{"type":"text","text":"，我們的 width 就包含了 padding 和 border 的尺寸了。回去看看我們盒模型的圖，我們可以看到","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border-box","attrs":{}}],"attrs":{}},{"type":"text","text":"的黃色線括着的區域，它所佔據的空間和範圍。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這樣當我們給一個盒，padding 和 border 的時候，就不會影響我們給予盒子的 width。這樣我們就可以保證我們盒子在沒有 margin 的時候它所佔據的空間就是與我們 width 一致的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"呈現出來的效果就是 padding 和 border 都會往內擠壓空間，而不會影響盒子的寬度。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏我們就講完盒模型了，我們就發現它所影響的屬性就是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"padding","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box-sizing","attrs":{}}],"attrs":{}},{"type":"text","text":"這幾個屬性。這些都是影響我們盒模型的總體尺寸，在排版中會影響着這個盒模型所佔據的範圍。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b3/b34c995f506fd74ab4d6e4adb20b4706.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"正常流","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS 的排版其實是有三代的排版技術的：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第一代就是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"正常流","attrs":{}}],"attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第二代就是基於 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Flex","attrs":{}}],"attrs":{}},{"type":"text","text":" 的排版","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第三代就是基於 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Grid","attrs":{}}],"attrs":{}},{"type":"text","text":" 的排版","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"結合最近推出的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"CSS Houdini","attrs":{}}],"attrs":{}},{"type":"text","text":"，可能更接近的是 3.5 代，它是一種完全自由的，允許使用 JavaScript 干預的排版","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"目前主流都是在使用 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"flex","attrs":{}}],"attrs":{}},{"type":"text","text":" 佈局。相比 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"flex","attrs":{}}],"attrs":{}},{"type":"text","text":"，其實正常流並沒有變得更簡單，反而是更復雜了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不過挺有意思的是，flex 它比前面的第一代的排版技術要簡單，比他後面一代的 grid 也簡單。個人認爲 flex 是最簡單並且最容易理解的一代排版技術。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"正常流呢，其實它能力最差，但是反而他的機制很複雜。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"排版","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/45/45be138230aedfd8337ed1668571b382.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果我們看到上面這個圖，可能有一些同學知道是什麼，有一些同學完全不知道他在幹什麼。其實這個就是 80 年代印刷廠工人在進行排版工作。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個傳統的排版技術，其實與我們現在網頁的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"layout","attrs":{}}],"attrs":{}},{"type":"text","text":"是息息相關的。在很多文章中，我們會把","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"layout","attrs":{}}],"attrs":{}},{"type":"text","text":"翻譯成","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"排版","attrs":{}}],"attrs":{}},{"type":"text","text":"，有時候也會翻譯成","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"佈局","attrs":{}}],"attrs":{}},{"type":"text","text":"。但是我個人也覺得翻譯成","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"排版","attrs":{}}],"attrs":{}},{"type":"text","text":"是最貼切的。因爲 CSS 當中的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"layout","attrs":{}}],"attrs":{}},{"type":"text","text":"是源自於傳統的排版技術。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"傳統的排版方式，我們需要先把字版放入一個一個字框裏面，按照文字的順序排列號，然後再把這些字框一個一個的排列進我們的排版框裏面。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以所謂排版就給我們所有可見的東西放到正確的位置上去。而在 HTML 裏面，我們是有 \"盒\" 這樣一個東西，在 CSS 的排版裏我們","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"只排兩樣東西","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":"1","normalizeStart":1},"content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"盒","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"文字","attrs":{}}]}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一切 CSS 的排版，都不會逃出這","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"盒","attrs":{}}],"attrs":{}},{"type":"text","text":"與","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"文字","attrs":{}}],"attrs":{}},{"type":"text","text":"這樣兩東西。所以我們的排版就是給每一個文字安排到正確的位置上，然後給每一個盒安排到正確的位置上。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在不考慮盒模型的情況下，我們需要關注的就是位置和尺寸，所以排版中並沒有什麼特殊的內容。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"字排版","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/4d/4d6fe0e01414cb7c9a3977fddd24eb65.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們在進入正常流之前，我們一起來先思考一下我們寫字的時候是怎麼寫的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其實我們寫字的時候，某種意義上講也是一個排版的過程。很多同學們小時候寫作文的時候都會用到上面這種有格子的稿紙。我們都記得這個作文稿紙上都是有一個一個的格子的，其實這相當於一個已經有了排版。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果在我們稿紙上沒有格子呢，我們就要自己來決定每一行要寫多少個字，每一個字有多高，然後怎麼分段呢？等等這些問題，都是在我們小時候寫字時需要關注的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那麼我們來總結一下寫字有哪些規則呢？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"從左到右書寫","attrs":{}},{"type":"text","text":" —— 我們都是依次從左向右書寫作文的","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"同一行寫的文字都是對齊的","attrs":{}},{"type":"text","text":" —— 寫中文的時候我們是對齊到格子的頂和底，寫英文的時候，像 e，a 這些字母它就有一條基線要去對齊。所以小時候英文的書寫本都是四線本。","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"一行寫滿了，就換到下一行","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其實以上的這些規則也就是我們說的 \"","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"正常流 ( Normal Flow )","attrs":{}}],"attrs":{}},{"type":"text","text":"\"，所以正常流爲什麼正常呢？因爲正常流就是與我們平時書寫文字的習慣一致。無論是中文也好，英文也好，它們都是遵循這種自然的排版方式的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"有一些我們早期進入前端的同學，就會發現其實正常流裏面，有很多特別不正常的東西，特別的反直覺，反人類的東西。爲什麼這麼奇怪的東西要叫正常流呢？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/60/602fcc594318c46791061cd03c6d8c1d.gif","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"很負責任的告訴大家，其實一點都不奇怪。如果我們知道前端的 HTML 和 CSS 的排版概念都是源自於專業排版知識，而這些排版使用方式如果出現在我們的書籍裏面，我們都會覺得挺自然的。但是真正讓我們去理解這些知識，我們都會覺得很困難。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個就可以追溯到 HTML 最早期整個的排版設計，都是從文字出版行業過來的專家所做的。所以它使用的思路都是那個時代的一個專業的思路。跟我們自然人腦子裏面的理解，可能就會有一些差異了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"正常流排版","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下來我們就正式進入正常流的排版講解。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"正常流排版的整個過程，與實現 flex 的過程比較類似，有這幾個步驟：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"收集盒與文字進行","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"計算盒與文字在行中的排布","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"計算行與行之間的排布","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們發現其實這個與我們 flex 的排版非常的像。其實我們會發現所有的排版算法，基本上都是差不多的。不論是哪個軟件，哪個規則，它們都是這麼幾個步驟。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下來我們來看看具體的一個排布規則：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/71/716969f2334c4182fbba6fca2962b20d.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當文字和盒在一行裏面的時候，它們是會從左向右排布的。假設我們先不考慮 writing-mode 的事情，這裏所說的從左向右排就意味着文字和盒有一個對齊的規則。這個就比我們小時候寫作文的那個格子要複雜了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在寫作文的格子稿紙上，我們是不需要考慮圖片和其他元素與我們的文字混排的情況的。我們在寫作文的時候不會寫着寫着在旁邊話一個插圖什麼的。但是我們發現書裏面是有的，特別是專業的書籍基本上都是圖文內容。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這些書裏面都是寫着寫着就會插入一個圖表，這些圖表有的是在行內放一個小的圖片，有的是裏面加一個小圖標。這些都是行內盒，更準確的說這叫 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"inline-level-box","attrs":{}}],"attrs":{}},{"type":"text","text":"，就是行內級別的盒。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"還有一些我們需要插入一個大圖，比如說一個統計的數據，因爲這種一般來說高度都比較高，放在一行裏面會很奇怪。所以這個時候我們會讓它單獨佔一行。這種類型的盒，我們就把它稱爲 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"block-level-box","attrs":{}}],"attrs":{}},{"type":"text","text":" ，也叫塊級盒。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以文字和 inline level 行內的盒排出來的行，我們就叫做 \"","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"行盒 ( line-box )","attrs":{}}],"attrs":{}},{"type":"text","text":"\"，然後一個自然的正常流，整體來看就是一個個的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"line-box","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"block-level-box","attrs":{}}],"attrs":{}},{"type":"text","text":" 的從上到下的擺佈。如果沒有 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"block-level-box","attrs":{}}],"attrs":{}},{"type":"text","text":"，那麼都是行盒從上到下排布。而每個行盒的內部都是從左到右的排布。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其實上面講到的兩種情況都是有一個名字的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/1f/1f1216979ce1a9d5435eeba0e3868574.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"塊級排布的我們就叫 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"BFC","attrs":{}}],"attrs":{}},{"type":"text","text":" —— Block level formatting context (塊級格式化上下文)","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"行內排布的我們就叫 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"IFC","attrs":{}}],"attrs":{}},{"type":"text","text":" —— Inline level formatting context (行內級格式化上下文)","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"很多在比較早期學習前端，甚至在一些 \"0 基礎\" 的班裏面學前端的同學，都會聽說過 \"塊級元素\" 和 \"行內元素\" 兩種說法。其實與我們講到的 BFC 和 IFC 就是這個概念最原本的意思。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"行級排布","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f9/f97792f7abfd2267e14635467e8c89e0.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"小時候我們在學習英文的時候，就會使用過這種 4 線本的格式來書寫英文。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們可以注意到在書寫 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"example","attrs":{}}],"attrs":{}},{"type":"text","text":" 這個英文的時候，我們可以看到 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"e","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"x","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"a","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"m","attrs":{}}],"attrs":{}},{"type":"text","text":" 都是在一行之內的。但是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"p","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"l","attrs":{}}],"attrs":{}},{"type":"text","text":" 就不一樣了。","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"p","attrs":{}}],"attrs":{}},{"type":"text","text":" 的尾巴是稍微往下突出的，而 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"l","attrs":{}}],"attrs":{}},{"type":"text","text":" 它的頭部是稍微往上突出的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以英文的字母呢，總是會有一些字母會往上或者往下伸出一塊的。這個也是英文書寫的一些規範，因爲遵循這些規範才能讓我們的字母在書寫的時候好看。基本上所有字母的下緣都是需要對準一條線的，那就是倒數第二條錢（在圖片中的黃色的線）。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這條線也叫 \"","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"基線","attrs":{}}],"attrs":{}},{"type":"text","text":"\"，而這個規則就叫做 \"","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"基線對齊","attrs":{}}],"attrs":{}},{"type":"text","text":"\"。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其實各國的文字都是有一條基線對齊的規則，但是不同的國家的文字依賴的基線的位置不一樣。比如說中文需要和英文混排的話，就會出現一個基線的偏移。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" 像中文這種類型的字，都會以上文下文這種邊緣作爲基礎線去對齊的。但是我們也是可以認爲這些類型的文字也是基於 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"基線 (baseline)","attrs":{}}],"attrs":{}},{"type":"text","text":" 對齊的。我們可以理解爲它們只是帶了一定的偏移。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"字形定義","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下來我們一起來了解一下，一個字形它是怎麼樣去定義的。在之前的文章中我們有講到一些字符集這方面的基礎知識。其實一個字符就是一個碼點，以爲着它的形狀是由我們的字體來決定的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下面的兩張圖是來自於一個著名的 C++ 的底層庫，叫做 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"freeType","attrs":{}}],"attrs":{}},{"type":"text","text":"。這個庫就是處理各種字體文件成爲抽象，並且它是一個開源界大部分的軟件都會去使用的一個字體庫。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個庫中，它從字體中抽象出這麼一個定義：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"任何一個文字，都是有一個寬和高，除此之外還有一條基線的定義。（如何沒有這個基線的定義，我們的字體是不成立的，也沒有辦法用它來進行排版）。這個定義就叫做 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Glyph Metrics","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們先來看看第一張圖：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/a1/a1589b17ae4b9985827533f6b9b44e9b.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先我們看到 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"origin","attrs":{}}],"attrs":{}},{"type":"text","text":"，也就是一個字體的原點。而原點標識的位置就是我們文字的基線的位置，而這個文字都是以基線作爲原點的座標，然後再用這個座標來定義這個文字的位置。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以說基線就是在 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"x = 0","attrs":{}}],"attrs":{}},{"type":"text","text":" 這個橫向的座標，然後這個文字就會有一個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"xMax","attrs":{}}],"attrs":{}},{"type":"text","text":" 和一個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"yMax","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"xMax","attrs":{}}],"attrs":{}},{"type":"text","text":" 就是文字最尾端的座標位置，而 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"yMax","attrs":{}}],"attrs":{}},{"type":"text","text":" 就是文字最頂端的位置。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然後文字也有相反的兩個值 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"xMin","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"yMin","attrs":{}}],"attrs":{}},{"type":"text","text":"，而這兩個值就是剛好相反，是文字開始的位置和底部的位置。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"也可以理解爲從底緣的基線到文字的最頂端的距離，這就是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"yMax","attrs":{}}],"attrs":{}},{"type":"text","text":"。而底緣的基線到文字的最底端的距離就是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"yMin","attrs":{}}],"attrs":{}},{"type":"text","text":"。而 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"xMin","attrs":{}}],"attrs":{}},{"type":"text","text":" 到 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"xMax","attrs":{}}],"attrs":{}},{"type":"text","text":"，從原點到文字開始和文字結束的距離。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最後這裏面的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"advance","attrs":{}}],"attrs":{}},{"type":"text","text":" 就是整個字佔用的空間。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以上講的就是橫向排版的時候，而縱排又有另外一套的邏輯：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/82/828c2199c08d314743f06bd95c5b9c6e.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們需要理解一些文本這樣的基礎概念，然後我們才能更好的理解文本和盒的混排。 ","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"行模型","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/17/175985b1b7b2d988a2c0390e36c8e13b.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們大致瞭解了這個文字在字體裏面是如何定義之後，我們就可以來講講 CSS 裏面的行模型了。這裏我們重點講 5 條線，其他還有一些線和位置例如 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"sub","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"sup","attrs":{}}],"attrs":{}},{"type":"text","text":" 這種我們就不去講了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個 base-line 和文字的頂原和底緣，分別叫做 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"base-line","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text-top","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":"。就是圖中的一條黃線和兩條綠線。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"結合剛剛講到的，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"base-line","attrs":{}}],"attrs":{}},{"type":"text","text":" 就是用來與英文字母對齊的。然後這裏面有一個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text-top","attrs":{}}],"attrs":{}},{"type":"text","text":" 和一個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":"，如果我們的字體大小不變，這兩個線是不會變得。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果我們使用多個文字的字體混排的話，這個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text-top","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":" 是由 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"fontSize","attrs":{}}],"attrs":{}},{"type":"text","text":" 最大的一個字體決定的。然後這個文字的上緣和下緣可以理解爲兩條固定的線。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果行高是大於文字的高度的時候，我們就會有 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"line-top","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"line-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":" ，就是在圖中的兩條白色的線。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"好！如果我們只有文字的話，這個行模型就這樣子排布的。但是我們一旦涉及到跟盒的混排，就會涉及到一個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"line-top","attrs":{}}],"attrs":{}},{"type":"text","text":"和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"line-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":" 的偏移問題。 ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/fd/fd92b790e1561f883682942ad9843a54.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當我們的盒足夠大的時候，我們的盒子是從 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":" 去對齊的，所以它就有可能把這個高度撐開。這個時候 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"line-top","attrs":{}}],"attrs":{}},{"type":"text","text":" 就會從虛線的位置，移動到了白色的實線的位置。（看上面的圖）","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個現象也是在正常流當中，處理行模型中非常麻煩的一個現象。因爲盒的","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"先後順序和尺寸","attrs":{}},{"type":"text","text":"都是影響 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"line-top","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"line-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":" 的位置。但是盒是不會影響 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text-top","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":" 的。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"代碼演示","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下來我們來一起看看在瀏覽器中的實際效果是怎麼樣，需要在瀏覽器上看效果，我們就需要些一段代碼了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":"1","normalizeStart":1},"content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"我們先建立一個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"wrapper","attrs":{}}],"attrs":{}},{"type":"text","text":" 把我們的內容包裹起來，然後給一個背景顏色","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"用 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"span","attrs":{}}],"attrs":{}},{"type":"text","text":" 標籤加入文字","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"在用 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"div","attrs":{}}],"attrs":{}},{"type":"text","text":" 標籤建立一個元素，然後給予這個元素 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"display: inline-block","attrs":{}}],"attrs":{}},{"type":"text","text":"，把元素設置成","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"行內盒","attrs":{}}],"attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":4,"align":null,"origin":null},"content":[{"type":"text","text":"最後我們加入","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"基線","attrs":{}}],"attrs":{}},{"type":"text","text":"的元素 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"base-line","attrs":{}}],"attrs":{}},{"type":"text","text":"，用這個來展示我們的基線是在哪個位置","attrs":{}}]}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"\n\n

\n

\n

\n

\n Hello world 中文 \n

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最後呈現出來的效果如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/c7/c76f605141d748c943fbfb0a66c69c2c.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏我們發現，我們的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"行內盒","attrs":{}}],"attrs":{}},{"type":"text","text":"是默認與基線對齊的規則。也就是說","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"盒的下邊緣會和文字的基線去做對齊","attrs":{}},{"type":"text","text":"。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"好，如果我們在盒子裏面加文字又會怎麼樣呢？我們來試試看。 ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏我們在盒裏面加入一個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"b","attrs":{}}],"attrs":{}},{"type":"text","text":" 的文字。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n

\n

\n

\n Hello world 中文 \n

b

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最後呈現出來的效果就是這樣的：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ca/ca024fbc4f118bb8fd5713e98b523e68.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏我們會發現盒子的對齊的位置發生了變化。盒的基線變成了它裏面文字的最後一行的基線。","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"也就是說，當一個盒子裏面有文字的時候，這個盒子的對齊就會基於裏面文字的基線做對齊。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏如果我們在 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"b","attrs":{}}],"attrs":{}},{"type":"text","text":" 的下一行加一個文字 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"c","attrs":{}}],"attrs":{}},{"type":"text","text":"，我們又會發現另一種現象。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n

\n

\n

\n Hello world 中文 \n

b
c

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/1d/1df5585a24ae0eb593109f8d242c0488.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個是特別需要注意的問題，行內盒 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"inline-block","attrs":{}}],"attrs":{}},{"type":"text","text":" 的基線是隨着自己裏面的文字去變化的。所以說大部分情況下是不建議大家給行內盒使用基線對齊的。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以我們在使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"行內盒","attrs":{}}],"attrs":{}},{"type":"text","text":"的時候就需要給一個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vertical-align","attrs":{}}],"attrs":{}},{"type":"text","text":"，屬性值我們可以給 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"top","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"bottom","attrs":{}}],"attrs":{}},{"type":"text","text":"或者是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"middle","attrs":{}}],"attrs":{}},{"type":"text","text":"都是可以的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們先看看 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vertical-align: top","attrs":{}}],"attrs":{}},{"type":"text","text":" —— 頂緣對齊","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n

\n

\n

\n Hello world 中文 \n

b
c

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/9d/9d0e7f89f2a7c49a77d14368c1872d4f.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"給 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"top","attrs":{}}],"attrs":{}},{"type":"text","text":" 就是跟行的頂緣對齊，因爲我們的外包框給的是 100px，所以它會把這一行撐開。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然後我們來看看 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vertical-align: bottom","attrs":{}}],"attrs":{}},{"type":"text","text":" —— 底緣對齊","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n

\n

\n

\n Hello world 中文 \n

b
c

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/2f/2fb8ad8f5e5ae0d3f6ca8e32139b0b43.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"與頂緣對齊不一樣就是這個時候，盒就會從下面往上撐開。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最後我們看看 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vertical-align: middle","attrs":{}}],"attrs":{}},{"type":"text","text":" —— 中線對齊","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n

\n

\n

\n Hello world 中文 \n

b
c

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/36/361d3d1f0219243fa52cfc467f258228.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"顧名思義，這個時候盒就會與文字的中線對齊。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其實這裏我們還可以讓盒與文字的頂緣和底緣對齊，也就是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text-top","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們來看看 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":" 是怎麼樣的：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n

\n

\n

\n Hello world 中文 \n

b
c

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/7d/7d35a07b66d6b92f40e0dbaa6da019ea.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"盒一樣會把上邊緣和下邊緣撐開。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果我們看到上面的如，紫色的線就是我們的基線，但是我們也可看看文字的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"中心線","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"頂緣線","attrs":{}}],"attrs":{}},{"type":"text","text":"和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"底緣線","attrs":{}}],"attrs":{}},{"type":"text","text":"的位置。我們只需要改動 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"base-line","attrs":{}}],"attrs":{}},{"type":"text","text":" 這個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"div","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vertical-align","attrs":{}}],"attrs":{}},{"type":"text","text":" 屬性即可：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們先看看中線：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n

\n

\n

\n Hello world 中文 \n

b
c

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/3f/3f39dffcd546c9c5161871762846876f.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"頂緣線：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n

\n

\n

\n Hello world 中文 \n

b
c

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f9/f92ebbc237afeed555da12c91c41358a.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"底緣線：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n

\n

\n

\n Hello world 中文 \n

b
c

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/39/3900c239253fef7151398a4aad53c440.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏我們可以觀察到，我們的盒是把我們的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"頂緣線 (top-line)","attrs":{}}],"attrs":{}},{"type":"text","text":" 往上撐開了的，所以也證明我們行內盒是會把頂緣或者下緣撐開的。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲了讓大家可以更加直觀的看到頂緣和底緣被撐開的現象，我們可以加多一個行內盒，同時把頂緣和底緣同時撐開。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n

\n

\n

\n Hello world 中文\n

\n b\n
\n c\n

\n

\n b\n
\n c\n

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/e5/e5cf0c1bb27f2df7bfd924d0c996b4fa.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏我們可以明顯發現，我們外包框的高度已經被撐開了，所以外包框的高度已經不是等於行內盒的高度了，應爲它的頂緣和底緣線都被撐開了。這個顯現就是行內盒不同的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"align","attrs":{}}],"attrs":{}},{"type":"text","text":" 對齊所導致的，所以不同的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vertical-align","attrs":{}}],"attrs":{}},{"type":"text","text":" 對整個行的高度是有比較多的影響的。所以相對於 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"flex","attrs":{}}],"attrs":{}},{"type":"text","text":" 佈局，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"flex","attrs":{}}],"attrs":{}},{"type":"text","text":" 就只需要去考慮最高的一個元素，但是在正常流裏面的行模型還是比較複雜的。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最後我給大家附上這段代碼的演示：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"http://tridiamond.tech/frontend-tutorials/css-tutorials/layouts/inline-model.html","title":""},"content":[{"type":"text","text":"查看效果","attrs":{}}]},{"type":"text","text":" ｜ ","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/TriDiamond/frontend-tutorials/blob/master/css-tutorials/layouts/inline-model.html","title":""},"content":[{"type":"text","text":"查看代碼","attrs":{}}]},{"type":"text","text":"｜ ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"喜歡的同學 🌟star 一下謝謝！","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"塊級排布","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下來我們來一起了解一下，正常流的塊級排布。我們在上一部分已經瞭解了塊級排布了。接下來我們一起來了解行級與塊級的盒之間是如何排布的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"之前講到的 BFC 和 IFC 的基本定義的時候，我們對塊級排布已經有一個基礎的認識了。但是呢正常流當中還有兩個非常複雜的機制，我們需要先了解一下。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Float 和 Clear","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Float 和 Clear 也稱爲 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"浮動","attrs":{}}],"attrs":{}},{"type":"text","text":" 與 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"清除浮動","attrs":{}}],"attrs":{}},{"type":"text","text":"。首先浮動元素嚴格來說已經脫離了正常流，當時他又依附於正常流去定義的一類排布方式。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先我們先來講一下 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"float","attrs":{}}],"attrs":{}},{"type":"text","text":" 的基本規則。根據 W3C 的標準，float 可對它有一下定義：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"float 元素可以先排到頁面的某一個特定的位置，同時可以當它是正常流裏的元素。然後如果它的屬性中有 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"float","attrs":{}}],"attrs":{}},{"type":"text","text":" 的時候，這個元素就會朝着 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"float","attrs":{}}],"attrs":{}},{"type":"text","text":" 屬性定義的方向去擠。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"假設元素加入一個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"float: left","attrs":{}}],"attrs":{}},{"type":"text","text":" 屬性，這個時候，這個元素就會往左邊去擠，如下圖：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/db/db323ab20ce9ccfdb4a8d5c750c41ae9.gif","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通過上面這個動畫，我們會發現，原來已經存在的文字位置就被浮動了的元素所 \"蓋住\" 了。所以呢這個時候就會根據 float 所佔據的區域去調整行盒的位置。因爲計算位置的時候我們還沒有去計算每一個文字具體的位置，所以說理論上來講這個地方的文字是沒有重排的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以當一個元素變成了浮動時，它所佔據的位置的原本內容，就會根據 float 之後佔據的寬度來進行調整。而 float 顯著的特徵就是，它會影響我們生成這些行盒的尺寸。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以在文字調整了之後我們最終看到瀏覽器呈現的效果是這樣的：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/e8/e8a84a87f9aa2b02ccfec809a7aa24f4.gif","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"float 不止會影響自己所在的行，","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"凡是它的高度所佔據的範圍內的所有行盒都會根據 float 元素的尺寸調整自己的大小","attrs":{}},{"type":"text","text":"。如果超出了這個 float 範圍的就不考慮了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ad/ad6845e5ed7aeb9ee7eaa7d7b39e643a.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果我們有兩個 float 元素的時候，還會出現一種情況。假設我們現在有兩個 float 元素，一個是 float: right 在右邊，然後再後面又加入了一個 float 元素，而這個新的 float 元素一樣也是向右浮動的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個時候我們會發現這個新的 float 元素也會受到上一個 float 元素影響，新的 float 元素是無法佔據上一個 float 元素的位置。這時候的這個現象就是 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"float 元素相堆疊的效果","attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/c3/c3606a35bfaef664dab6dc7b43f13127.gif","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當讓如果我們繼續添加 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"float","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素，並且也是浮動一樣的方向的時候，都會受到上面多個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"float","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素的影響並且繼續堆疊。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下來我們來看看一段實例代碼：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"\n\n

\n 「float-放置的位置」\n

\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 「float-放置的位置」\n

\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 「float-放置的位置」\n

\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 「float-放置的位置」\n

\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/42/424e2075f53abf32c855fbb1a02e9b87.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏面 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"「float-放置的位置」","attrs":{}}],"attrs":{}},{"type":"text","text":" 就是原本這個 float 元素的代碼所放置的位置。但是經過了 float 之後，所有的 float 元素都會被擠到最右邊的位置。最後所有行盒的生成都會圍繞着所有的 float 元素，同時它們都不會佔據 float 元素的空間。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個時候當我們把外框的寬度增加的時候，就會發現這些 float 元素就會出現堆疊的現象。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/e9/e950508b2627ca8916952b37faf1f1c7.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"看到這裏肯定很多同學說覺得 \"這樣排版不行呀，老闆肯定不收貨呀\"，\"UI 設計師肯定要吊打我們啦\"。是的這樣的排版確實是不正常的，而且一般來說也沒有這麼排版的需求呢。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以這裏我們可以給 float 加一個 clear 屬性，這樣我們就可以讓它們強制換行了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"\n\n

\n 「float-放置的位置」\n

\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 「float-放置的位置」\n

\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 「float-放置的位置」\n

\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 「float-放置的位置」\n

\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/8a/8a591bd74186704913363d95eecb207d.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"http://tridiamond.tech/frontend-tutorials/css-tutorials/layouts/float-example-1.html","title":""},"content":[{"type":"text","text":"查看效果","attrs":{}}]},{"type":"text","text":" ｜ ","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/TriDiamond/frontend-tutorials/blob/master/css-tutorials/layouts/float-example-1.html","title":""},"content":[{"type":"text","text":"查看代碼","attrs":{}}]},{"type":"text","text":"｜ ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"喜歡的同學 🌟star 一下謝謝！","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所謂的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"clear","attrs":{}}],"attrs":{}},{"type":"text","text":" 有的翻譯成 \"清除浮動\"，但是我覺得它不是清除浮動的意思。理論上來說它是 \"","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"找一個乾淨的空間來執行浮動","attrs":{}},{"type":"text","text":"\" 的意思。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"比如說 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"clear: right","attrs":{}}],"attrs":{}},{"type":"text","text":"，就是要在右邊找到一個乾淨的空間來執行這個浮動的操作。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以看到上圖的效果，當我們加入了 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"clear: right","attrs":{}}],"attrs":{}},{"type":"text","text":" 之後，第一個後面的元素都不受第一個 float 元素的影響，各自找到一個乾淨的空間進行浮動。所以 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"clear","attrs":{}}],"attrs":{}},{"type":"text","text":" 是有分 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"left","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"right","attrs":{}}],"attrs":{}},{"type":"text","text":"，指的是向左或者右找乾淨的空間進行浮動。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"雖然說 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"float","attrs":{}}],"attrs":{}},{"type":"text","text":" 這種浮動佈局給我們帶來了不少的麻煩，但是 float 的堆疊、自動換行（或者使用 clear 去換行）的行爲是可以幫助我們去進行一些有用的佈局的。因爲我們的正常流的佈局在早年沒有 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"flex","attrs":{}}],"attrs":{}},{"type":"text","text":"的情況下，正常流的佈局下完成一些著名的 CSS 佈局需求的時候是非常的困難的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"所以大家都產生這種使用 float 來代替正常流的 inline-block 來進行佈局的技術","attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下來我們看看下一段代碼實例：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏我們給每一個元素都加上一個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"float","attrs":{}}],"attrs":{}},{"type":"text","text":"，這時候元素跟元素之間的表現就很像一個正常流了。因爲 float 元素它佔滿了之後還是會換行的。那麼我們來看一下代碼：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"\n\n

1

\n

2

\n

3

\n

4

\n

5

\n

6

\n

7

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/16/166bfcb7f6c37f5e797df619a1ce4493.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏我們可以看到，float 是完全可以變成和正常流一樣排成一行的，當我們縮小寬度的時候，不夠位置的元素就會自動換到下一行。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-UsH8GwbC-1602443824687)(/Users/tridiamond/Library/Application Support/typora-user-images/image-20201006194359630.png)]","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個時候如果我們想執行一個強制換行怎麼辦呢？這個時候我們就可以拿出我們的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"clear","attrs":{}}],"attrs":{}},{"type":"text","text":"。比如說我們想在 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"3","attrs":{}}],"attrs":{}},{"type":"text","text":" 後面開始強制換行，我們就可以在 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"4","attrs":{}}],"attrs":{}},{"type":"text","text":" 的浮動元素上加入 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"clear: left","attrs":{}}],"attrs":{}},{"type":"text","text":" 即可。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏要注意的是，float 它是不認 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"
","attrs":{}}],"attrs":{}},{"type":"text","text":" 的，如果我們在一個 float 元素的後面加入 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"
","attrs":{}}],"attrs":{}},{"type":"text","text":" 是無法讓他強制換行的。因爲 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"br","attrs":{}}],"attrs":{}},{"type":"text","text":" 是正常流的換行，對 float 是沒有效的。 ","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"\n\n

1

\n

2

\n

3

\n

4

\n

5

\n

6

\n

7

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/fe/feb979222ca4fcdb169686aa44ff91b1.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們平時做佈局的時候，基本上我們都會使用盒而不是文字。我們很少有真正意義上需要像原始的 float 設計一樣用圖文混排的設計（就是向我們看的圖書一樣的佈局方式）。在網頁上佈局，一般來說我們都是針對同一個級別，我們都是幾個盒子排成正確的形狀來完成頁面上的佈局。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以說 float 這種佈局的技術，在比較早期的時代是非常流行的。不過到了現在的前端技術時代，float 的佈局方式已經完全被 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Flexbox","attrs":{}}],"attrs":{}},{"type":"text","text":" 技術所替代了。這裏只是讓大家知道一下，佈局的歷史裏面有這麼一個用法。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果有同學遇到了一些需要維護非常古老的代碼，就有可能看到這個技術。但是我不推薦大家當今還去使用這項技術。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"http://tridiamond.tech/frontend-tutorials/css-tutorials/layouts/float-example-2.html","title":""},"content":[{"type":"text","text":"查看效果","attrs":{}}]},{"type":"text","text":" ｜ ","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/TriDiamond/frontend-tutorials/blob/master/css-tutorials/layouts/float-example-2.html","title":""},"content":[{"type":"text","text":"查看代碼","attrs":{}}]},{"type":"text","text":" ｜ ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"喜歡的同學 🌟star 一下謝謝！","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Margin 摺疊","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下來我們來講講正常流裏面的一種現象，叫做 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin 摺疊","attrs":{}}],"attrs":{}},{"type":"text","text":"。在 BFC 裏我們的元素是順次從上往下排的，但是順次從上往下排的時候還是會受它的盒模型影響的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"就是有這麼一個現象，在一個從上往下排布的 BFC 裏面，有一個元素它有 margin，接着還有一個元素，它也有 margin。那麼這個時候第二個元素它應該怎麼排呢？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"直接告訴我們應該是兩個元素的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin","attrs":{}}],"attrs":{}},{"type":"text","text":" 是應該會疊加，如果第一個的 margin 是 10，第二個是 15，那麼兩個元素中間就是 10 + 15 = 25。對吧？不是的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/2a/2adb9b21a8f92100c4d7ba7a3a59dadf.gif","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"它們並不是把兩個 margin 的空白都留出來。而是會讓他們兩個發生一個堆疊的這樣的現象。最後疊出來的高度是跟最大的 margin 的高度相等的。如果一個是 10px，一個是 15px 的 margin，最後兩個元素之間的空間就是 15px（使用了兩個 margin 的最大值）。這個現象就是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Margin Collapse (留白摺疊/邊距摺疊)","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ae/ae022b34dd926a7468e439c3ea756ed2.gif","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"有些同學覺得真的是匪夷所思，根本不符合常理。但是其實這個是一個排版裏面的要求，因爲在我們的排版當中，任何一個元素，它的盒模型裏面所謂的 margin \"","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"只是要求周圍有這麼多的空間是留白的，而不會說要求元素與元素之間的邊距格子都有相對應的空白","attrs":{}},{"type":"text","text":"\"。所以只要元素的周圍的留白的空間夠了，自然就是一個合理的排版方式。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個可以說也是繼承了印刷行業，古老的印刷行業的排版體系中，這種 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Margin Collapse","attrs":{}}],"attrs":{}},{"type":"text","text":" 是一個非常自然的現象和思路。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們要注意，這種 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Margin Collapse","attrs":{}}],"attrs":{}},{"type":"text","text":" 只會發生在 BFC 裏面。它不會發生在 IFC 或者其他的排版方式裏面，比如說 flex、grid 等都不會有 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Margin Collapse","attrs":{}}],"attrs":{}},{"type":"text","text":" 的。所以","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"只有正常流中的 BFC 會發生邊距摺疊！","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其實我們單看 float和單看邊距摺疊，它們都不太難，我們但看 BFC 也不太難。但是如果我們三個現象疊加在一起，基本上就是我們古代前端最大的難題了。也就是說大家平時會看到一些資料裏面講，面試的時候遇到的 BFC 問題就都在這個三個現象相疊加的。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"BFC 合併","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下來我們來認識一下正常流最困難的一部分，\"","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"BFC 合併","attrs":{}}],"attrs":{}},{"type":"text","text":"\"。在講到具體的知識之前我們先來了解一下幾個概念。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"BFC 代表的是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Block Formatting Context (塊級格式化上下文)","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Block (塊)","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們先大致瞭解一下 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Block","attrs":{}}],"attrs":{}},{"type":"text","text":" 裏面有哪些：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Block Container —— 是在 CSS2.1 標準裏面定義的 ","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" + 裏面能裝 BFC 的盒","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" + 能容納正常流的盒，裏面就有 BFC","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Block-level Box","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" + 外面有 BFC 的盒","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" + 也就是說它能夠被放入 BFC 的這種盒子裏","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Block Box = Block Container + Block-level Box","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" + 就是上面兩個之和","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" + 裏外都有 BFC 的盒","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏我們就逐個拆開來講一下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"Block Container","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Block Containter 基本上是一些 display 的效果：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"block","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"inline-block","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"table-cell","attrs":{}},{"type":"text","text":" —— 裏面都是正常流，但是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"table-row","attrs":{}}],"attrs":{}},{"type":"text","text":" 就不是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"block cotainer","attrs":{}}],"attrs":{}},{"type":"text","text":" 了，因爲它裏面是 table-cell，所以不可能是正常流","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"flex item","attrs":{}},{"type":"text","text":" —— ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"display: flex","attrs":{}}],"attrs":{}},{"type":"text","text":" 的元素不是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"block container","attrs":{}}],"attrs":{}},{"type":"text","text":"，但是 flex 的子元素 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"flex item","attrs":{}}],"attrs":{}},{"type":"text","text":" 如果它們沒有特殊的 display 屬性的話它們都是 block container。 ","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"grid cell","attrs":{}},{"type":"text","text":" —— grid 也是有 cell 的，所有 grid 的 cell 默認也都是 block container","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"table-caption","attrs":{}},{"type":"text","text":" —— table 中有 table-caption (表格標題)，它裏面也是正常流","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"任何一個元素裏面只要不是特殊 display 模式的，它裏面默認就是正常流。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"Block-level Box","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們大多數的元素的 display 的值都是有一對的。一個是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"block-level","attrs":{}}],"attrs":{}},{"type":"text","text":" 的，一個是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"inline-level","attrs":{}}],"attrs":{}},{"type":"text","text":" 的。","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f1/f15f4a8bc998d900852fb3cb6fee3147.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 display 的最新標準裏面，已經把 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"block-level","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"inline-level","attrs":{}}],"attrs":{}},{"type":"text","text":" 拆成了單獨的屬性。Display 會出現這個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"inner","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"outer","attrs":{}}],"attrs":{}},{"type":"text","text":"，這裏就是給 display 做了系統性的分解。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏還有一種非常特殊的 display 屬性叫 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"run-in","attrs":{}}],"attrs":{}},{"type":"text","text":"。它跟着自己上一個元素來，有時候是 inline-level，有的時候是 block-level。這個屬性我們知道就可以了，在工作中基本上沒有見過有例子有運用到 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"run-in","attrs":{}}],"attrs":{}},{"type":"text","text":" 這個屬性。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"Block Box","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在標準裏面有這麼一個描述：\"","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"什麼時候什麼樣的盒，會創建 BFC 呢？","attrs":{}},{"type":"text","text":"\"","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"設立 BFC (Establish BFC)","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以下情況下會 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"設立 BFC","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"- ","attrs":{}},{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"floats","attrs":{}},{"type":"text","text":" —— 浮動的元素裏面就是一個正常流，所以會創建 BFC","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"- ","attrs":{}},{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"Abusolutely positioned elements","attrs":{}},{"type":"text","text":" —— 絕對定位的元素裏面也會創建 BFC","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"- ","attrs":{}},{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"block containers (such as inline-blocks, table-cells, and table-captions)","attrs":{}},{"type":"text","text":" that are not block boxes —— 就是這個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"block container","attrs":{}}],"attrs":{}},{"type":"text","text":" 但是不是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"block box","attrs":{}}],"attrs":{}},{"type":"text","text":" (也就是不是 block-level ) 會創建 BFC，包括以下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" - inline-blocks","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" - table-cells","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" - table-captions","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" - Flex items","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" - grid cell","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" - 等等...","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"- _and block boxes with ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow","attrs":{}}],"attrs":{}},{"type":"text","text":" other than ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"visible","attrs":{}}],"attrs":{}},{"type":"text","text":"_ —— 就是擁有 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow","attrs":{}}],"attrs":{}},{"type":"text","text":" 屬性，但是不是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"visible","attrs":{}}],"attrs":{}},{"type":"text","text":" 的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"block box","attrs":{}}],"attrs":{}},{"type":"text","text":" 也會創建 BFC","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以設立 BFC 一共有 4 大類，但是要記住這些確實不太好記。不過換一種方式來理解就好記一點了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"默認這些能容納正常流的盒，我們都認爲它們會創建 BFC，但是隻有一種情況例外：就是 block box 裏外都是 BFC 並且 overflow 是 visible。用公式來記就是這個：\"","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"block box && overflow:visible","attrs":{}},{"type":"text","text":"\"","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個其實是非常合理的，它裏外都是 BFC 而且它的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow","attrs":{}}],"attrs":{}},{"type":"text","text":" 是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"visible","attrs":{}}],"attrs":{}},{"type":"text","text":"，那不就相當於沒有 BFC 了嗎？所以這個時候會發生 BFC 合併。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"BFC 合併","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那 BFC 合併之後會發生什麼呢？這裏我們就需要了解兩個最重要的 BFC 合併之後的影響：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"BFC 合併與 float","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"因爲 BFC 發生了合併，所以裏面的行盒跟這個 float就有了一定的影響。 ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"正常的來講我們放一個 block box 它的 overflow 不是 visible，這個時候它會創建 BFC 並且整個 block box 放進 BFC 裏面。那麼整個就會受 BFC 影響，如果不創建 BFC它裏面的行盒就會受 float 的影響。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下來我們用一段代碼來看看其中的現象：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"\n\n

\n

\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏因爲我們的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text","attrs":{}}],"attrs":{}},{"type":"text","text":" 盒子給予了 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow: visible","attrs":{}}],"attrs":{}},{"type":"text","text":"，所以這個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow","attrs":{}}],"attrs":{}},{"type":"text","text":" 屬性值是不滿足創建 BFC 的條件的。所以我們的文字的盒子就會像不存在一樣，文字就會環繞着外面的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"float-box","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素來進行排布。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/13/13c38ef9024ac1e67db95384ccc92734.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果我們把 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow","attrs":{}}],"attrs":{}},{"type":"text","text":" 的屬性值改爲 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"hidden","attrs":{}}],"attrs":{}},{"type":"text","text":" 的話，那麼 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text","attrs":{}}],"attrs":{}},{"type":"text","text":" 的盒子就會建立 BFC。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b4/b463a771dab1cf4e3fe3f83f3beea41d.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏我們就很明顯的可以看見一個變化，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text","attrs":{}}],"attrs":{}},{"type":"text","text":" 的元素整體作爲一個 block level 的元素被排進了 BFC 裏面。也就是說這個時候 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素的寬度整個圍繞着 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"float-box","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素來進行排布了。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"http://tridiamond.tech/frontend-tutorials/css-tutorials/layouts/bfc-1.html","title":""},"content":[{"type":"text","text":"查看效果","attrs":{}}]},{"type":"text","text":" ｜ [查看代碼](https://github.com/TriDiamond/frontend-tutorials/blob/master/css-tutorials/layouts/bfc-1.html) ｜ ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"喜歡的同學 🌟star 一下謝謝！","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"BFC 合併與邊距摺疊","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"剛剛我們講到， BFC 只會發生在同一個 BFC 裏面。如果創建了新的 BFC 的話，它就不會發生邊距摺疊。如果沒有創建 BFC 的話，它就存在着一個同向邊距摺疊。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"好，同樣我們用一段代碼的實例來試驗一下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"\n\n

\n

\n

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏的兩個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素都給予了 100 x 100px 寬高，同時有一個 20px 的外邊距。第二個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素我們用一個含有 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow","attrs":{}}],"attrs":{}},{"type":"text","text":" 屬性的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"div","attrs":{}}],"attrs":{}},{"type":"text","text":" 包着。首先我們默認給予這個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow: visible","attrs":{}}],"attrs":{}},{"type":"text","text":"，然後我們來看看會出現什麼效果。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/23/2348631cebb031d1a07763df70949d67.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"出來的效果顯而易見，我們可以看到上面和下面的兩個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素的外邊距發生了","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"邊距摺疊","attrs":{}}],"attrs":{}},{"type":"text","text":"現象。這裏兩個盒子就當做 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow","attrs":{}}],"attrs":{}},{"type":"text","text":" 這個元素不存在一般，最後他們兩個的距離就是 20px。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏做一個小實現，如果我們給 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素加入一個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin-top: 30px","attrs":{}}],"attrs":{}},{"type":"text","text":"，這個時候會對這兩個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box","attrs":{}}],"attrs":{}},{"type":"text","text":" 的距離發生影響嗎？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"答案是","attrs":{}},{"type":"text","text":"：會的！但是還是還是會出現 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"邊距摺疊","attrs":{}}],"attrs":{}},{"type":"text","text":" 的現象，只是它們之間的距離變成了 30px，但是並不會變成 20+30+20 這樣的效果。我們來看看運行效果：","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n

\n

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/13/135ddfb43f14bef0df4bcde4b60978c2.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最後如果我們把 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow-box","attrs":{}}],"attrs":{}},{"type":"text","text":" 的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow","attrs":{}}],"attrs":{}},{"type":"text","text":" 屬性改爲 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"hidden","attrs":{}}],"attrs":{}},{"type":"text","text":"， 這個時候它就會創建 BFC。這時候我們就會發現，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"邊距摺疊","attrs":{}}],"attrs":{}},{"type":"text","text":" 現象就會消失，最終兩個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素的距離就是 30+20 = 50px。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/97/973e116edde00f8d7b3c1a6fb3ed3377.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/50/50becc5e38fbc854c9dd7bb36e7815a7.gif","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"\"不知道這裏發生了什麼，但是覺得很棒！哈哈\" ","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow-box","attrs":{}}],"attrs":{}},{"type":"text","text":" 裏面的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素已經和外面的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素不在同一個 BFC 裏面了。所以它們之間不會再發生邊距摺疊現象。但是 外面的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow-box","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box","attrs":{}}],"attrs":{}},{"type":"text","text":" 是處於同一個 BFC 中，所以它們兩個依然會發生邊距摺疊現象。所以這個就是創建 BFC 對邊距摺疊這個行爲的影響。 ","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b3/b34c995f506fd74ab4d6e4adb20b4706.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我是來自《","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"技術銀河","attrs":{}},{"type":"text","text":"》的","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"三鑽","attrs":{}},{"type":"text","text":"：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"\"學習是爲了成長，成長是爲了不退步。堅持才能成功，失敗只是因爲沒有堅持。同學們加油哦！下期見！\"","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/8a/8ae28301593f4c2e46b4e9b75a043721.gif","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"博主開始在B站每天直播學習，早上 06:00 點到晚上 11:30 。 歡迎過來《","attrs":{}},{"type":"link","attrs":{"href":"https://live.bilibili.com/22619211","title":""},"content":[{"type":"text","text":"直播間","attrs":{}}]},{"type":"text","text":"》一起學習。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們在這裏互相監督，互相鼓勵，互相努力走上人生學習之路，讓學習改變我們生活！","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"學習的路上，很枯燥，很寂寞，但是希望這樣可以給我們彼此帶來多一點陪伴，多一點鼓勵。我們一起加油吧！ (๑ •̀ㅂ•́)و","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"horizontalrule","attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/cd/cd310e0ebb99020b92a2d9b50a6cf0e5.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}