課程內(nèi)容
什么是布局
DIV + CSS宰掉？
固定寬度 VS 彈性布局
單列布局
雙列布局
三列布局
什么是布局
現(xiàn)有樣式不能滿足人們的需求
文檔流
浮動
定位
人們需要：
導(dǎo)航欄+內(nèi)容
導(dǎo)航欄+內(nèi)容+廣告欄
從上到下慌烧、從左到右、定寬、自適應(yīng)...
CSS 2 并沒有提供原生支持驶睦，所以需要將一些屬性組合起來晨炕，以實現(xiàn)布局
“DIV + CSS 布局”？
中國特色歇由，國外一般不這么叫 <div> 是一個無語義的標(biāo)簽仅孩，適合用來做與內(nèi)容無關(guān)的事情 只能用 <div> 嗎？
不一定
盡量使用有語義的標(biāo)簽
常見布局（PC）
固定寬度布局：比如京東首頁印蓖，一般pc端都是
優(yōu)點：簡單辽慕，寬度可以寫死，不管頁面怎么變赦肃，整體的樣式不變
缺點：假如瀏覽器的寬度小于內(nèi)容時溅蛉，會出現(xiàn)滾動條
彈性（fluid）布局：內(nèi)容并不是固定寬度，和頁面的整體寬度有關(guān)他宛，需要用百分比做適配船侧，
缺點：在設(shè)計和實現(xiàn)上都要復(fù)雜些，需要考慮屏幕的不同情況厅各，
優(yōu)點：設(shè)計的好的話镜撩，頁面會很好看。
響應(yīng)式布局 —— 多終端（PC队塘、Pad袁梗、Phone）
如何實現(xiàn)
定寬
width: 1000px; 或 max-width: 1000px;
width：1000px:當(dāng)小于1000的時候有滾動條
max-width: 1000px;當(dāng)小于1000的時候沒有滾動條
水平居中
margin-left: auto; margin-right: auto;
范例：單列布局
范例 注意 max-width和width的區(qū)別
<style>
.layout{
/* width: 960px; */
max-width: 960px;
margin: 0 auto;
}
#header{
height: 60px;
background: red;
}
#content{
height: 400px;
background: blue;
}
#footer{
height: 50px;
background: yellow;
}
</style>
<div class="layout">
<div id="header">頭部</div>
<div id="content">內(nèi)容</div>
<div id="footer">尾部</div>
</div>
進化
省標(biāo)簽，便于控制局部 范例
<style>
.layout{
width: 960px;
margin: 0 auto;
}
#header{
height: 60px;
background: red;
}
#content{
height: 400px;
background: blue;
}
#footer{
height: 50px;
background: yellow;
}
</style>
<div id="header" class="layout">頭部</div>
<div id="content" class="layout">內(nèi)容</div>
<div id="footer" class="layout">尾部</div>
通欄
給通欄加背景色 范例
<style>
.layout{
width: 960px;
margin: 0 auto;
}
#header{
height: 60px;
background: red;
}
#content{
height: 400px;
background: blue;
}
#footer{
height: 50px;
background: yellow;
}
</style>
<div id="header">
<div class="layout">頭部</div>
</div>
<div id="content" class="layout">內(nèi)容</div>
<div id="footer">
<div class="layout">尾部</div>
</div>
通欄優(yōu)化
給 body 設(shè)置min-width 去掉滾動背景色 bug
<style>
.layout{
width: 960px;
margin: 0 auto;
}
body{
min-width: 960px;
}
#header{
height: 60px;
background: red;
}
#content{
height: 400px;
background: blue;
}
#footer{
height: 50px;
background: yellow;
}
</style>
<div id="header">
<div class="layout">頭部</div>
</div>
<div id="content" class="layout">內(nèi)容</div>
<div id="footer">
<div class="layout">尾部</div>
</div>
內(nèi)部元素水平居中
.parent{text-align:center;}
.child{display: inline-block;}
IE 6 不支持 inline-block (為什么用下面的寫法)
.child{*display: inline; *zoom: 1;}
http://js.jirengu.com/yaluqavufi/1/edit
如何實現(xiàn)
浮動元素 + 普通元素margin 范例
<style>
#content:after{
content: '';
display: block;
clear: both;
}
.aside{
width: 200px;
height: 500px;
background: yellow;
float: left;
}
.main{
margin-left: 210px;
height: 400px;
background: red;
}
#footer{
background: #ccc;
}
</style>
<div id="content">
<div class="aside">aside</div>
<div class="main">content</div>
</div>
<div id="footer">footer</div>
如果側(cè)邊欄在右邊呢憔古？
側(cè)邊欄在右
謹記頁面元素的渲染順序 范例
：瀏覽器先讀content遮怜，樣式，然后再讀aside鸿市，樣式锯梁，再讀content
<style>
#content:after{
content: '';
display: block;
clear: both;
}
.aside{
width: 200px;
height: 500px;
background: yellow;
float: right;
}
.main{
margin-right: 210px;
height: 400px;
background: red;
}
#footer{
background: #ccc;
}
</style>
<div id="content">
<div class="aside">aside</div>
<div class="main">content</div>
</div>
<div id="footer">footer</div>
三列布局
兩側(cè)兩列固定寬度，中間列自適應(yīng)寬度
如何實現(xiàn)
范例
#content:after{
content: '';
display: block;
clear: both;
}
.menu{
width: 100px;
height: 500px;
background: pink;
float: left;
}
.aside{
width: 200px;
height: 500px;
background: yellow;
float: right;
}
.main{
margin-left: 110px; /*為什么要加margin-left*/
margin-right: 210px;
height: 400px;
background: red;
}
#footer{
background: #ccc;
}
<div id="content">
<!-- 為什么不是main在前面 -->：
<div class="menu">aside</div>
<div class="aside">aside</div>
<div class="main">content</div>
</div>
<div id="footer">footer</div>
http://js.jirengu.com/jige/edit?html,output
浮動 vs 負margin
水平等距排列
圣杯布局
雙飛翼布局
浮動 vs 負margin
對于相鄰的兩個浮動元素焰情，如果因為空間不夠?qū)е碌诙€浮動元素下移陌凳，可以通過給第二個浮動元素設(shè)置
margin-left: 負值 來讓第二個元素上移，其中 負值 大于等于元素上移后和第一個元素重合的臨界值
三個浮動元素
最后一個浮動元素使用了負邊距
使用了負邊距
范例演示
范例 想想最后一個元素為什么要設(shè)置為 -20px?
.float{
overflow:hidden;
width:280px;
border:dashed 1px orange;
}
.float .item{
width:100px;
height:100px;
float:left;
}
.float .item:nth-child(1){
background:red;
}
.float .item:nth-child(2){
background:grey;
}
.float .item:nth-child(3){
background:blue;
margin-left: -20px; /* 為什么這里是 -20px ??*/
}
</style>
<div class="float">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
水平等距排列
范例
<style>
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
.ct{
overflow:hidden;
width: 640px;
border:dashed 1px orange;
margin: 0 auto;
}
.ct .item{
float:left;
margin-left: 20px;
margin-top: 20px;
width:200px;
height:200px;
background: red;
}
.ct>ul{
margin-left: -20px;
}
</style>
<div class="ct">
<ul>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
</ul>
</div>
http://js.jirengu.com/xute/edit?html,output
圣杯布局
why it?
是三列布局内舟，兩邊固定寬度合敦，中間自適應(yīng)
中間內(nèi)容元素在 dom 元素次序中優(yōu)先位置
實現(xiàn)
按照注釋編號，一行行實現(xiàn)觀察效果 范例
<style>
#content:after{
content: ''; /*8*/
display: block; /*8*/
clear: both; /*8*/
}
#content{
padding-left: 100px; /*5*/
padding-right: 150px; /*5*/
}
.aside, .main, .extra{
float: left; /*2*/
}
.aside{
width: 100px; /*1*/
height: 300px; /*1*/
background: red; /*1*/
margin-left: -100%; /*4*/
position: relative; /*6*/
left: -100px; /*6*/
}
.extra{
width: 150px; /*1*/
height: 300px; /*1*/
background: yellow; /*1*/
margin-left: -150px; /*5*/
position: relative; /*7*/
left: 150px; /*7*/
}
.main{
height: 350px; /*1*/
background: blue; /*1*/
width: 100%; /*3*/
}
</style>
<div id="content">
<div class="main">main</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>
http://js.jirengu.com/poya/1/edit?html,output
缺點
.mian的最小寬度不能小于.aside的寬度
why?：當(dāng)小于的時候會發(fā)生錯亂谒获，.main被擠下去
雙飛翼布局
按照注釋編號蛤肌，一行行實現(xiàn)觀察效果 范例
解決了什么問題?
<style>
#content:after{
content: ''; /*8*/
display: block; /*8*/
clear: both; /*8*/
}
#content{
}
.aside, .main, .extra{
float: left; /*2*/
}
.aside{
width: 100px; /*1*/
height: 300px; /*1*/
background: red; /*1*/
margin-left: -100%; /*4*/
}
.extra{
width: 150px; /*1*/
height: 300px; /*1*/
background: yellow; /*1*/
margin-left: -150px; /*5*/
}
.main{
/* background: blue; */ /*第1步添加壁却，第7步注釋掉*/
/* height: 350px; */ /*第1步添加，第7步注釋掉*/
width: 100%; /*3*/
}
.wrap{
margin-left: 100px; /*6*/
margin-right: 150px; /*6*/
background: blue; /*7*/
height: 350px; /*7*/
}
</style>
<div id="content">
<div class="main">
<div class="wrap">main</div>
</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>
http://js.jirengu.com/casozaraxo/1/edit
