面試必問(wèn):圣杯布局和雙飛翼布局的區(qū)別
我要評(píng)論前言
今天給大家分享一個(gè)圣杯布局和雙飛翼布局及他們之間的區(qū)別，這兩個(gè)三行布局一直是一些大廠前端面試的高頻考點(diǎn)，帶你走進(jìn)大廠面試題，活不多說(shuō)，沖沖沖~
布局效果
這兩個(gè)種三行布局效果是一樣的，實(shí)現(xiàn)的效果如上圖示所示，其特點(diǎn)為：
- header和footer的高度為整個(gè)瀏覽器的寬度
- 中間是個(gè)三行布局，left和right的寬度是固定的。
- 而middle的內(nèi)容的寬度是自適應(yīng)占滿中間位置的，高度為三欄中的最大高度其實(shí)圣杯布局和雙飛翼布局在前的處理是一樣的，只不過(guò)是在中間處理的時(shí)候有些小差異而已啦。
前期處理
- 為了避免出現(xiàn)問(wèn)題我們先給body設(shè)置一個(gè)min-width:600px;
- 再將header和footer的寬度設(shè)為100%（整個(gè)瀏覽器的頁(yè)面），并添加背景色便于區(qū)分。
- 在content中我們給left，right，midlle都添加float:left效果，設(shè)置left，right的寬高。
- middle的寬度設(shè)置為100%，高度為與left，right的高度相同，同樣為了便于看效果我們這里也給它們一個(gè)背景色。
- 這里有個(gè)需要注意的地方，我們還應(yīng)該給content設(shè)置一個(gè)高度，content中的div我們添加了float：left屬性，因此他們都脫離了文本流，導(dǎo)致出現(xiàn)了高度塌陷。
（ps:我這里是在content中添加了一個(gè)overflow: hidden，形成一個(gè)BFC區(qū)域來(lái)解決這個(gè)問(wèn)題的，感興趣的小伙伴可以自行了解，當(dāng)然你不這樣做設(shè)置content的高度就行啦）
*{
margin: 0;
padding: 0;
}
body{
min-width: 600px;
}
#header,#footer{
height: 50px;
width: 100%;
background: grey;
}
#middle,#left,#right{
float: left;
}
#content{
overflow: hidden;
}
#left,#right{
width: 200px;
height: 200px;
background: pink;
}
#middle{
width: 100%;
height: 200px;
background: yellowgreen;
}
我們發(fā)現(xiàn)現(xiàn)在的頁(yè)面是這樣子的，那這怎么回事呢？
答案很簡(jiǎn)單，left,right,middle本來(lái)應(yīng)該是在一條直線上的，但是content的寬度不夠，就把left，right兩個(gè)盒子擠下來(lái)啦。
那現(xiàn)在我們分別來(lái)看看這兩種布局接下來(lái)解決這個(gè)問(wèn)的方法吧：
圣杯布局
我們先給content設(shè)置一個(gè)padding：0 200px,將左右兩邊各騰出200px寬度。
接下來(lái)我們只需要將left,right，兩個(gè)盒子放在兩個(gè)區(qū)域就行啦。
最后分別給left，left設(shè)置margin屬性調(diào)整位置。
#content{
overflow: hidden;
padding: 0 200px;
}
#left{
margin-left:-100% ;
}
#right{
margin-left: -200px;
我們?cè)賮?lái)看一下效果
當(dāng)當(dāng)當(dāng)，見(jiàn)證奇跡的時(shí)候到啦~
雙飛翼布局
那我們看看雙飛翼布局是怎么解決這個(gè)問(wèn)題的呢。來(lái)往下看
雙飛翼布局是在middle下添加了一個(gè)middle-inner盒子，將middle的內(nèi)容放在這個(gè)盒子里面（這有什么用呢？不著急咱先往下看）。
我們和圣杯布局中一樣也給float，left設(shè)置margin值調(diào)整位置。
但是此布局就不需要給left,right設(shè)置定位啦。
#left{
float: left;
margin-left: -100%;
}
#right{
float: left;
margin-left: -200px;
}
.middle-inner{
padding: 0 200px;
}
這時(shí)我們發(fā)現(xiàn)middle中的內(nèi)容不見(jiàn)了,此時(shí)我們之前在midlle里面添加的midlle-inner盒子就派上用場(chǎng)啦，此時(shí)只需要給這個(gè)盒子設(shè)置一個(gè)margin：0 200px,那么我們的內(nèi)容是不是來(lái)到中間展示了呢。
.middle-inner{
margin: 0 200px;
}
看效果
和我們預(yù)期的一樣，大廠面試題不過(guò)如此嘛，收工收工?。。?！
總結(jié)一下
最后我們來(lái)總結(jié)一下，雙飛翼布局其實(shí)和圣杯布局的精髓是一樣的，都是通過(guò)設(shè)置負(fù)margin來(lái)實(shí)現(xiàn)元素的排布。
- 不同的就是html結(jié)構(gòu)，雙飛翼是在middle元素內(nèi)部又設(shè)置了一個(gè)milddle-inner并設(shè)置它的左右margin，而非圣杯布局的padding，來(lái)排除兩邊元素的覆蓋。
- 雙飛翼布局可以多了一個(gè)html結(jié)構(gòu)，但是可以不用設(shè)置left,right元素的定位。
下面給一下完整代碼：
圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrap">
<div id="header">header</div>
<div id="content">
<div id="middle">
middle
</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
min-width: 600px;
}
#header,#footer{
height: 50px;
width: 100%;
background: grey;
}
#middle,#left,#right{
float: left;
}
#content{
overflow: hidden;
padding: 0 200px;
}
#left,#right{
width: 200px;
height: 200px;
background: pink;
}
#middle{
width: 100%;
height: 200px;
background: yellowgreen;
}
#left{
margin-left:-100% ;
position: relative;
left:-200px;
}
#right{
margin-left: -200px;
position: relative;
left:200px;
}
雙飛翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrap">
<div id="header">header</div>
<div id="content">
<div id="middle">
<div class="middle-inner">
middle
</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.wrap{
min-width: 600px;
}
#header,#footer{
height: 50px;
width: 100%;
background:grey;
}
#left,#right{
width: 200px;
height: 200px;
background: green;
}
#middle{
background: pink;
width: 100%;
float: left;
height:200px;
}
#content{
overflow: hidden;
}
#left{
float: left;
margin-left: -100%;
}
#right{
float: left;
margin-left: -200px;
}
.middle-inner{
margin: 0 200px;
}
到此這篇關(guān)于面試必問(wèn):圣杯布局和雙飛翼布局的區(qū)別的文章就介紹到這了,更多相關(guān)圣杯布局和雙飛翼布局區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了淺談css雙飛翼布局和圣杯布局,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-18- 圣杯布局效果優(yōu)美且對(duì)瀏覽器兼容性要求非常低,是一種非常給力的三列式頁(yè)面布局方案,接下來(lái)就來(lái)看看對(duì)CSS的三列式"圣杯布局"方案完全解析:2016-06-02
- 圣杯布局跟雙飛翼布局的實(shí)現(xiàn)，目的都是左右兩欄固定寬度，中間部分自適應(yīng)。接下來(lái)通過(guò)本文教程給大家介紹CSS布局之圣杯布局與雙飛翼布局，感興趣的朋友一起學(xué)習(xí)吧2016-02-29
