上周寫了一個(gè)文章不會(huì)CSS布局可能是“物理”不好，并在我們團(tuán)隊(duì)里做了一個(gè)分享。大家普遍反應(yīng)的問題是，拋出的概念太多有點(diǎn)不好理解。這邊重新整理思路和精簡概念，再戰(zhàn)一次。

當(dāng)下已經(jīng)有很多工具或者是軟件，在努力實(shí)現(xiàn)從設(shè)計(jì)稿到原型稿的轉(zhuǎn)換。但是還沒有哪一家可以挺起胸膛說，我們可以 100% 的實(shí)現(xiàn)這個(gè)需求。

是什么阻止了這兩個(gè)視覺上幾乎一樣的稿子之間的轉(zhuǎn)換呢？

在我看來，是因?yàn)樗鼈冎g的物理邏輯不一樣。

簡單的說，要實(shí)現(xiàn)從設(shè)計(jì)稿到原型稿到轉(zhuǎn)換，其實(shí)是要達(dá)到突破二者之間物理次元的高度。

原型稿設(shè)計(jì)稿的區(qū)別

首先因?yàn)槲覀兌继?xí)慣依賴自己都眼睛，導(dǎo)致我們很容易只從一個(gè)角度看待問題，忽略了其它的側(cè)面，誤以為這兩個(gè)是一模一樣的東西。

然而如果我們換一個(gè)視角，結(jié)合現(xiàn)實(shí)生活中的物理規(guī)律，或許能看出一些它們的差別。這邊我們轉(zhuǎn)到兩個(gè)稿子的側(cè)面。

我把設(shè)計(jì)的過程理解為是在地板上作畫的過程，元素之間只有覆蓋關(guān)系。也正因?yàn)槿绱?#xff0c;所以我們可以在任意位置起筆，而不用擔(dān)心影響這會(huì)影響到其它元素的布局。

而在我們的 web 環(huán)境中，程序員更像是在一塊垂直地板的墻面上寫代碼。這個(gè)物理邏輯就變得復(fù)雜得多。

首先因?yàn)槭窃趬ι喜僮?#xff0c;所有的元素都會(huì)受到地球的引力掉到地板上(當(dāng)然如果下面的元素如果夠大，是可以疊放的)。可是在實(shí)際的網(wǎng)頁中，我們習(xí)慣的是從上往下看的，那這個(gè)怎么辦呢？

我們可以在整個(gè)房間里面放滿水（虛線代表透明玻璃板），利用浮力讓元素往上浮。但是可以看到我們的元素在水的作用下不受控制，順序都亂了。怎么才能讓它們待在我們想讓它們存在的位置呢？

很簡單，我們用盒子把這些文字都裝起來。并在盒子之間添加一個(gè)透明的玻璃板（圖中藍(lán)色虛線部分）進(jìn)行分離，讓元素按照既定的規(guī)則擺放在合適的位置。

而這一切和倉庫的貨物陳列是幾乎是一模一樣的。唯一的區(qū)別只是這個(gè)倉庫是在一個(gè)充滿水的環(huán)境中。

我們近似的可以把透明玻璃板，理解為倉庫中的架子，然后容器就是我們倉庫中的盒子。如果想讓某一個(gè)貨架的背景帶顏色，只需要添加一塊帶顏色的背板即可。

盒狀模型

這里的盒子和我們網(wǎng)頁的盒狀模型有什么關(guān)系呢？在我看來他們就是一個(gè)路數(shù)的東西。

對(duì)于盒子內(nèi)外的間隙，這邊我們可以理解為快遞盒子內(nèi)部或者之間添加的防撞泡沫。margin,和paading值對(duì)應(yīng)著這些泡沫的厚度。

這邊插入一個(gè)box-sizing的小知識(shí)點(diǎn)。很多同學(xué)比較搞不清楚，為啥有的瀏覽器的寬度是帶邊框和 padding ，有的瀏覽器的寬度計(jì)算又不帶邊框和 padding 。這個(gè)邏輯就有點(diǎn)像你去商店里面買核桃，有的店帶殼的有的店不帶殼一樣。你不能說這其中任何一家的核桃有問題。只是他們的計(jì)算方式不一樣。瀏覽器對(duì)于寬度的理解也是一樣，我們要搞清楚的就是，這個(gè)瀏覽器是怎樣的一種方式，或者你直接利用box-sizing告訴瀏覽器我要那種計(jì)算方式。

定位

按照以上邏輯，如果想要實(shí)現(xiàn)上面這樣的層疊效果這么辦呢？

這邊我們只需要在我們的盒子上套一個(gè)3D的網(wǎng)，因?yàn)槲覀兊囊暯鞘窃?strong>右側(cè)的，所以就在我們的眼睛里實(shí)現(xiàn)了這個(gè)層疊效果。

對(duì)于fixed可以理解為，我們額外添加了兩面都是透明的網(wǎng)狀置物架，fixed就是把元素放到這張網(wǎng)里。

很多小伙伴老是不能理解relative,absolute,fixed的關(guān)系。雖然他們都是通過position去聲明，但是relative更像是創(chuàng)建一個(gè)結(jié)構(gòu)，而absolute,fixed是把元素放到這個(gè)結(jié)構(gòu)中。

