您好,登錄后才能下訂單哦!
這篇文章給大家介紹CSS3中新布局的方法有哪些,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
一、常見的頁面布局
在拿到設(shè)計(jì)稿時(shí),作為一個(gè)前端人員,我們首先會(huì)做的應(yīng)該是為設(shè)計(jì)圖大致地劃分區(qū)域,然后選擇一種最合理的,結(jié)構(gòu)清晰的布局。下面我先根據(jù)一些典型的網(wǎng)站案例列舉一下幾種常見的頁面布局。
1、T型布局
這個(gè)是我們比較常見的布局,其頁面的頂部一般放置橫網(wǎng)站的標(biāo)志或Banner廣告,下方左側(cè)是導(dǎo)航欄菜單,下方右側(cè)則用于放置網(wǎng)頁正文等主要內(nèi)容。
Segmentfault的主頁就是T型布局的。由于網(wǎng)頁太長了,沒有截取底部。
2、國字型布局
國字型布局下最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條,接下來是網(wǎng)站的主要內(nèi)寄,左右分列一些小條內(nèi)容,中問是主要部分,與左右一起羅列到底,最下方是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。
案例圖片來自騰訊11年的一道前段筆試題,有興趣的同學(xué)可以去看一下。2011騰訊前端面試稿
3、POP布局
POP布局指頁面布局像一張宣傳海報(bào),以一張精美圖片作為頁面的設(shè)計(jì)中心。常用于時(shí)尚類站點(diǎn)。優(yōu)點(diǎn)顯而易見:漂亮吸引人。缺點(diǎn)就是速度慢。
人大的主頁就類似這種布局。
4、左右布局型
顧名思義,就是網(wǎng)頁主體分為左右兩大塊,多見為后臺(tái)管理系統(tǒng)頁面。一般左右布局型的頁面需要做到兩列等高。
如:
5、上下布局型
參見蘋果的官網(wǎng),類似于整屏顯示的網(wǎng)頁都為上下布局。
二、如何實(shí)現(xiàn)——常見的布局方法
關(guān)于布局的類型就先說這么多,下面來總結(jié)一下上述的布局怎么來實(shí)現(xiàn)。下面提一下大家應(yīng)該都很熟悉的兩大布局方法。圣杯布局和雙飛燕布局。其實(shí)這兩種方法一般多用國字型布局上。就是針對(duì)三行三列布局的。進(jìn)行相應(yīng)的改造也可以用在T字型布局上。用這兩種方法可以很好地解決主體部分優(yōu)先加載的問題。
1、圣杯布局
基礎(chǔ)布局:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
重點(diǎn)來看main部分的代碼
CSS Code復(fù)制內(nèi)容到剪貼板
<style type="text/css">
#main {
overflow: hidden; /*修整由子元素浮動(dòng)引起的高度塌陷問題*/
zoom: 1;/*低版本ie下:觸發(fā)haslayout屬性,修整由子元素浮動(dòng)引起的高度塌陷問題*/
/*將主體部分左右側(cè)預(yù)留出左右邊欄大小的空白位置*/
padding: 0 300px 0 220px;
}
.m_content, .m_leftside, .m_rightside {
float: left;
/*目的是將左右側(cè)邊欄拉回*/
position: relative;
}
.m_content {
width: 100%;
}
.m_leftside {
width: 220px;
/*由于m_content占據(jù)了100%空間,所以需要用負(fù)的margin值將左邊欄拉回*/
margin-left: -100%;
/*將主體部分預(yù)留的左側(cè)補(bǔ)白區(qū)域填充滿*/
left: -220px;
}
.m_rightside {
width: 300px;
/*用負(fù)的margin值將右邊欄拉回自身大小個(gè)像素單位*/
margin-left: -300px;
/*將主體部分預(yù)留的右側(cè)補(bǔ)白區(qū)域填充滿*/
left: 300px;
}
</style>
<div id="main">
<div class="m_content">這里是主體</div>
<div class="m_leftside">這是左側(cè)邊欄</div>
<div class="m_rightside">這是右側(cè)邊欄</div>
</div>
以上就是圣杯布局方法,基本思路是運(yùn)用浮動(dòng)加定位的方法,缺點(diǎn)是代碼較復(fù)雜,不能模擬三欄等高效果。
2、雙飛燕布局
布局的效果跟圣杯的一樣,代碼有所不同。雙飛燕布局的代碼更加簡(jiǎn)單,只是多加了一個(gè)div用來布局。
基礎(chǔ)布局部分代碼一樣。
main部分:
CSS Code復(fù)制內(nèi)容到剪貼板
<style>
#main {overflow: hidden;zoom: 1;}/*這里不需要加padding了*/
.m_content, .m_leftside, .m_rightside {float: left;}
.m_content {width: 100%;}
/*用左右邊距將左右邊欄的位置預(yù)留出來*/
.m_c_wrap {margin-left: 220px;margin-right:300px;}
.m_leftside {width: 220px;margin-left: -100%;}
.m_rightside {width: 300px;margin-left: -300px;}
</style>
<div id="main">
<div class="m_content">
<!--正真的主體開始-->
<div class="m_c_wrap">這里是主體</div>
</div>
<div class="m_leftside">這是左側(cè)邊欄</div>
<div class="m_rightside">這是右側(cè)邊欄</div>
</div>
了解了以上兩種布局的方法后,很多布局都能寫得得心應(yīng)手了。但是應(yīng)對(duì)多欄等高布局還有點(diǎn)欠缺。那么現(xiàn)在來談?wù)劧鄼诘雀卟季值姆椒ā?/p>
3、多欄等高布局
這里詳細(xì)總結(jié)了等高布局的八大方法 Click,我再談?wù)剬?shí)際項(xiàng)目中比較常用的,或者說比較簡(jiǎn)單的三種方法。
圖片模擬
比如我們需要做一個(gè)上圖的布局,那么需要截取這樣一個(gè)側(cè)邊的小圖片對(duì)側(cè)邊和內(nèi)容部分包裹的元素進(jìn)行背景平鋪,用來模擬出側(cè)邊欄的高度跟內(nèi)容高度一致的視覺效果。
4、table布局
只需要將需要等高的若干欄設(shè)置display屬性為table-cell;若其中一列希望是自適應(yīng)寬度,還需將父元素的display設(shè)置成table,width為100%。
代碼如下:
CSS Code復(fù)制內(nèi)容到剪貼板
<style>
#main {display: table;width: 100%}
.m_content {display: table-cell;width: auto;}
.m_rightside {display: table-cell;width: 200px;}
</style>
<div id="main">
<div class="m_content"></div>
<div class="m_rightside"></div>
</div>
5、padding補(bǔ)白
這是前不久在網(wǎng)上看到的一種辦法,實(shí)質(zhì)就是為欄目添加一個(gè)足夠大的padding-bottom值,將欄目撐開,然后再添加相同大小的負(fù)的margin-bottom值將內(nèi)容移動(dòng)回來。注意要在負(fù)盒子上加上overflow: hidden的屬性。
代碼如下:
CSS Code復(fù)制內(nèi)容到剪貼板
<style>
#main {width: 100%;overflow: hidden;}
.m_content {width: auto;float:left;}
.m_rightside {width: 200px;padding-bottom: 10000px;margin-bottom: 10000px;float:left;}
</style>
<div id="main">
<div class="m_content"></div>
<div class="m_rightside"></div>
</div>
CSS2的布局方法總結(jié)得到這里就告一段落了?,F(xiàn)在來看看CSS3新增的布局方法。
一、Flex布局
因?yàn)闀嫔系慕忉尡容^抽象,我這里就盡量說得簡(jiǎn)單通俗一點(diǎn)。
要進(jìn)行flex布局,需要定義一個(gè)flex容器,然后再處理其子項(xiàng)目。只要一個(gè)容器被定義為flex容器,那么其子元素都稱作它的子項(xiàng)目。
flex布局的基本思想是通過flex容器來伸縮控制子項(xiàng)目的寬度和高度,以此來完全填充flex容器的可用空間。子項(xiàng)目的寬高、排列方式等都是通過設(shè)置相關(guān)屬性改變的。那么以這種方式布局上述幾種布局就簡(jiǎn)單多了。子項(xiàng)目默認(rèn)的排列方式與浮動(dòng)布局略為相似。
1、Flex容器
flex容器的定義方式:
CSS Code復(fù)制內(nèi)容到剪貼板
div{display:flex}
flex容器分為主軸和側(cè)軸。主軸決定容器子項(xiàng)的排列方向。側(cè)軸與主軸相互垂直。主軸可有垂直和水平兩個(gè)方向。
flex容器可對(duì)子項(xiàng)進(jìn)行的操控有:(即設(shè)置在容器的屬性。這個(gè)很重要!)
子項(xiàng)目的排列方向(也就是剛剛說的定義主軸)—— flex-direction
子項(xiàng)目的換行方式(就是超出flex容器跨度時(shí)換不換行=。=怎么換) —— flex-wrap
同時(shí)進(jìn)行子項(xiàng)目排列方向和換行方式的設(shè)定 —— flex-flow
子項(xiàng)目在主軸的對(duì)齊方式(想象成文字的對(duì)齊方式就容易理解了) —— justify-content
子項(xiàng)目在側(cè)軸的對(duì)齊方式 —— align-items
同時(shí)進(jìn)行子項(xiàng)目主軸和側(cè)軸對(duì)齊方式的設(shè)定 —— align-content
下面來看看每一個(gè)屬性的取值和實(shí)現(xiàn)效果
flex-direction:
CSS Code復(fù)制內(nèi)容到剪貼板
div{
flex-direction: row /*水平排列,默認(rèn)*/
<row-reverse> /*水平排列,但子項(xiàng)目從右側(cè)開始排列*/
<column> /*垂直排列*/
<column-reverse>; /*垂直排列,但子項(xiàng)目從下側(cè)開始排列*/
}
測(cè)試中我令flex容器的寬度為100px,高為200px,定義了5個(gè)未定義寬高的子項(xiàng)目,演示了上述的四種排列情況。效果:
這里需要說明的是:在未定義子項(xiàng)目的伸縮方式時(shí),默認(rèn)是按子項(xiàng)目本身大小渲染的。
flex-wrap
CSS Code復(fù)制內(nèi)容到剪貼板
div{
flex-direction: nowrap
/*當(dāng)子項(xiàng)目在主軸上的總跨度大于主軸長度時(shí),不進(jìn)行換行,而是縮小每個(gè)子項(xiàng)目的跨度。默認(rèn)*/
<wrap> /*---同上---進(jìn)行換行顯示*/
<wrap-reverse> /*從側(cè)軸的末端進(jìn)行換行(在主軸的排列方向不變)。實(shí)際不常用*/
}
測(cè)試中我定義了每個(gè)子項(xiàng)目的寬度為30px,flex容器還是原來的100px寬。效果:
由于這里設(shè)定的是子項(xiàng)目寬度,所以對(duì)于主軸為垂直方向的容器子項(xiàng)沒什么影響。
flex-flow
CSS Code復(fù)制內(nèi)容到剪貼板
div{
flex-flow: <flex-direction> || <flex-wrap>;
/*就是上述兩個(gè)屬性的結(jié)合簡(jiǎn)寫 默認(rèn):flex-flow:row nowrap*/
}
justify-content
CSS Code復(fù)制內(nèi)容到剪貼板
div{
justify-content: flex-start /*以項(xiàng)目開始進(jìn)行排列的那端進(jìn)行對(duì)齊,默認(rèn)左對(duì)齊*/
<flex-end> /*以項(xiàng)目結(jié)束排列的那端進(jìn)行對(duì)齊,默認(rèn)右對(duì)齊*/
<center> /*居中對(duì)齊,默認(rèn)水平居中*/
/*兩端對(duì)齊且項(xiàng)目之間的間隔都相等(貼邊顯示)*/
<space-between>
/*第一個(gè)元素前的空間以及最后一個(gè)元素后的空間為其他空白空間的一半下平均分布*/
<space-around>
}
測(cè)試時(shí)我設(shè)定了flex容器寬高都為200px,子項(xiàng)沒有設(shè)定寬高。 效果:
主軸為水平方向時(shí):
主軸為水平垂直時(shí):
align-items
CSS Code復(fù)制內(nèi)容到剪貼板
div{
align-items: flex-start /*側(cè)軸起始點(diǎn)對(duì)齊*/
<flex-end> /*側(cè)軸終止點(diǎn)對(duì)齊*/
<center> /*側(cè)軸中點(diǎn)點(diǎn)對(duì)齊*/
/*項(xiàng)目的第一行文字的基線對(duì)齊*/
<baselinebaseline>
/*默認(rèn)值,如果項(xiàng)目未設(shè)定寬(高度),則占滿整個(gè)容器側(cè)軸跨度*/
<stretch>
}
最后的baseline看起來跟flex-start沒啥區(qū)別,因?yàn)槲医o每個(gè)子項(xiàng)設(shè)置高度。設(shè)置高度后:
align-content
CSS Code復(fù)制內(nèi)容到剪貼板
div{
align-content: flex-start /*與側(cè)軸起始點(diǎn)對(duì)齊*/
<flex-end> /*與側(cè)軸終止點(diǎn)對(duì)齊*/
<center> /*與側(cè)軸中點(diǎn)點(diǎn)對(duì)齊*/
/*與側(cè)軸兩端對(duì)齊,各子項(xiàng)在各軸上的間距相等*/
<space-between>
/*各子項(xiàng)在各軸上的間距相等,項(xiàng)目間距比邊距間距大一倍*/
<space-around>
/*項(xiàng)目占滿整個(gè)側(cè)軸*/
<stretch>
}
上面已提到過,對(duì)于單軸線的子項(xiàng)來說,本屬性不起作用。但是默認(rèn)情況下是只有子項(xiàng)目是一根軸線的(flex-wrap默認(rèn)是nowrap),所以要使這個(gè)屬性看到效果,必須設(shè)置flex-wrap。
已下是flex-wrap為wrap的幾種情況。
子項(xiàng)
以下這些屬性設(shè)置在子項(xiàng)上。
子項(xiàng)自身的操控有:
子項(xiàng)目的排列順序 —— order
子項(xiàng)目的放大比例 —— flex-grow
默認(rèn)為0,即如果主軸上有剩余空間,也不放大子項(xiàng)。
子項(xiàng)目的縮小比例 —— flex-shrink
默認(rèn)為1,即如果主軸空間不足,即縮小子項(xiàng)。
同時(shí)設(shè)定前三者 —— flex
設(shè)定單個(gè)項(xiàng)目其自身在側(cè)軸的對(duì)齊方式 —— align-self
那么分別來看看每個(gè)屬性的取值和實(shí)現(xiàn)效果()
order
利用這個(gè)屬性可以解決某個(gè)區(qū)塊優(yōu)先加載但是在頁面上的顯示較靠后的問題。
CSS Code復(fù)制內(nèi)容到剪貼板
div .item {order:<integer>}
/*數(shù)值越大,排列越靠后。默認(rèn)為0*/
這里我設(shè)置了第一個(gè)子項(xiàng)的order為1。
flex-grow
如果所有項(xiàng)目的flex-grow屬性都為1,則它們將等分剩余空間(如果有的話)。如果一個(gè)項(xiàng)目的flex-grow屬性為2,其他項(xiàng)目都為1,則前者占據(jù)的空間將比其他項(xiàng)多一倍。
CSS Code復(fù)制內(nèi)容到剪貼板
div .item {flex-grow:<number>}
設(shè)置flex-grow前:
設(shè)置后:
第二個(gè)項(xiàng)目的flex-grow為2,其他為0:
<注意這個(gè)時(shí)候就不需要給子項(xiàng)設(shè)置寬度了>
flex-shrink
如果所有項(xiàng)目的flex-shrink屬性都為1,當(dāng)空間不足時(shí),都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0,其他項(xiàng)目都為1,則空間不足時(shí),前者不縮小。
CSS Code復(fù)制內(nèi)容到剪貼板
div .item {flex-shrink:<number>}
我給每個(gè)子項(xiàng)設(shè)定了200px的寬度,而flex容器寬度為500px,這時(shí)候若不設(shè)置flex-shrink,則每個(gè)項(xiàng)目都會(huì)以相同比例縮小自身大小來適應(yīng)容器。
此時(shí)我給第二個(gè)項(xiàng)目設(shè)置了flex-shrink: 0; 該項(xiàng)目大小不變。
flex-basis
這個(gè)屬性設(shè)置子項(xiàng)在主軸上的跨度,簡(jiǎn)單地說就是設(shè)置寬高。
CSS Code復(fù)制內(nèi)容到剪貼板
div .item {flex-basis:<length> | auto/*auto是默認(rèn)值,就是項(xiàng)目本身大小*/}
flex
這個(gè)就是把flex-grow、flew-shrink、flex-basis結(jié)合一起的寫法啦=。=
CSS Code復(fù)制內(nèi)容到剪貼板
div .item {flex:none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}
flex-grow必須。默認(rèn)為0 1 auto。
align-self
這個(gè)屬性用來單獨(dú)設(shè)定某個(gè)子項(xiàng)目在側(cè)軸的對(duì)齊方式。
CSS Code復(fù)制內(nèi)容到剪貼板
div .item {align-self:flex-start|flex-end|center|baselinebaseline|stretch}
有關(guān)flex布局的方法就總結(jié)和介紹到這里了。
栗子(利用flex進(jìn)行上述幾種布局實(shí)現(xiàn))
下邊把利用flex布局實(shí)現(xiàn)上述幾種布局的代碼貼出來(可有多種實(shí)現(xiàn)方法)。
T布局
<!--css--> <style type="text/css"> *{margin: 0;padding: 0;} header, footer {background: sandybrown;height: 50px;} section {display: flex;align-items: flex-start;height: 500px;} article {order: 1;flex: 3;align-self: stretch;background: wheat;} aside {flex: 1;background: seashell;height: 100px;} </style> <!--html--> <header></header> <section> <article></article> <aside></aside> </section> <footer></footer>
國字型布局
<!--css--> <style type="text/css"> *{margin: 0;padding: 0;} header, footer {background: sandybrown;height: 50px;} section {display: flex;align-items: flex-start;height: 500px;} article {order: 1;flex: 3;align-self: stretch;background: wheat;} aside {flex: 1;background: seashell;height: 100px;} section.sidebar {order: 2;flex: 1;height: 100px;background: seashell;} </style> <!--html--> <header></header> <section> <article></article> <aside></aside> <section class="sidebar"></section> </section> <footer></footer>
等高布局
真心簡(jiǎn)單。
<!--css--> <style type="text/css"> *{margin: 0;padding: 0;} html,body {height: 100%;} section {display: flex;height: 100%;} article {order: 1;flex: 3;background: wheat;} aside {flex: 1;background: seashell;} </style> <!--html--> <header></header> <section> <article></article> <aside></aside> <section class="sidebar"></section> </section> <footer></footer>
關(guān)于CSS3中新布局的方法有哪些就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。