淺談css雙飛翼布局和圣杯布局
我要評(píng)論雙飛翼布局和圣杯布局都是實(shí)現(xiàn)兩邊固定中間自適應(yīng)的三欄布局的方式，最近在整理三欄布局實(shí)現(xiàn)方式的筆記，決定但拉出來一篇，記一下這兩個(gè)經(jīng)典布局。
1、圣杯布局
浮動(dòng)、負(fù)邊距、相對(duì)定位、不添加額外標(biāo)簽
效果圖
DOM結(jié)構(gòu)：
<div class="header">Header</div>
<div class="bd">
<div class="main">Main</div>
<div class="left">Left</div>
<div class="right">Right
</div>
</div>
<div class="footer">Footer</div>
樣式：
<style>
body{padding:0;margin:0}
.header,.footer{width:100%; background: #666;height:30px;clear:both;}
.bd{
padding-left:150px;
padding-right:190px;
}
.left{
background: #E79F6D;
width:150px;
float:left;
margin-left:-100%;
position: relative;
left:-150px;
}
.main{
background: #D6D6D6;
width:100%;
float:left;
}
.right{
background: #77BBDD;
width:190px;
float:left;
margin-left:-190px;
position:relative;
right:-190px;
}
</style>
左中右部分樣式變化過程
1、中間部分需要根據(jù)瀏覽器寬度的變化而變化，所以要用100%，這里設(shè)*左中右向左浮動(dòng)，因?yàn)橹虚g100%，左層和右層根本沒有位置上去
.left{
background: #E79F6D;
width:150px;
float:left;
}
.main{
background: #D6D6D6;
width:100%;
float:left;
}
.right{
background: #77BBDD;
width:190px;
float:left;
}
2、把左層負(fù)margin150后，發(fā)現(xiàn)left上去了，因?yàn)樨?fù)到出窗口沒位置了，只能往上挪
.left{
background: #E79F6D;
width:150px;
float:left;
margin-left:-150px;
}
3、那么按第二步這個(gè)方法，可以得出它只要挪動(dòng)窗口寬度那么寬就能到最左邊了，利用負(fù)邊距，把左右欄定位
.left{
background: #E79F6D;
width:150px;
float:left;
margin-left:-100%;
}
.right{
background: #77BBDD;
width:190px;
float:left;
margin-left:-190px;
}
4、然而問題來了，中間被左右擋住了啊，只好給外層加padding了
.bd{
padding-left:150px;
padding-right:190px;
}
5、但是加了之后左右欄也縮進(jìn)來了，于是采用相對(duì)定位方法，各自相對(duì)于自己把自己挪出去，得到最終結(jié)果
.left{
background: #E79F6D;
width:150px;
float:left;
margin-left:-100%;
position: relative;
left:-150px;
}
.right{
background: #77BBDD;
width:190px;
float:left;
margin-left:-190px;
position:relative;
right:-190px;
}
2、雙飛翼布局
在不增加額外標(biāo)簽的情況下，圣杯布局已經(jīng)非常完美，圣杯布局使用了相對(duì)定位，以后布局是有局限性的，而且寬度控制要改的地方也多，那么有沒其他方法更加簡(jiǎn)潔方便呢？
在淘寶UED探討下，增加多一個(gè)div就可以不用相對(duì)布局了，只用到了浮動(dòng)和負(fù)邊距，這就是我們所說的雙飛翼布局。
DOM結(jié)構(gòu)：main內(nèi)層增加了一個(gè)div
<div class="header">Header</div>
<div class="bd">
<div class="main">
<div class="inner"> Main </div>*
</div>
<div class="left">Left</div>
<div class="right">Right </div>
</div>
<div class="footer">Footer</div>
樣式：
去掉了左右欄的相對(duì)定位
去掉包裹層padding，以中間欄新增div的margin代替
body{
padding:0;
margin:0
}
.header,.footer{
width:100%;
background:#666;
height:30px;clear:both;
}
.bd{
/*padding-left:150px;*/
/*padding-right:190px;*/
}
.left{
background: #E79F6D;
width:150px;
float:left;
margin-left:-100%;
/*position: relative;*/
/*left:-150px;*/
}
.main{
background: #D6D6D6;
width:100%;
float:left;
}
.right{
background: #77BBDD;
width:190px;
float:left;
margin-left:-190px;
/*position:relative;*/
/*right:-190px;*/
}
.inner{
margin-left:150px;
margin-right:190px;
}
3、雙飛翼布局和圣杯布局的區(qū)別
圣杯布局和雙飛翼布局解決問題的方案在前一半是相同的，即：
- 中間欄寬度設(shè)置為100%
- 三欄全部float浮動(dòng)
- 左右兩欄加上負(fù)margin讓其跟中間欄div并排，以形成三欄布局。
不同在于解決中間欄div內(nèi)容不被遮擋問題的思路不一樣。
圣杯布局
- 將三欄的外包裹層設(shè)置左右padding-left和padding-right
- 將左右兩個(gè)div用相對(duì)布局position: relative并分別配合right和left屬性，相對(duì)自身移動(dòng)以便不遮擋中間div
雙飛翼布局
- 中間div內(nèi)部創(chuàng)建子div用于放置內(nèi)容
- 在該子div里用margin-left和margin-right為左右兩欄div留出位置
多了1個(gè)div，少用4個(gè)css屬性（圣杯布局中間divp的adding-left和padding-right這2個(gè)屬性，加上左右兩個(gè)div用相對(duì)布局position: relative及對(duì)應(yīng)的right和left共4個(gè)屬性，一共6個(gè)；而雙飛翼布局子div里用margin-left和margin-right共2個(gè)屬性，6-2=4）。
并且雙飛翼布局還有個(gè)好處，讓Main變成BFC元素了，屏幕寬度縮小Main也不會(huì)被擠下去，圣杯布局就會(huì)被擠下去。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 圣杯布局效果優(yōu)美且對(duì)瀏覽器兼容性要求非常低,是一種非常給力的三列式頁面布局方案,接下來就來看看對(duì)CSS的三列式"圣杯布局"方案完全解析:2016-06-02
- 圣杯布局跟雙飛翼布局的實(shí)現(xiàn)，目的都是左右兩欄固定寬度，中間部分自適應(yīng)。接下來通過本文教程給大家介紹CSS布局之圣杯布局與雙飛翼布局，感興趣的朋友一起學(xué)習(xí)吧2016-02-29
圣杯布局和雙飛翼布局是前端工程師需要日常掌握的重要布局方式。圣杯布局和雙飛翼布局是很多大廠必考的內(nèi)容，本文就詳細(xì)介紹一下這兩個(gè)布局有什么區(qū)別，感興趣的可以了解一2021-05-13