css盒子模型
原理：padding,border,margin三者構(gòu)成一個盒子。
Margin(外邊距) - 清除邊框外的區(qū)域姥宝，外邊距是透明的。
Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框蒂萎。
Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域同欠，內(nèi)邊距是透明的。
Content(內(nèi)容) - 盒子的內(nèi)容帆谍，顯示文本和圖像伪朽。
w3c標準：總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
IE標準：總寬度 = margin-left + width + margin-right
css定位機制
普通流
元素的位置由元素在HTML文檔中的位置決定，從左到右汛蝙，自上而下烈涮。
塊級框從上到下一個接一個地排列朴肺，框之間的垂直距離是由框的垂直外邊距計算出來。
行內(nèi)框在一行中水平布置坚洽「旮澹可以使用水平內(nèi)邊距、邊框和外邊距調(diào)整它們的間距讶舰。但是鞍盗，垂直內(nèi)邊距、邊框和外邊距不影響行內(nèi)框的高度跳昼。由一行形成的水平框稱為行框（Line Box）般甲，行框的高度總是足以容納它包含的所有行內(nèi)框。不過鹅颊，設(shè)置行高可以增加這個框的高度敷存。
定位
-
相對定位（reletive）
元素保持其形狀及其所占空間，相對于普通流中其他元素的偏移堪伍。
-
絕對定位（absloute）
相對于已定位的祖先元素锚烦，如果沒有已定位的祖先元素則相對于最初的包含塊。
脫離普通流帝雇，覆蓋在普通流定位之上 -
固定定位（fixed）
相對于瀏覽器窗口的絕對定位
浮動
- 不在普通流中占據(jù)空間涮俄，但會對之后的浮動元素產(chǎn)生空間占位影響
布局
常見布局
單列水平居中布局, 一列定寬一列自適應(yīng)布局, 兩列定寬一列自適應(yīng)布局, 兩側(cè)定寬中間自適應(yīng)三列布局。
圣杯與雙飛翼是常見的三列布局尸闸，左右兩列寬度固定彻亲，中列自適應(yīng)。
圣杯布局
為了給兩邊側(cè)欄空出位置室叉，給container元素設(shè)置padding
左右兩個div用相對定位并分配left睹栖，right屬性，用負邊距消除占位
main div設(shè)置100%寬度
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
body {
padding: 0;
margin: 0;
min-width: 600px; /* 2*left + right */
}
.container {
padding-left: 200px;
padding-right: 200px;
}
.main {
float: left;
width: 100%;
height: 300px;
background-color: red;
}
.left {
position: relative;
left: -200px;
float: left;
width: 190px;
height: 300px;
margin-left: -100%;
background-color: blue;
}
.right {
position: relative;
right: -210px;
float: left;
width: 190px;
height: 300px;
margin-left: -200px;
background-color: green;
}
雙飛翼布局
- 三列左浮動
- 為了不讓main內(nèi)容被遮擋茧痕，給其設(shè)置padding
- 用負邊距給左右兩列定位野来，消除占位
<div class="main-con">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
.main-con {
float: left;
width: 100%;
}
.main {
height: 300px;
margin-left: 210px;
margin-right: 210px;
background-color: red;
}
.left {
float: left;
width: 200px;
height: 300px;
margin-left: -100%;
background-color: blue;
}
.right {
float: left;
width: 200px;
height: 300px;
margin-left: -200px;
background-color: green;
}
兩者異同
兩者都把主欄放在文檔流最前面，優(yōu)先加載踪旷。
兩者都是三列浮動曼氛，然后通過負邊距定位消除占位形成三列布局
中列main處理不同：圣杯布局是利用父容器的左、右內(nèi)邊距定位令野；雙飛翼布局是把主欄嵌套在div后利用主列的左舀患、右外邊距定位。
