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

轉載于:https://juejin.im/post/5cb1d56af265da03ba0e1ceb

總結

以上是生活随笔為你收集整理的CSS 布局与“仓库管理”的关系的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。