CSS 佈局與「倉庫管理」的關係

上週寫了一個文章不會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 咱們招人"偏體驗前端",要求點這裏。