上週寫了一個文章不會CSS佈局可能是“物理”不好，並在我們團隊裡做了一個分享。大家普遍反應的問題是，丟擲的概念太多有點不好理解。這邊重新整理思路和精簡概念，再戰一次。
當下已經有很多工具或者是軟體，在努力實現從設計稿到原型稿的轉換。但是還沒有哪一家可以挺起胸膛說，我們可以 100% 的實現這個需求。
是什麼阻止了這兩個視覺上幾乎一樣的稿子之間的轉換呢？
在我看來，是因為它們之間的物理邏輯不一樣。
簡單的說，要實現從設計稿到原型稿到轉換，其實是要達到突破二者之間物理次元的高度。
原型稿設計稿的區別
首先因為我們都太習慣依賴自己都眼睛，導致我們很容易只從一個角度看待問題，忽略了其它的側面，誤以為這兩個是一模一樣的東西。
然而如果我們換一個視角，結合現實生活中的物理規律，或許能看出一些它們的差別。這邊我們轉到兩個稿子的側面。
我把設計的過程理解為是在地板上作畫的過程，元素之間只有覆蓋關係。也正因為如此，所以我們可以在任意位置起筆，而不用擔心影響這會影響到其它元素的佈局。
而在我們的 web 環境中，程式設計師更像是在一塊垂直地板的牆面上寫程式碼。這個物理邏輯就變得複雜得多。
首先因為是在牆上操作，所有的元素都會受到地球的引力掉到地板上(當然如果下面的元素如果夠大，是可以疊放的)。可是在實際的網頁中，我們習慣的是從上往下看的，那這個怎麼辦呢？
我們可以在整個房間裡面放滿水（虛線代表透明玻璃板），利用浮力讓元素往上浮。但是可以看到我們的元素在水的作用下不受控制，順序都亂了。怎麼才能讓它們待在我們想讓它們存在的位置呢？
很簡單，我們用盒子把這些文字都裝起來。並在盒子之間新增一個透明的玻璃板（圖中藍色虛線部分）進行分離，讓元素按照既定的規則擺放在合適的位置。
而這一切和倉庫的貨物陳列是幾乎是一模一樣的。唯一的區別只是這個倉庫是在一個充滿水的環境中。
我們近似的可以把透明玻璃板，理解為倉庫中的架子，然後容器就是我們倉庫中的盒子。如果想讓某一個貨架的背景帶顏色，只需要新增一塊帶顏色的背板即可。
盒狀模型
這裡的盒子和我們網頁的盒狀模型有什麼關係呢？在我看來他們就是一個路數的東西。
對於盒子內外的間隙，這邊我們可以理解為快遞盒子內部或者之間新增的防撞泡沫。margin,和paading值對應著這些泡沫的厚度。
這邊插入一個
box-sizing的小知識點。很多同學比較搞不清楚，為啥有的瀏覽器的寬度是帶邊框和 padding ，有的瀏覽器的寬度計算又不帶邊框和 padding 。這個邏輯就有點像你去商店裡面買核桃，有的店帶殼的有的店不帶殼一樣。你不能說這其中任何一家的核桃有問題。只是他們的計算方式不一樣。瀏覽器對於寬度的理解也是一樣，我們要搞清楚的就是，這個瀏覽器是怎樣的一種方式，或者你直接利用box-sizing告訴瀏覽器我要那種計算方式。
定位
按照以上邏輯，如果想要實現上面這樣的層疊效果這麼辦呢？
這邊我們只需要在我們的盒子上套一個3D的網，因為我們的視角是在右側的，所以就在我們的眼睛裡實現了這個層疊效果。
對於fixed可以理解為，我們額外新增了兩面都是透明的網狀置物架，fixed就是把元素放到這張網裡。
很多小夥伴老是不能理解relative,absolute,fixed的關係。雖然他們都是通過position去宣告，但是relative更像是建立一個結構，而absolute,fixed是把元素放到這個結構中。
relative建立一個3D網狀結構；abosolute把元素放到網裡；top元素在網中x軸位置；left元素在網中y軸位置；z-index元素在網中z軸位置；fixed把元素放到全域性的網裡;
還有我們這個網在z軸上好像是無限多級的，就像我們倉庫裡的置物架可以無線堆疊一樣。
浮動佈局
下面我們把視角從側面切回我們的正面。給大家一個更真實的列子來看看，網頁中佈局的物理邏輯。
假設這是一個我們實際的瀏覽器介面，我們把下面的我愛你三個字放到我們的瀏覽器中。因為文字受到我們之前說的浮力，所以會往上浮動。
在真實的網路環境中，我們的文字會自動往左對齊。這好比我們把物品放到置物架上的時候，習慣了從左往右開始擺放。因為我們習慣從左往右看一樣。
這個邏輯對應的就是我們瀏覽器的text-align這個屬性，預設閱讀方式是left的，當然你也可以設定為center，right 等的閱讀方式。
為了防止防撞泡沫炸出來，也為了新增防撞泡沫方便。我們通常會把想要放到置物架上的東西都放到盒子裡面再放上去。
在瀏覽器這個倉庫中我們多放幾個盒子和文字，可以看到這樣的效果（虛線代表透明玻璃板）。block元素自帶置物隔板，所以我們下面的元素即使受到浮力的影響也不會往上跑。可是當我們就是要實現文字環繞的效果怎麼辦呢？
很簡單我們只需要把圖中紅色的板子去掉就好了。
這邊我們把 200px 下面的板子也去掉，可以看到這樣的效果。float在這裡近似的可以看作是拆掉下面的板子，並且為了防止盒子隨意飄動，我們還把這個盒子基於方向綁在了置物架上。
如果我們不想要這個環繞的效果，就是要一個左右佈局怎麼辦呢？很簡單，我們把之前拆掉的板子加回來。
這裡給大家提供了兩種不同的加板子的方式。
- 第一種可以少一個盒子，但是能靈活性會差一點。
- 第二種多加了一個盒子，但是可擴充性更好（也更推薦這個方式）。
當然我們網頁中除了帶隔板的block元素。也有不帶隔板的inline-block元素和inline等其它元素（具體可以參考display的屬性值列表）。因為它們不帶隔板，所以通常我們會把這些元素放到帶隔板的 block元素裡再放到置物架上。
這邊看到的是 Webnovel 的詳情頁頂部的地貌樣式。大家可以去網上下載 webdeveloper 這個外掛（chrome 和 firefox 都有）。選中其中的 infomation => display Topographic Information 可以檢視任何一個網頁的盒狀結構。這個工具能幫助設計師，快速的進行佈局方向上的視覺走查。
對於像table，flex，grid佈局，原理是相通的。簡單的說，是它們擁有比浮動更穩定和靈活的3D網狀支架。
總結
如果你的網頁中所有的元素都是通過定位佈局的話，那麼這個網頁的物理規律，就幾乎和我們設計工具中的佈局方式一樣了。而這是也是為啥 sketch 中 measure 外掛能夠匯出一份和設計稿一摸一樣的網頁原型稿。可是我們大多數的網頁更傾向於文件流的模式，所以我們又得靠程式設計師去再實現一份流的版本。
設計工具中雖然有打組這個功能，但是卻沒有我們網頁中盒子力的關係。但是在我們前端程式設計師眼中，又恰恰是萬物都是盒子。用一個連盒子概念都沒有的工具，去設計一個全是盒子的世界，可想而知這個難度。
當然現在也有很多設計工具引入了盒子這個概念。但是你給繡房姑娘一把殺豬刀，這也不是那麼容易掌握的概念。但我相信人工 AI 的介入，能夠打破這個次元，設計稿直接就是原型稿的時刻終會到來，那也正是我們切圖仔的下崗之時。
注意： 文中的概念只是為了方便大家理解 CSS 佈局的一種引喻手法，並不代表網頁中實際的邏輯。
BTW 我們招人"偏體驗前端",要求點這裡。