當下已經有很多工具或者是軟體，在努力實現從設計稿到原型稿的轉換。但是到目前我還沒有看到，哪一家可以挺起胸膛說，我們這個可以 100% 的實現這個需求。
是什麼阻止了這兩個視覺上幾乎一樣的稿子之間的轉換呢？在我看來，是因為它們之間的物理邏輯不一樣。簡單的說，要實現從設計稿到原型稿到轉換，其實是要達到突破二者之間物理次元的高度。
原型稿設計稿的區別
因為我們都太習慣依賴自己都眼睛，導致我們很容易只從一個角度看待問題。如果我們換一個視角，結合我們現實生活中的物理規律，或許能看出一些端倪。這邊我們轉到兩個稿子的側面。
我把設計的過程理解為是在地板上作畫的過程，元素之間只有覆蓋關係。也正因為元素之間的邏輯如此簡單，所以我們可以在任意位置起筆，而不用擔心影響其它元素的位置。
然而在我們的 web 環境中，程式設計師更像是在一塊垂直地板的牆面上寫程式碼的過程。而這個物理邏輯就變得複雜得多。怎麼說？
因為是在牆上操作，很明顯所有的元素都會受到地球的引力掉到地板上(當然如果下面的元素如果夠大，是可以疊放的)。可是在實際的網頁中，我們習慣的是從上往下看的，那這個怎麼辦呢？
我們需要一個向上的力，於是在整個房間裡面放滿水。此時所有元素受到浮力的影響往上浮。但是可以看到我們的文字都飄上來了，順序都亂了。怎麼才能讓這幾個文字放在應該的位置呢？
很簡單，我們用盒子把這些文字都裝起來。而這一切和你家的衣儲非常相似。唯一的區別只是你家現在已經充滿了水。
盒狀模型
盒子？這個和我們網頁的盒狀模型有什麼關係？在我看來他們就是一個東西。
這邊插入一個box-sizing的小知識點。就像你買核桃，有的店帶殼的有的店不帶殼一樣。你不能說這其中任何一家的核桃有問題。只是他們的計算方式不一樣。瀏覽器對於寬度的理解也是一樣，有的瀏覽器會把邊框計算進去，有的瀏覽器則不會。那我們要搞清楚的就是，這個瀏覽器是怎樣的一種方式，或者你直接利用box-sizing告訴瀏覽器我要那種計算方式。
對於盒子內外的間隙，這邊我們可以理解為磁力。我們所有的盒子都是金屬的。有的盒子自帶磁力（h1,body， p），有的盒子不帶磁力（div，span）。我們可以通過margin,和paading這兩個插座給這些盒子充電，從而改變他們之間的磁力大小。
margin這個插座是給外皮充電的，所以力是向外的。padding這個插座是給內殼充電的，所以力是向內的。
定位
按照以上邏輯我們就是要實現上面這樣的層疊效果這麼辦呢？
這邊我們只需要在我們的盒子上套一個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的。
我們能容易給盒子新增力，文字相對較難，所以我們通常會把文字裝進盒子，間接實現力的效果。
在瀏覽器中多放幾個盒子和文字，可以看到這樣的效果。
奇怪的是，在頻寬度的block元素右側多了很多空白。按照之前的邏輯來說，我們的下面的元素受到浮力的影響是會自動往上填充的。
這個可以理解為帶有block屬性的盒子之間是會有一層看不見的隔板的(類似於衣櫃裡面的透明玻璃板)。不管這個盒子的寬度是多少下面的東西都浮不上來。
如果我們就是希望下面的元素能夠浮動上來呢？那麼我們可以通過float這個屬性拆掉這層玻璃版。
可想而知因為我們玻璃版拆掉了，下面的文字也會自動的浮上來。
於是我們可以通過在文字的盒子上新增一個叫clear:both；的玻璃板，這樣我們的文字就不會浮動上去。
當然既然是新增板子，我們可以把我們浮動的元素也裝到一個盒子裡面。給這個盒子新增一個高度（height:60px），或者設定overflow屬性，或者利用大家常用的clearfix預置css樣式。也可以實現同樣的效果。
當然我們網頁中除了帶隔板的block元素。也有不帶隔板的inline-block元素和inline元素。
以上是 Webnovel 的詳情頁頂部的截圖。大家可以去網速下載 webdeveloper 這個外掛，chrome和firefox都有。利用其中的 infomation => display Topographic Information 可以去檢視任何一個網頁的盒狀結構。
其它佈局
對於像table，flex，grid佈局，你以為他們很高階。其實它們都是帶這個玩意的盒子而已。
原理是相通的，簡單的說，他們是比浮動更穩定和靈活的佈局方式。
總結
如果你的網頁中所有的元素都是通過定位佈局的話，那麼這個網頁的物理規律，就幾乎和我們設計工具中的佈局方式一樣了。而這是也是為啥sketch中measure外掛能夠匯出一份和設計稿一摸一樣的網頁原型稿。可是我們大多數的網頁更傾向於文件流的模式，所以我們又得靠程式設計師去再實現一份流的版本。
設計工具中雖然有打組這個功能，但是卻沒有我們網頁中盒子力的關係。但是在我們前端程式設計師眼中，又恰恰是萬物都是盒子。用一個連盒子概念都沒有的工具，去設計一個全是盒子的世界，可想而知這個難度。
當然現在也有很多設計工具引入了盒子這個概念。但是你給繡房姑娘一把殺豬刀，這也不是那麼容易掌握的概念。但我相信人工 AI 的介入，能夠打破這個次元，設計稿直接就是原型稿的時刻終會到來，那也正是我們切圖仔的下崗之時。
注意 文中的概念只是為了方便大家理解 css 佈局的一種引喻手法，並不代表網頁中實際的邏輯。