• relative 創(chuàng)建一個(gè)3D網(wǎng)狀結(jié)構(gòu)；
• abosolute 把元素放到網(wǎng)里；
• top 元素在網(wǎng)中x軸位置；
• left 元素在網(wǎng)中y軸位置；
• z-index 元素在網(wǎng)中z軸位置；
• fixed 把元素放到全局的網(wǎng)里;

還有我們這個(gè)網(wǎng)在z軸上好像是無限多級(jí)的，就像我們倉庫里的置物架可以無線堆疊一樣。

浮動(dòng)布局

下面我們把視角從側(cè)面切回我們的正面。給大家一個(gè)更真實(shí)的列子來看看，網(wǎng)頁中布局的物理邏輯。

假設(shè)這是一個(gè)我們實(shí)際的瀏覽器界面，我們把下面的我愛你三個(gè)字放到我們的瀏覽器中。因?yàn)槲淖质艿轿覀冎罢f的浮力，所以會(huì)往上浮動(dòng)。

在真實(shí)的網(wǎng)絡(luò)環(huán)境中，我們的文字會(huì)自動(dòng)往左對(duì)齊。這好比我們把物品放到置物架上的時(shí)候，習(xí)慣了從左往右開始擺放。因?yàn)槲覀兞?xí)慣從左往右看一樣。

這個(gè)邏輯對(duì)應(yīng)的就是我們?yōu)g覽器的text-align這個(gè)屬性，默認(rèn)閱讀方式是left的，當(dāng)然你也可以設(shè)定為center，right 等的閱讀方式。

為了防止防撞泡沫炸出來，也為了添加防撞泡沫方便。我們通常會(huì)把想要放到置物架上的東西都放到盒子里面再放上去。

在瀏覽器這個(gè)倉庫中我們多放幾個(gè)盒子和文字，可以看到這樣的效果（虛線代表透明玻璃板）。block元素自帶置物隔板，所以我們下面的元素即使受到浮力的影響也不會(huì)往上跑。可是當(dāng)我們就是要實(shí)現(xiàn)文字環(huán)繞的效果怎么辦呢？

很簡單我們只需要把圖中紅色的板子去掉就好了。

這邊我們把 200px 下面的板子也去掉，可以看到這樣的效果。float在這里近似的可以看作是拆掉下面的板子，并且為了防止盒子隨意飄動(dòng)，我們還把這個(gè)盒子基于方向綁在了置物架上。

如果我們不想要這個(gè)環(huán)繞的效果，就是要一個(gè)左右布局怎么辦呢？很簡單，我們把之前拆掉的板子加回來。

這里給大家提供了兩種不同的加板子的方式。

• 第一種可以少一個(gè)盒子，但是能靈活性會(huì)差一點(diǎn)。
• 第二種多加了一個(gè)盒子，但是可拓展性更好（也更推薦這個(gè)方式）。

當(dāng)然我們網(wǎng)頁中除了帶隔板的block元素。也有不帶隔板的inline-block元素和inline等其它元素（具體可以參考display的屬性值列表）。因?yàn)樗鼈儾粠Ц舭?#xff0c;所以通常我們會(huì)把這些元素放到帶隔板的 block元素里再放到置物架上。

這邊看到的是 Webnovel 的詳情頁頂部的地貌樣式。大家可以去網(wǎng)上下載 webdeveloper 這個(gè)插件（chrome 和 firefox 都有）。選中其中的 infomation => display Topographic Information 可以查看任何一個(gè)網(wǎng)頁的盒狀結(jié)構(gòu)。這個(gè)工具能幫助設(shè)計(jì)師，快速的進(jìn)行布局方向上的視覺走查。

對(duì)于像table，flex，grid布局，原理是相通的。簡單的說，是它們擁有比浮動(dòng)更穩(wěn)定和靈活的3D網(wǎng)狀支架。

總結(jié)

如果你的網(wǎng)頁中所有的元素都是通過定位布局的話，那么這個(gè)網(wǎng)頁的物理規(guī)律，就幾乎和我們?cè)O(shè)計(jì)工具中的布局方式一樣了。而這是也是為啥 sketch 中 measure 插件能夠?qū)С鲆环莺驮O(shè)計(jì)稿一摸一樣的網(wǎng)頁原型稿。可是我們大多數(shù)的網(wǎng)頁更傾向于文檔流的模式，所以我們又得靠程序員去再實(shí)現(xiàn)一份流的版本。

設(shè)計(jì)工具中雖然有打組這個(gè)功能，但是卻沒有我們網(wǎng)頁中盒子力的關(guān)系。但是在我們前端程序員眼中，又恰恰是萬物都是盒子。用一個(gè)連盒子概念都沒有的工具，去設(shè)計(jì)一個(gè)全是盒子的世界，可想而知這個(gè)難度。

當(dāng)然現(xiàn)在也有很多設(shè)計(jì)工具引入了盒子這個(gè)概念。但是你給繡房姑娘一把殺豬刀，這也不是那么容易掌握的概念。但我相信人工 AI 的介入，能夠打破這個(gè)次元，設(shè)計(jì)稿直接就是原型稿的時(shí)刻終會(huì)到來，那也正是我們切圖仔的下崗之時(shí)。

注意： 文中的概念只是為了方便大家理解 CSS 布局的一種引喻手法，并不代表網(wǎng)頁中實(shí)際的邏輯。

BTW 我們招人"偏體驗(yàn)前端",要求點(diǎn)這里。

轉(zhuǎn)載于:https://juejin.im/post/5cb1d56af265da03ba0e1ceb

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。