1、定位
1.1 靜態(tài)定位
默認(rèn)行為
1.2 相對(duì)定位
position: relative;
如果想為元素設(shè)置層模型中的相對(duì)定位腹殿，需要設(shè)置position:relative（表示相對(duì)定位）旨枯，它通過left蹬昌、right、top攀隔、bottom屬性確定元素在正常文檔流中的偏移位置皂贩。
相對(duì)于以前的位置移動(dòng)，偏移前的位置保留不動(dòng)昆汹。在使用相對(duì)定位時(shí)明刷，就算元素被偏移了，但是他仍然占據(jù)著它沒偏移前的空間满粗。
1.3 絕對(duì)定位
配合使用top辈末，bottom，left和right
被設(shè)置了絕對(duì)定位的元素映皆，在文檔流中是不占據(jù)空間的本冲，如果某元素設(shè)置了絕對(duì)定位，那么它在文檔流中的位置會(huì)被刪除劫扒。
注意：絕對(duì)定位是相對(duì)于設(shè)置有display:relative的祖先元素，如果沒有狸膏，最終會(huì)相對(duì)于<html>元素沟饥。
1.4 固定定位
position:fixed
固定定位元素不會(huì)隨瀏覽器窗口的滾動(dòng)條滾動(dòng)而變化，除非你在屏幕中移動(dòng)瀏覽器窗口的屏幕位置湾戳，或改變?yōu)g覽器窗口的顯示大小贤旷，因此固定定位的元素會(huì)始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置，不會(huì)受文檔流動(dòng)影響砾脑。
1.5 堆疊順序
z-index:1;
z-index值較大的元素將疊加在z-index值較小的元素之上幼驶。對(duì)于未指定此屬性的定位對(duì)象，z-index 值為正數(shù)的對(duì)象會(huì)在其之上韧衣，而 z-index 值為負(fù)數(shù)的對(duì)象在其之下盅藻。z-index屬性適用于定位元素（position屬性值為 relative 或 absolute 或 fixed的對(duì)象），如果元素是沒有定位的畅铭，對(duì)其設(shè)置的z-index會(huì)是無效的氏淑。
查看例子
2、彈性盒子
使用彈性盒子可以方便且靈活地實(shí)現(xiàn)
1）在父內(nèi)容里面垂直居中一個(gè)塊內(nèi)容硕噩。
2）使容器的所有子項(xiàng)占用等量的可用寬度/高度假残，而不管有多少寬度/高度可用。
3）使多列布局中的所有列采用相同的高度炉擅，即使它們包含的內(nèi)容量不同辉懒。
3 阳惹、對(duì)齊方式
3.1 水平居中
1）行內(nèi)元素的水平居中
如果被設(shè)置元素為文本、圖片等行內(nèi)元素時(shí)眶俩，在父元素中設(shè)置text-align:center實(shí)現(xiàn)行內(nèi)元素水平居中莹汤，將子元素的display設(shè)置為inline-block，使子元素變成行內(nèi)元素
2）塊狀元素的水平居中（定寬）
當(dāng)被設(shè)置元素為定寬塊級(jí)元素時(shí)用 text-align：center 就不起作用了仿便√鍐可以通過設(shè)置“左右margin”值為“auto”來實(shí)現(xiàn)居中的。
3）塊狀元素的水平居中（不定定寬）
可以直接給不定寬的塊級(jí)元素設(shè)置text-align：center來實(shí)現(xiàn)嗽仪，也可以給父元素加text-align:center 來實(shí)現(xiàn)居中效果荒勇。當(dāng)不定寬塊級(jí)元素的寬度不要占一行時(shí)，可以設(shè)置display 為 inline 類型或inline-block（設(shè)置為 行內(nèi)元素 顯示或行內(nèi)塊元素）
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
css代碼：
.container{text-align:center;background: beige}
.container ul{list-style:none;margin:0;padding:0;display:inline-block;}
.container li{margin-right:8px;display:inline-block;}
3.2 垂直居中
<div class="wrap line-height">
<span class="span">111111</span>
</div>
首先設(shè)定兩個(gè)條件即父元素是盒子容器且高度已經(jīng)設(shè)定闻坚。
1）子元素是行內(nèi)元素沽翔，高度是由其內(nèi)容撐開的。
這種情況下窿凤，需要通過設(shè)定父元素的line-height為其高度來使得子元素垂直居中：
css代碼：
.wrap{
width:200px ;
height: 300px;
line-height: 300px;
border: 2px solid #ccc;
}
.span{
background: red;
}
2）子元素是塊級(jí)元素但是子元素高度沒有設(shè)定
通過給父元素設(shè)定display:table-cell;vertical-align:middle來解決：
css代碼：
.wrap{
width:200px ;
height: 300px;
border: 2px solid #ccc;
display: table-cell;
vertical-align: middle;
}
.non-height{
background: green;
}
3）子元素是塊級(jí)元素且高度已經(jīng)設(shè)定
計(jì)算子元素的margin-top或margin-bottom仅偎，計(jì)算方法為父(元素高度-子元素高度)/2：
css代碼：
.wrap{
width:200px ;
height: 300px;
border: 2px solid #ccc;
}
.div1{
width:100px ;
height: 100px;
margin-top: 100px;
background: darkblue;
}
3.3 水平垂直居中
1）水平對(duì)齊+行高
text-align + line-height實(shí)現(xiàn)單行文本水平垂直居中
<div class="test" style="background-color: lightblue;width: 200px;">測試文字</div>
css代碼：
.test{
text-align: center;
line-height: 100px;
}
2）水平+垂直對(duì)齊
- text-align + vertical-align
在父元素設(shè)置text-align和vertical-align，并將父元素設(shè)置為table-cell元素雳殊，子元素設(shè)置為inline-block元素橘沥。
<div class="parent" style="background-color: gray; width:200px; height:100px;">
<div class="child" style="background-color: lightblue;">測試文字</div>
</div>
css代碼：
.parent{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child{
display: inline-block;
}
2.若子元素是圖像，可不使用table-cell夯秃，而是其父元素用行高替代高度座咆，且字體大小設(shè)為0。子元素本身設(shè)置vertical-align:middle
<div class="parent" style="background-color: gray; width:200px; ">
<img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">
</div>
css代碼：
.parent{
text-align: center;
line-height: 100px;
font-size: 0;
}
.child{
vertical-align: middle;
}
七種實(shí)現(xiàn)左側(cè)固定仓洼，右側(cè)自適應(yīng)兩欄布局的方法
4介陶、圣杯布局
圣杯布局允許：
）有一個(gè)固定寬度側(cè)邊欄的流體中心，
2）允許中心列首先出現(xiàn)在源代碼中色建，
3）允許任何列成為最高哺呜，
4）只需要一個(gè)額外div的標(biāo)記
5）需要非常簡單的CSS，最少代碼兼容
5箕戳、雙飛翼布局
雙飛翼布局某残，為了中間div內(nèi)容不被遮擋，直接在中間div內(nèi)部創(chuàng)建子div用于放置內(nèi)容漂羊，在該子div里用margin-left和margin-right為左右兩欄div留出位置驾锰。
6、元素的BFC特性與自適應(yīng)布局
BFC：塊級(jí)格式化上下文走越，常見觸發(fā)BFC的條件：
1）float的值不為none椭豫。
2）overflow的值為auto,scroll或hidden。
3）display的值為table-cell, table-caption, inline-block中的任何一個(gè)。
4）position的值不為relative和static赏酥。
自適應(yīng)布局實(shí)現(xiàn)的CSS代碼：
1）overflow:auto/hidden IE7+
2）display:inline-block IE6/IE7
3）display:table-cell IE8+
清除浮動(dòng)的通用類語句：
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: ''; display: table; clear: both;
}
兩欄或多欄自適應(yīng)布局的通用類語句是（block水平標(biāo)簽喳整，需配合浮動(dòng)）：
.cell {
display: table-cell; width: 9999px;
*display: inline-block; *width: auto;
}
網(wǎng)頁寬度自適應(yīng)布局三種方法:
1）絕對(duì)定位法
左右兩欄采用絕對(duì)定位，分別固定于頁面的左右兩側(cè)裸扶，中間的主體欄用左右margin值撐開距離框都。于是實(shí)現(xiàn)了三欄自適應(yīng)布局。
<div id="left"></div>
<div id="main"></div>
<div id="right"></div>
css代碼：
html,body{margin:0; height:100%;}
#left,#right{position:absolute; top:0; width:200px; height:100%;}
#left{left:0; background:#a0b3d6;}
#right{right:0; background:#a0b3d6;}
#main{margin:0 210px; background:#ffe6b8; height:100%;}
2）margin負(fù)值法
首先呵晨，中間的主體要使用雙層標(biāo)簽魏保。外層div寬度100%顯示，并且浮動(dòng)（例子為左浮動(dòng)）摸屠，內(nèi)層div為真正的主體內(nèi)容谓罗，含有左右210像素的margin值。左欄與右欄都是采用margin負(fù)值定位的季二，左欄左浮動(dòng)檩咱，margin-left為-100%，由于前面的div寬度100%與瀏覽器胯舷，所以這里的-100% margin值正好使左欄div定位到了頁面的左側(cè)刻蚯；右側(cè)欄也是左浮動(dòng)，其margin-left也是負(fù)值桑嘶，大小為其本身的寬度即200像素炊汹。
<div id="main">
<div id="body"></div>
</div>
<div id="left"></div>
<div id="right"></div>
css代碼：
html,body{margin:0; height:100%;}
#main{width:100%; height:100%; float:left;}
#main #body{margin:0 210px; background:#ffe6b8; height:100%;}
#left,#right{width:200px; height:100%; float:left; background:#a0b3d6;}
#left{margin-left:-100%;}
#right{margin-left:-200px;}
3）自身浮動(dòng)法
左欄左浮動(dòng)，右欄右浮動(dòng)逃顶，主體直接放后面兵扬，就實(shí)現(xiàn)了自適應(yīng)。
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
css代碼：
html,body{margin:0; height:100%;}
#main{height:100%; margin:0 210px; background:#ffe6b8;}
#left,#right{width:200px; height:100%; background:#a0b3d6;}
#left{float:left;}
#right{float:right;}
