基礎(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
- 負邊距
- 登高
- 盒子模型
- 清除浮動