前言
今天給大家分享一個圣杯布局和雙飛翼布局及他們之間的區(qū)別，這兩個三行布局一直是一些大廠前端面試的高頻考點，帶你走進(jìn)大廠面試題，活不多說，沖沖沖~
布局效果
這兩個種三行布局效果是一樣的，實現(xiàn)的效果如上圖示所示，其特點為：
- header和footer的高度為整個瀏覽器的寬度
- 中間是個三行布局，left和right的寬度是固定的。
- 而middle的內(nèi)容的寬度是自適應(yīng)占滿中間位置的，高度為三欄中的最大高度其實圣杯布局和雙飛翼布局在前的處理是一樣的，只不過是在中間處理的時候有些小差異而已啦。
前期處理
- 為了避免出現(xiàn)問題我們先給body設(shè)置一個min-width:600px;
- 再將header和footer的寬度設(shè)為100%（整個瀏覽器的頁面），并添加背景色便于區(qū)分。
- 在content中我們給left，right，midlle都添加float:left效果，設(shè)置left，right的寬高。
- middle的寬度設(shè)置為100%，高度為與left，right的高度相同，同樣為了便于看效果我們這里也給它們一個背景色。
- 這里有個需要注意的地方，我們還應(yīng)該給content設(shè)置一個高度，content中的div我們添加了float：left屬性，因此他們都脫離了文本流，導(dǎo)致出現(xiàn)了高度塌陷。
（ps:我這里是在content中添加了一個overflow: hidden，形成一個BFC區(qū)域來解決這個問題的，感興趣的小伙伴可以自行了解，當(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)在的頁面是這樣子的，那這怎么回事呢？
答案很簡單，left,right,middle本來應(yīng)該是在一條直線上的，但是content的寬度不夠，就把left，right兩個盒子擠下來啦。
那現(xiàn)在我們分別來看看這兩種布局接下來解決這個問的方法吧：
圣杯布局
我們先給content設(shè)置一個padding：0 200px,將左右兩邊各騰出200px寬度。
接下來我們只需要將left,right，兩個盒子放在兩個區(qū)域就行啦。
最后分別給left，left設(shè)置margin屬性調(diào)整位置。
#content{
overflow: hidden;
padding: 0 200px;
}
#left{
margin-left:-100% ;
}
#right{
margin-left: -200px;
我們再來看一下效果
當(dāng)當(dāng)當(dāng)，見證奇跡的時候到啦~
雙飛翼布局
那我們看看雙飛翼布局是怎么解決這個問題的呢。來往下看
雙飛翼布局是在middle下添加了一個middle-inner盒子，將middle的內(nèi)容放在這個盒子里面（這有什么用呢？不著急咱先往下看）。
我們和圣杯布局中一樣也給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;
}
這時我們發(fā)現(xiàn)middle中的內(nèi)容不見了,此時我們之前在midlle里面添加的midlle-inner盒子就派上用場啦，此時只需要給這個盒子設(shè)置一個margin：0 200px,那么我們的內(nèi)容是不是來到中間展示了呢。
.middle-inner{
margin: 0 200px;
}
看效果
和我們預(yù)期的一樣，大廠面試題不過如此嘛，收工收工?。。。?/p>
總結(jié)一下
最后我們來總結(jié)一下，雙飛翼布局其實和圣杯布局的精髓是一樣的，都是通過設(shè)置負(fù)margin來實現(xiàn)元素的排布。
- 不同的就是html結(jié)構(gòu)，雙飛翼是在middle元素內(nèi)部又設(shè)置了一個milddle-inner并設(shè)置它的左右margin，而非圣杯布局的padding，來排除兩邊元素的覆蓋。
- 雙飛翼布局可以多了一個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)于面試必問:圣杯布局和雙飛翼布局的區(qū)別的文章就介紹到這了,更多相關(guān)圣杯布局和雙飛翼布局區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
