不會CSS佈局多是「物理」很差

寫完這篇文章，並在咱們團隊裏作了一個分享。你們廣泛反應的問題是，拋出的概念太多有點很差理解。這邊從新整理思路和精簡概念，再戰一次。因此請轉移到修訂版CSS 佈局與「倉庫管理」的關係

當下已經有不少工具或者是軟件，在努力實現從設計稿到原型稿的轉換。可是到目前我尚未看到，哪一家能夠挺起胸膛說，咱們這個能夠 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 佈局的一種引喻手法，並不表明網頁中實際的邏輯。

BTW 咱們招人"偏體驗前端",要求點這裏。