常見(jiàn)的頁(yè)面布局
作為一個(gè)像我這樣的切圖仔前端而言姐军，拿到設(shè)計(jì)圖的第一步就是要分析設(shè)計(jì)圖大致地劃分區(qū)域党瓮，然后選擇一種最合理的倚舀，結(jié)構(gòu)清晰的布局裙品。下面我先根據(jù)一些典型的網(wǎng)站案例列舉一下幾種常見(jiàn)的頁(yè)面布局。
1. T形布局
這個(gè)是我們比較常見(jiàn)的布局牲剃，其頁(yè)面的頂部一般放置橫網(wǎng)站的標(biāo)志或Banner廣告遣疯，下方左側(cè)是導(dǎo)航欄菜單，下方右側(cè)則用于放置網(wǎng)頁(yè)正文等主要內(nèi)容凿傅。
缠犀。由于網(wǎng)頁(yè)太長(zhǎng)了。聪舒。沒(méi)有截取底部辨液。
2. 三欄型布局
國(guó)字型布局下最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來(lái)是網(wǎng)站的主要內(nèi)寄箱残，左右分列一些小條內(nèi)容滔迈，中問(wèn)是主要部分，與左右一起羅列到底被辑，最下方是網(wǎng)站的一些基本信息燎悍、聯(lián)系方式、版權(quán)聲明等
3. POP布局
POP布局指頁(yè)面布局像一張宣傳海報(bào)盼理，以一張精美圖片作為頁(yè)面的設(shè)計(jì)中心谈山。常用于時(shí)尚類(lèi)站點(diǎn)。優(yōu)點(diǎn)顯而易見(jiàn)：漂亮吸引人宏怔。缺點(diǎn)就是速度慢奏路。人大的主頁(yè)就類(lèi)似這種布局。
4.左右布局型
顧名思義臊诊，就是網(wǎng)頁(yè)主體分為左右兩大塊鸽粉，多見(jiàn)為后臺(tái)管理系統(tǒng)頁(yè)面。一般左右布局型的頁(yè)面需要做到兩列等高抓艳。
5. 上下布局型
參見(jiàn)蘋(píng)果的官網(wǎng)触机，類(lèi)似于整屏顯示的網(wǎng)頁(yè)都為上下布局。
如何實(shí)現(xiàn)——常見(jiàn)的布局方法
關(guān)于布局的類(lèi)型就先說(shuō)這么多，下面來(lái)總結(jié)一下上述的布局怎么來(lái)實(shí)現(xiàn)儡首。下面提一下大家應(yīng)該都很熟悉的兩大布局方法销斟。圣杯布局和雙飛燕布局。其實(shí)這兩種方法一般多用三行三列布局椒舵。進(jìn)行相應(yīng)的改造也可以用在T字型布局上蚂踊。用這兩種方法可以很好地解決主體部分優(yōu)先加載的問(wèn)題。
1. 圣杯布局
<style type="text/css">
#main {
overflow: hidden; /*修整由子元素浮動(dòng)引起的高度塌陷問(wèn)題*/
zoom: 1;/*低版本ie下:觸發(fā)haslayout屬性,修整由子元素浮動(dòng)引起的高度塌陷問(wèn)題*/
/*將主體部分左右側(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>
相關(guān)解釋如下：
(1)中間部分需要根據(jù)瀏覽器寬度的變化而變化犁钟，所以要用100%，這里設(shè)左中右向左浮動(dòng)泼橘，因?yàn)橹虚g100%涝动，左層和右層根本沒(méi)有位置上去
(2)把左層margin負(fù)100后，發(fā)現(xiàn)left上去了炬灭，因?yàn)樨?fù)到出窗口沒(méi)位置了醋粟，只能往上挪
(3)按第二步這個(gè)方法，可以得出它只要挪動(dòng)窗口寬度那么寬就能到最左邊了重归，利用負(fù)邊距米愿，把左右欄定位
(4)但由于左右欄遮擋住了中間部分，于是采用相對(duì)定位方法鼻吮，各自相對(duì)于自己把自己挪出去育苟，得到最終結(jié)果
2. 雙飛翼布局
<style>
#main {overflow: hidden;zoom: 1;}/*這里不需要加padding了*/
.m_content, .m_leftside, .m_rightside {float: left;}
.m_content {width: 100%;}
/*用左右邊距將左右邊欄的位置預(yù)留出來(lái)*/
.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">
<!--正真的主體開(kāi)始-->
<div class="m_c_wrap">這里是主體</div>
</div>
<div class="m_leftside">這是左側(cè)邊欄</div>
<div class="m_rightside">這是右側(cè)邊欄</div>
</div>
圣杯布局實(shí)際看起來(lái)是復(fù)雜的后期維護(hù)性也不是很高，在淘寶UED的探討下椎木，出來(lái)了一種新的布局方式就是雙飛翼布局违柏，代碼如上。增加多一個(gè)父級(jí)div就可以不用相對(duì)布局了香椎，只用到了浮動(dòng)和負(fù)邊距漱竖。
3. 多欄等高布局
這里詳細(xì)總結(jié)了等高布局的 八大方法，我再談?wù)剬?shí)際項(xiàng)目中比較常用的畜伐，或者說(shuō)比較簡(jiǎn)單的三種方法馍惹。
- table布局
只需要將需要等高的若干欄設(shè)置display屬性為table-cell；若其中一列希望是自適應(yīng)寬度烤礁，還需將父元素的display設(shè)置成table讼积，width為100%肥照。
代碼如下：
<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>
- padding補(bǔ)白
這是前不久在網(wǎng)上看到的一種辦法脚仔，實(shí)質(zhì)就是為欄目添加一個(gè)足夠大的padding-bottom值，將欄目撐開(kāi)舆绎，然后再添加相同大小的負(fù)的margin-bottom值將內(nèi)容移動(dòng)回來(lái)鲤脏。注意要在負(fù)盒子上加上overflow: hidden的屬性。
代碼如下：
<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>
其實(shí)發(fā)現(xiàn)這不過(guò)是BFC中的幾個(gè)情況而已。更多關(guān)于BFC的請(qǐng)移步：
FLEX布局
Flex 是 Flexible Box 的縮寫(xiě)猎醇，意為"彈性布局"窥突，用來(lái)為盒狀模型提供最大的靈活性。
flex布局的基本思想是通過(guò)flex容器來(lái)伸縮控制子項(xiàng)目的寬度和高度硫嘶，以此來(lái)完全填充flex容器的可用空間阻问。子項(xiàng)目的寬高、排列方式等都是通過(guò)設(shè)置相關(guān)屬性改變的沦疾。那么以這種方式布局上述幾種布局就簡(jiǎn)單多了称近。子項(xiàng)目默認(rèn)的排列方式與浮動(dòng)布局略為相似。
flex容器的定義方式：
div{display:flex}
flex容器分為主軸和側(cè)軸哮塞。主軸決定容器子項(xiàng)的排列方向刨秆。側(cè)軸與主軸相互垂直。主軸可有垂直和水平兩個(gè)方向忆畅。
flex容器可對(duì)子項(xiàng)進(jìn)行的操控有：（即設(shè)置在容器的屬性衡未。這個(gè)很重要！）
子項(xiàng)目的排列方向（也就是剛剛說(shuō)的定義主軸）—— 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
下面來(lái)看看每一個(gè)屬性的取值和實(shí)現(xiàn)效果
flex-direction：
div{ flex-direction: row /*水平排列缓醋，默認(rèn)*/
<row-reverse> /*水平排列，但子項(xiàng)目從右側(cè)開(kāi)始排列*/
<column> /*垂直排列*/
<column-reverse>; /*垂直排列绊诲，但子項(xiàng)目從下側(cè)開(kāi)始排列*/ }
測(cè)試中我令flex容器的寬度為100px改衩，高為200px，定義了5個(gè)未定義寬高的子項(xiàng)目驯镊，演示了上述的四種排列情況葫督。效果：
這里需要說(shuō)明的是：在未定義子項(xiàng)目的伸縮方式時(shí)，默認(rèn)是按子項(xiàng)目本身大小渲染的板惑。
flex-wrap
div{ flex-direction: nowrap /*當(dāng)子項(xiàng)目在主軸上的總跨度大于主軸長(zhǎng)度時(shí)橄镜，不進(jìn)行換行，而是縮小每個(gè)子項(xiàng)目的跨度冯乘。默認(rèn)*/
<wrap> /*---同上---進(jìn)行換行顯示*/
<wrap-reverse> /*從側(cè)軸的末端進(jìn)行換行（在主軸的排列方向不變）洽胶。實(shí)際不常用*/ }
測(cè)試中我定義了每個(gè)子項(xiàng)目的寬度為30px，flex容器還是原來(lái)的100px寬裆馒。效果：
由于這里設(shè)定的是子項(xiàng)目寬度姊氓，所以對(duì)于主軸為垂直方向的容器子項(xiàng)沒(méi)什么影響。
flex-flow
div{ flex-flow: <flex-direction> || <flex-wrap>;
/*就是上述兩個(gè)屬性的結(jié)合簡(jiǎn)寫(xiě) 默認(rèn)：flex-flow：row nowrap*/ }
justify-content
div{ justify-content: flex-start /*以項(xiàng)目開(kāi)始進(jìn)行排列的那端進(jìn)行對(duì)齊喷好，默認(rèn)左對(duì)齊*/
<flex-end> /*以項(xiàng)目結(jié)束排列的那端進(jìn)行對(duì)齊翔横，默認(rèn)右對(duì)齊*/
<center> /*居中對(duì)齊，默認(rèn)水平居中*/
<space-between> /*兩端對(duì)齊且項(xiàng)目之間的間隔都相等（貼邊顯示）*/
<space-around> /*第一個(gè)元素前的空間以及最后一個(gè)元素后的空間為其他空白空間的一半下平均分布*/}
測(cè)試時(shí)我設(shè)定了flex容器寬高都為200px梗搅，子項(xiàng)沒(méi)有設(shè)定寬高禾唁。 效果：
主軸為水平方向時(shí)：
主軸為水平垂直時(shí)：
align-items
div{ align-items: flex-start /*側(cè)軸起始點(diǎn)對(duì)齊*/
<flex-end> /*側(cè)軸終止點(diǎn)對(duì)齊*/
<center> /*側(cè)軸中點(diǎn)點(diǎn)對(duì)齊*/
<baseline> /*項(xiàng)目的第一行文字的基線對(duì)齊*/
<stretch> /*默認(rèn)值效览，如果項(xiàng)目未設(shè)定寬（高度），則占滿整個(gè)容器側(cè)軸跨度*/ }
最后的baseline看起來(lái)跟flex-start沒(méi)啥區(qū)別荡短，因?yàn)槲医o每個(gè)子項(xiàng)設(shè)置高度丐枉。設(shè)置高度后：
align-content
div{ align-content: flex-start /*與側(cè)軸起始點(diǎn)對(duì)齊*/
<flex-end> /*與側(cè)軸終止點(diǎn)對(duì)齊*/
<center> /*與側(cè)軸中點(diǎn)點(diǎn)對(duì)齊*/
<space-between> /*與側(cè)軸兩端對(duì)齊，各子項(xiàng)在各軸上的間距相等*/
<space-around> /*各子項(xiàng)在各軸上的間距相等掘托，項(xiàng)目間距比邊距間距大一倍*/
<stretch>/*項(xiàng)目占滿整個(gè)側(cè)軸*/ }
上面已提到過(guò)瘦锹，對(duì)于單軸線的子項(xiàng)來(lái)說(shuō)，本屬性不起作用闪盔。但是默認(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
數(shù)值越大族淮，排列越靠后辫红。默認(rèn)為0 - 子項(xiàng)目的放大比例 ——
flex-grow
默認(rèn)為0，即如果主軸上有剩余空間祝辣，也不放大子項(xiàng)贴妻。 - 子項(xiàng)目的縮小比例 ——
flex-shrink
默認(rèn)為1，即如果主軸空間不足蝙斜，即縮小子項(xiàng)名惩。 - 設(shè)置子項(xiàng)在主軸上的跨度，簡(jiǎn)單地說(shuō)就是設(shè)置寬高孕荠∶漯模——
flex-basis - 同時(shí)設(shè)定前三者 ——
flex - 設(shè)定單個(gè)項(xiàng)目其自身在側(cè)軸的對(duì)齊方式 ——
align-self
那么分別來(lái)看看每個(gè)屬性的取值和實(shí)現(xiàn)效果
order利用這個(gè)屬性可以解決某個(gè)區(qū)塊優(yōu)先加載但是在頁(yè)面上的顯示較靠后的問(wèn)題。
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)多一倍呼寸。
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í)，前者不縮小义郑。
div .item {flex-shrink:<number>}
我給每個(gè)子項(xiàng)設(shè)定了200px的寬度蝶柿，而flex容器寬度為500px，這時(shí)候若不設(shè)置flex-shrink非驮，則每個(gè)項(xiàng)目都會(huì)以相同比例縮小自身大小來(lái)適應(yīng)容器交汤。此時(shí)我給第二個(gè)項(xiàng)目設(shè)置了flex-shrink: 0;
該項(xiàng)目大小不變。
flex-basis這個(gè)屬性設(shè)置子項(xiàng)在主軸上的跨度劫笙，簡(jiǎn)單地說(shuō)就是設(shè)置寬高芙扎。
div .item {flex-basis:<length> | auto/*auto是默認(rèn)值，就是項(xiàng)目本身大小*/}
flex這個(gè)就是把flex-grow填大、flew-shrink戒洼、flex-basis結(jié)合一起的寫(xiě)法啦=。=
div .item {flex:none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}
flex-grow必須允华。默認(rèn)為0 1 auto圈浇。
align-self這個(gè)屬性用來(lái)單獨(dú)設(shè)定某個(gè)子項(xiàng)目在側(cè)軸的對(duì)齊方式。
div .item {align-self:flex-start|flex-end|center|baseline|stretch}
有關(guān)flex布局的方法就總結(jié)和介紹到這里了靴寂。有興趣看可以看一下下面大大們寫(xiě)的相關(guān)方面的文章磷蜀。Flex布局教程——阮一峰 傳送門(mén)A Complete Guide to Flexbox 傳送門(mén)2一個(gè)完整的Flexbox指南 傳送門(mén)3
栗子(利用flex進(jìn)行上述幾種布局實(shí)現(xiàn))
下邊把利用flex布局實(shí)現(xiàn)上述幾種布局的代碼貼出來(lái)（可有多種實(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>
國(guó)字型布局
<!--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>
grid布局
grid布局是W3C提出的一個(gè)二維布局系統(tǒng)百炬，通過(guò) display: grid 來(lái)設(shè)置使用褐隆，對(duì)于以前一些復(fù)雜的布局能夠得到更簡(jiǎn)單的解決。本篇文章通過(guò)幾個(gè)布局來(lái)對(duì)對(duì)grid布局進(jìn)行一個(gè)簡(jiǎn)單的了解剖踊。目前,grid僅僅只有Edge使用前綴能夠支持庶弃，為了更好地體驗(yàn)，可以使用 Chrome 瀏覽器德澈，在chrome://flags開(kāi)啟#enable-experimental-web-platform-features`選項(xiàng)虫埂。另外，更多的例子可以前往 Grid by examples, 更多的用法可以前往 W3 Specification,也可以前往 A Complete Guide to Grid
