前言
今天給大家分享一個圣杯布局和雙飛翼布局及他們之間的區(qū)別,這兩個三行布局一直是一些大廠前端面試的高頻考點(diǎn),帶你走進(jìn)大廠面試題,活不多說,沖沖沖~
布局效果
這兩個種三行布局效果是一樣的,實(shí)現(xiàn)的效果如上圖示所示,其特點(diǎn)為:
- header和footer的高度為整個瀏覽器的寬度
- 中間是個三行布局,left和right的寬度是固定的。
- 而middle的內(nèi)容的寬度是自適應(yīng)占滿中間位置的,高度為三欄中的最大高度其實(shí)圣杯布局和雙飛翼布局在前的處理是一樣的,只不過是在中間處理的時(shí)候有些小差異而已啦。
前期處理
- 為了避免出現(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),見證奇跡的時(shí)候到啦~
雙飛翼布局
那我們看看雙飛翼布局是怎么解決這個問題的呢。來往下看
雙飛翼布局是在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;
}
這時(shí)我們發(fā)現(xiàn)middle中的內(nèi)容不見了,此時(shí)我們之前在midlle里面添加的midlle-inner盒子就派上用場啦,此時(shí)只需要給這個盒子設(shè)置一個margin:0 200px,那么我們的內(nèi)容是不是來到中間展示了呢。
.middle-inner{
margin: 0 200px;
}
看效果
和我們預(yù)期的一樣,大廠面試題不過如此嘛,收工收工!?。?!
總結(jié)一下
最后我們來總結(jié)一下,雙飛翼布局其實(shí)和圣杯布局的精髓是一樣的,都是通過設(shè)置負(fù)margin來實(shí)現(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)文章,希望大家以后多多支持腳本之家!