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 我們招人"偏體驗前端",要求點這里。
轉載于:https://juejin.im/post/5cb1d56af265da03ba0e1ceb
總結
以上是生活随笔為你收集整理的CSS 布局与“仓库管理”的关系的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 结队项目之需求分析与原型设计
- 下一篇: 纯CSS无hacks的跨游览器多列布局(