基礎(chǔ)網(wǎng)頁布局
布局分類
- 一列布局
- 兩列布局
- 三列布局
- 多列布局
一列布局：
二列布局：
三列布局：
<div class="container">
<div class="header">我是header</div>
<div class="content">
<div class="left">左</div>
<div class="right">右</div>
<div class="middle">中間</div>
</div>
<div class="footer">我是footer</div>
</div>
.content {
min-height: 500px;
height: auto;
background-color: orange;
}
.content .left {
float: left;
width: 20%;
height: 500px;
background-color: orangered;
}
.container .right {
float: right;
width: 20%;
height: 500px;
background-color: yellow;
}
.container .middle {
height: 500px;
background-color: yellowgreen;
}
?? middle 寫再最后邀桑，由于上面左右 div 是浮動的歌殃，所以 middle 就會浮上去漂辐；如果 middle 想先渲染出來旁涤，放到最開始座菠，由于它是 block 塊級元素扮叨，左右就會被擠下去姜钳；怎么辦呢坦冠？下面就要使用到圣杯布局了。
將左右的背景顏色取消掉哥桥，你會發(fā)現(xiàn)左右是疊在 middle 上辙浑，這個時候middle 實際占比是100%，然后根據(jù)左右的的占比拟糕，自動計算出內(nèi)容顯示占比判呕。
圣杯布局
圣杯布局的出現(xiàn)是為了解決：老套的布局必須按照源順序（在 DOM 中表現(xiàn)為先寫 Left，然后 Middle送滞，最后侠草，Right）等，它將可能導(dǎo)致代碼不夠靈活犁嗅，尤其是從 DOM 的載入順序上來說边涕，中間的內(nèi)容不能被首先加載。
圣杯布局實現(xiàn)套路
- 兩邊帶有固定寬度中間可以流動（fluid）褂微；
- 允許中間一欄最先出現(xiàn)功蜓；
- 允許任意一欄放在最上面；
- 僅需一個額外的 div 標(biāo)簽蕊梧； （最外層加一個div 容器包裹）
- 僅需非常簡單的 CSS霞赫，帶上最少的兼容性補丁
利用上面的代碼，將 Middle 放到第一位：
<div class="content">
<!-- 主要內(nèi)容先渲染 -->
<div class="middle">中間</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
呈現(xiàn)效果：
想讓左邊的移動上來肥矢， 也給 middle float 屬性端衰，然后再讓left 左外邊距 -100%;
.content {
min-height: 500px;
height: auto;
background-color: orange;
}
.content .left {
float: left;
width: 150px;
height: 500px;
background-color: orangered;
}
.container .right {
float: right;
width: 150px;
height: 500px;
background-color: yellow;
}
.container .middle {
float: left;
width: 100%;
height: 500px;
background-color: yellowgreen;
}
理解下 margin-left 叠洗， 設(shè)置與元素相關(guān)聯(lián)的盒子模型的左外邊距；
margin-left: 10px; /* 絕對長度 */
margin-left: 1em; /* 相對于字號的長度 */
margin-left: 5%; /* 相對最近塊元素的寬度 */
右也改造下
.container .right {
float: left;
width: 150px;
height: 500px;
background-color: yellow;
margin-left: -150px;
}
到這里是不是基本圣杯布局雛形就出來了旅东，讓人不省心的就是中間內(nèi)容被被蓋了灭抑， 怎么辦呢？
讓最外部的父級容器承擔(dān)左右欄的距離好讓中間內(nèi)容顯示出來抵代，這個就上面說的多加一個 div 的意思了腾节。
通過 position 相對自己進行移動去填補預(yù)留空間
.content .left {
position: relative;
left: -150px;
float: left;
width: 150px;
height: 500px;
margin-left: -100%;
background-color: orangered;
}
.container .right {
position: relative;
left: 150px;
float: left;
width: 150px;
height: 500px;
background-color: yellow;
margin-left: -150px;
}
圣杯布局，你學(xué)會了沒有～
雙飛翼布局 + CSS HACK
雙飛翼布局由早期圣杯布局演變而來荤牍，始創(chuàng)于淘寶UED案腺，雙飛翼布局由左中右三欄組合，如同一只鳥（左翼康吵、身體劈榨、右翼）所以稱為雙飛翼布局。
圣杯布局和雙飛翼布局解決的問題是一樣的晦嵌，就是兩邊頂寬同辣，中間自適應(yīng)的三欄布局，中間欄要在放在文檔流前面以優(yōu)先渲染惭载。
圣杯布局和雙飛翼布局解決問題的方案在前一半是相同的旱函，也就是三欄全部float浮動，但左右兩欄加上負margin讓其跟中間欄div并排描滔，以形成三欄布局棒妨。
不同在于解決"中間欄div內(nèi)容不被遮擋"問題的思路不一樣：
圣杯布局，為了中間div內(nèi)容不被遮擋伴挚，將中間div設(shè)置了左右padding-left和padding-right后靶衍，將左右兩個div用相對布局position:relative并分別配合right和left屬性灾炭，以便左右兩欄div移動后不遮擋中間div
雙飛翼布局茎芋，為了中間div內(nèi)容不被遮擋，直接在中間div內(nèi)部創(chuàng)建子div用于放置內(nèi)容蜈出，在該子div里用margin-left和margin-right為左右兩欄div留出位置田弥。多了1個div，少用大致4個css屬性（圣杯布局中間div的padding-left和padding-right這2個屬性铡原，加上左右兩個div用相對布局position:relative及對應(yīng)的right和left共4個屬性偷厦，一共6個：而雙飛翼布局子div里用margin-left和margin-right共2個屬性，6-2=4）燕刻。
簡單說起來就是雙飛翼布局比圣杯布局多創(chuàng)建了一個div只泼，但不用相對布局了
其中使用
- position
- float
- 負邊距
- 登高
- 盒子模型
- 清除浮動
