圣杯布局與雙飛翼布局的優(yōu)點(diǎn)：利用布局，可優(yōu)先渲染主要部分
不同點(diǎn)：
- 圣杯布局：借助的是其他非主要元素覆蓋了其父元素的padding值所占據(jù)的寬度，同一個(gè)杯子，非主要元素其只是占據(jù)了全部容器的padding值部分；
- 雙飛翼布局：給主要部分main-wrap添加一個(gè)外層元素main，其他非主要元素所占據(jù)的空間是主要部分(main-wrap)的margin空間，像鳥的兩個(gè)翅膀，與主要部分main脫離(main和main-wrap是下面雙飛翼布局的元素id)。
圣杯布局
有點(diǎn)：不需要添加dom節(jié)點(diǎn)
缺點(diǎn)：圣杯布局的缺點(diǎn)：正常情況下是沒有問題的，但是特殊情況下就會(huì)暴露此方案的弊端，如果將瀏覽器無線放大時(shí)，「圣杯」將會(huì)「破碎」掉。如圖，當(dāng)main部分的寬小于left部分時(shí)就會(huì)發(fā)生布局混亂。（main<left即會(huì)變形）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrapper {
padding: 0 100px;
overflow:hidden;
}
.col {
position: relative;
float: left;
}
.main {
width: 100%;
height: 200px;
background:yellow;
}
.left,.right {
width: 100px;
height: 200px;
background:red;
}
.left{
margin-left: -100%;
left: -100px;
}
.right {
margin-left: -100px;
right: -100px;
}
</style>
</head>
<body>
<section class="wrapper">
<section class="col main">main</section>
<aside class="col left">left</aside>
<aside class="col right">right</aside>
</section>
</body>
</html>
雙飛翼布局
目的：為了優(yōu)先顯示中間主要部分，瀏覽器渲染引擎在構(gòu)建和渲染渲染樹是異步的（誰先構(gòu)建好誰先顯示），故在編寫時(shí)，先構(gòu)建中間main部分，但由于布局原因，將left置于center左邊，故而出現(xiàn)了雙飛翼布局。
優(yōu)點(diǎn)：不會(huì)像圣杯布局那樣變形
缺點(diǎn)是：多加了一層dom節(jié)點(diǎn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {min-width: 550px;}
.col {float: left;}
#main {
width: 100%;
height: 200px;
background-color: #ccc;
}
#main-wrap {
margin: 0 190px;/*這是圣杯和雙飛翼最明顯的區(qū)別，在main內(nèi)部使用的是margin，而圣杯是直接在container部分使用padding*/
}
#left,#right {
width: 190px;
height: 200px;
background-color: #0000FF;
}
#left{
margin-left: -100%;
}
#right {
margin-left: -190px;
background-color: #FF0000;
}
</style>
</head>
<body>
<div id="container">
<div id="main" class="col">
<div id="main-wrap"> #main </div>
</div>
<div id="left" class="col">#left</div>
<div id="right" class="col">#right</div>
</div>
</body>
</html>
擴(kuò)展：定位：像這樣的布局，也可以使用定位完成
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
header,footer { height: 50px;background:#ccc;}
.wrapper { position: relative;}
.main { height: 200px; margin:0 100px;background:blue;}
.left, .right{ width: 100px; height: 200px; position: absolute; top: 0;background:red;}
.left{ left: 0;}
.right{ right: 0;}
</style>
</head>
<body>
<header>header</header>
<section class="wrapper">
<section class="col main">main</section>
<aside class="col left">left</aside>
<aside class="col right">right</aside>
</section>
<footer>footer</footer>
</body>
</html>
運(yùn)行結(jié)果為：
結(jié)果正常，將main更改后結(jié)構(gòu)層正常顯示，但是將其left與right的高度改為300px后，結(jié)果如下：
出現(xiàn)了異常，故而總結(jié)得到定位非主要元素，撐不起整個(gè)高度
三個(gè)布局方法，有優(yōu)點(diǎn)也有缺點(diǎn)：
總結(jié)：個(gè)人感覺，圣杯布局簡(jiǎn)單是簡(jiǎn)單了點(diǎn)，但是有一個(gè)致命的缺陷就是main不能比left寬度小，根據(jù)自己的業(yè)務(wù)場(chǎng)景具體使用即可。個(gè)人偏向于雙飛翼布局。
感謝原作者的總結(jié)：https://blog.csdn.net/a18792627168/article/details/80115056
