摘要:案例圖片來自騰訊年的一道前段筆試題,有興趣的同學可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報,以一張精美圖片作為頁面的設計中心。
寫在前面
最近看到《圖解CSS3》的布局部分,結合自己以前閱讀過的一些布局方面的知識,這里進行一次基于CSS2、3的各種布局的方法總結。
在拿到設計稿時,作為一個前端人員,我們首先會做的應該是為設計圖大致地劃分區域,然后選擇一種最合理的,結構清晰的布局。下面我先根據一些典型的網站案例列舉一下幾種常見的頁面布局。
T型布局這個是我們比較常見的布局,其頁面的頂部一般放置橫網站的標志或Banner廣告,下方左側是導航欄菜單,下方右側則用于放置網頁正文等主要內容。
Segmentfault的主頁就是T型布局的。由于網頁太長了。。沒有截取底部。
國字型布局下最上面是網站的標題以及橫幅廣告條,接下來是網站的主要內寄,左右分列一些小條內容,中問是主要部分,與左右一起羅列到底,最下方是網站的一些基本信息、聯系方式、版權聲明等。
案例圖片來自騰訊11年的一道前段筆試題,有興趣的同學可以去看一下。2011騰訊前端面試稿
POP布局指頁面布局像一張宣傳海報,以一張精美圖片作為頁面的設計中心。常用于時尚類站點。優點顯而易見:漂亮吸引人。缺點就是速度慢。
人大的主頁就類似這種布局。
顧名思義,就是網頁主體分為左右兩大塊,多見為后臺管理系統頁面。一般左右布局型的頁面需要做到兩列等高。
如:
參見蘋果的官網,類似于整屏顯示的網頁都為上下布局。
如何實現——常見的布局方法關于布局的類型就先說這么多,下面來總結一下上述的布局怎么來實現。下面提一下大家應該都很熟悉的兩大布局方法。圣杯布局和雙飛燕布局。其實這兩種方法一般多用國字型布局上。就是針對三行三列布局的。進行相應的改造也可以用在T字型布局上。用這兩種方法可以很好地解決主體部分優先加載的問題。
圣杯布局基礎布局:
重點來看main部分的代碼
這里是主體這是左側邊欄這是右側邊欄
以上就是圣杯布局方法,基本思路是運用浮動加定位的方法,缺點是代碼較復雜,不能模擬三欄等高效果。
雙飛燕布局布局的效果跟圣杯的一樣,代碼有所不同。雙飛燕布局的代碼更加簡單,只是多加了一個div用來布局。
基礎布局部分代碼一樣。
main部分:
這里是主體這是左側邊欄這是右側邊欄
了解了以上兩種布局的方法后,很多布局都能寫得得心應手了。但是應對多欄等高布局還有點欠缺。那么現在來談談多欄等高布局的方法。
多欄等高布局這里詳細總結了等高布局的八大方法 Click,我再談談實際項目中比較常用的,或者說比較簡單的三種方法。
比如我們需要做一個上圖的布局,那么需要截取這樣一個側邊的小圖片對側邊和內容部分包裹的元素進行背景平鋪,用來模擬出側邊欄的高度跟內容高度一致的視覺效果。
只需要將需要等高的若干欄設置display屬性為table-cell;若其中一列希望是自適應寬度,還需將父元素的display設置成table,width為100%。
代碼如下:
這是前不久在網上看到的一種辦法,實質就是為欄目添加一個足夠大的padding-bottom值,將欄目撐開,然后再添加相同大小的負的margin-bottom值將內容移動回來。注意要在負盒子上加上overflow: hidden的屬性。
代碼如下:
CSS2的布局方法總結得到這里就告一段落了。現在來看看CSS3新增的布局方法。
Flex布局因為書面上的解釋比較抽象,我這里就盡量說得簡單通俗一點。
要進行flex布局,需要定義一個flex容器,然后再處理其子項目。只要一個容器被定義為flex容器,那么其子元素都稱作它的子項目。
Flex容器flex布局的基本思想是通過flex容器來伸縮控制子項目的寬度和高度,以此來完全填充flex容器的可用空間。子項目的寬高、排列方式等都是通過設置相關屬性改變的。那么以這種方式布局上述幾種布局就簡單多了。子項目默認的排列方式與浮動布局略為相似。
flex容器的定義方式:
div{display:flex}
flex容器分為主軸和側軸。主軸決定容器子項的排列方向。側軸與主軸相互垂直。主軸可有垂直和水平兩個方向。
flex容器可對子項進行的操控有:(即設置在容器的屬性。這個很重要!)
子項目的排列方向(也就是剛剛說的定義主軸)—— flex-direction
子項目的換行方式(就是超出flex容器跨度時換不換行=。=怎么換) —— flex-wrap
同時進行子項目排列方向和換行方式的設定 —— flex-flow
子項目在主軸的對齊方式(想象成文字的對齊方式就容易理解了) —— justify-content
子項目在側軸的對齊方式 —— align-items
同時進行子項目主軸和側軸對齊方式的設定 —— align-content
下面來看看每一個屬性的取值和實現效果
flex-direction:
div{ flex-direction: row /*水平排列,默認*//*水平排列,但子項目從右側開始排列*/ /*垂直排列*/ ; /*垂直排列,但子項目從下側開始排列*/ }
測試中我令flex容器的寬度為100px,高為200px,定義了5個未定義寬高的子項目,演示了上述的四種排列情況。效果:
這里需要說明的是:在未定義子項目的伸縮方式時,默認是按子項目本身大小渲染的。
flex-wrap
div{ flex-direction: nowrap /*當子項目在主軸上的總跨度大于主軸長度時,不進行換行,而是縮小每個子項目的跨度。默認*//*---同上---進行換行顯示*/ /*從側軸的末端進行換行(在主軸的排列方向不變)。實際不常用*/ }
測試中我定義了每個子項目的寬度為30px,flex容器還是原來的100px寬。效果:
由于這里設定的是子項目寬度,所以對于主軸為垂直方向的容器子項沒什么影響。
flex-flow
div{ flex-flow:|| ; /*就是上述兩個屬性的結合簡寫 默認:flex-flow:row nowrap*/ }
justify-content
div{ justify-content: flex-start /*以項目開始進行排列的那端進行對齊,默認左對齊*//*以項目結束排列的那端進行對齊,默認右對齊*/ /*居中對齊,默認水平居中*/ /*兩端對齊且項目之間的間隔都相等(貼邊顯示)*/ /*第一個元素前的空間以及最后一個元素后的空間為其他空白空間的一半下平均分布*/ }
測試時我設定了flex容器寬高都為200px,子項沒有設定寬高。 效果:
主軸為水平方向時:
主軸為水平垂直時:
align-items
div{ align-items: flex-start /*側軸起始點對齊*//*側軸終止點對齊*/ /*側軸中點點對齊*/ /*項目的第一行文字的基線對齊*/ /*默認值,如果項目未設定寬(高度),則占滿整個容器側軸跨度*/ }
最后的baseline看起來跟flex-start沒啥區別,因為我給每個子項設置高度。設置高度后:
align-content
div{ align-content: flex-start /*與側軸起始點對齊*//*與側軸終止點對齊*/ /*與側軸中點點對齊*/ /*與側軸兩端對齊,各子項在各軸上的間距相等*/ /*各子項在各軸上的間距相等,項目間距比邊距間距大一倍*/ /*項目占滿整個側軸*/ }
上面已提到過,對于單軸線的子項來說,本屬性不起作用。但是默認情況下是只有子項目是一根軸線的(flex-wrap默認是nowrap),所以要使這個屬性看到效果,必須設置flex-wrap。
已下是flex-wrap為wrap的幾種情況。
以下這些屬性設置在子項上。
子項自身的操控有
子項目的排列順序 —— order
子項目的放大比例 —— flex-grow
默認為0,即如果主軸上有剩余空間,也不放大子項。
子項目的縮小比例 —— flex-shrink
默認為1,即如果主軸空間不足,即縮小子項。
同時設定前三者 —— flex
設定單個項目其自身在側軸的對齊方式 —— align-self
那么分別來看看每個屬性的取值和實現效果()
order
利用這個屬性可以解決某個區塊優先加載但是在頁面上的顯示較靠后的問題。
div .item {order:} /*數值越大,排列越靠后。默認為0*/
這里我設置了第一個子項的order為1。
flex-grow
如果所有項目的flex-grow屬性都為1,則它們將等分剩余空間(如果有的話)。如果一個項目的flex-grow屬性為2,其他項目都為1,則前者占據的空間將比其他項多一倍。
div .item {flex-grow:}
設置flex-grow前:
設置后:
第二個項目的flex-grow為2,其他為0:
<注意這個時候就不需要給子項設置寬度了>
flex-shrink
如果所有項目的flex-shrink屬性都為1,當空間不足時,都將等比例縮小。如果一個項目的flex-shrink屬性為0,其他項目都為1,則空間不足時,前者不縮小。
div .item {flex-shrink:}
我給每個子項設定了200px的寬度,而flex容器寬度為500px,這時候若不設置flex-shrink,則每個項目都會以相同比例縮小自身大小來適應容器。
此時我給第二個項目設置了flex-shrink: 0; 該項目大小不變。
flex-basis
這個屬性設置子項在主軸上的跨度,簡單地說就是設置寬高。
div .item {flex-basis:| auto/*auto是默認值,就是項目本身大小*/}
flex
這個就是把flex-grow、flew-shrink、flex-basis結合一起的寫法啦=。=
div .item {flex:none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]}
flex-grow必須。默認為0 1 auto。
align-self
這個屬性用來多帶帶設定某個子項目在側軸的對齊方式。
div .item {align-self:flex-start|flex-end|center|baseline|stretch}
有關flex布局的方法就總結和介紹到這里了。有興趣看可以看一下下面大大們寫的相關方面的文章。
Flex布局教程——阮一峰 傳送門
A Complete Guide to Flexbox 傳送門2
一個完整的Flexbox指南 傳送門3
下邊把利用flex布局實現上述幾種布局的代碼貼出來(可有多種實現方法)。
T布局
國字型布局
等高布局
真心簡單。
拖了半個多月的博文。。也算是寫完了,感謝大家閱讀。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/111286.html
摘要:案例圖片來自騰訊年的一道前段筆試題,有興趣的同學可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報,以一張精美圖片作為頁面的設計中心。 寫在前面最近看到《圖解CSS3》的布局部分,結合自己以前閱讀過的一些布局方面的知識,這里進行一次基于CSS2、3的各種布局的方法總結。 常見的頁面布局 在拿到設計稿時,作為一個前端人員,我們首先會做的應該是為設計圖大致地劃分區域,然后選擇一...
摘要:錯過一周的優質內容,不要再錯過周一的快速回顧寒潮來得出乎意料,手腳,一遍聽著史詩巨著張士超你到底把我家鑰匙放哪里了,一邊將優質內容進行整理一周咨詢當技術成為一種武器翻譯組一周簡訊跟著輪子哥造輪子基本概念二排版前端名一前端遠程調試德來預加載 錯過一周的優質內容,不要再錯過周一的快速回顧 寒潮來得出乎意料,dong手dong腳,一遍聽著史詩巨著《張士超你到底把我家鑰匙放哪里了》,一邊將優質...
摘要:錯過一周的優質內容,不要再錯過周一的快速回顧寒潮來得出乎意料,手腳,一遍聽著史詩巨著張士超你到底把我家鑰匙放哪里了,一邊將優質內容進行整理一周咨詢當技術成為一種武器翻譯組一周簡訊跟著輪子哥造輪子基本概念二排版前端名一前端遠程調試德來預加載 錯過一周的優質內容,不要再錯過周一的快速回顧 寒潮來得出乎意料,dong手dong腳,一遍聽著史詩巨著《張士超你到底把我家鑰匙放哪里了》,一邊將優質...
摘要:絕對底部前端掘金來自國外的設計達人,純,可以實現當正文內容很少時,底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設計達人,純CSS,可以實現: 當正文內容很少時,底部位于窗口最下面。當改變窗口高度時,不會出現重疊問題。甚至,創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案...
閱讀 1972·2021-11-25 09:43
閱讀 653·2021-10-11 10:58
閱讀 1730·2019-08-30 15:55
閱讀 1725·2019-08-30 13:13
閱讀 736·2019-08-29 17:01
閱讀 1840·2019-08-29 15:30
閱讀 789·2019-08-29 13:49
閱讀 2172·2019-08-29 12:13