前端必须掌握的经典布局：“双飞翼布局”
雙飛翼布局 又稱 圣杯布局 ，用于三列的布局，其中左右兩列固定在兩側，中間一列寬度自適應。
我們來看看傳統的布局：
<div id='container'>
<div class='left'></div>
<div class='main'></div>
<div class='right'></div>
</div>
這樣的布局是加載的時候的順序是left - main - right，相比之下，雙飛翼布局的優勢在于能優先加載class = ‘main’的div節點 ；這在一些對主要內容加載速度有要求的網站很有用，像淘寶這些，中間的內容是它們最優先顯示給用戶的。
技巧：
1.三列先浮動
2.左右定寬
3.中間空出左右兩列的位置，用padding
4.左右兩列用margin-left，left復值來控制位置
當在浮動中，位置不夠的時候會被擠下來，如果給記下來的元素的margin-left：-自身的寬度，那么它就在上一行占有位置了。
當margin-left:-100%;就剛好在上一行的左側；通過這樣來實現圣杯布局的左側。
右側也同理，當在上一行占有位置的時候，再用left：自身寬度，就可以移動到右側
下面看看代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>圣杯布局</title>
<style>
*{
padding:0;
margin:0;
color:#fff;
font-family:'微軟雅黑';
text-align:center;
font-size:25px;
}
#container{
min-width:650px;
}
#header,#footer{
height:50px;
background:#000;
line-height:50px;}
#body{
overflow:hidden;
padding:0 200px;
}
.main{
width:100%;
line-height:50px;
background:#ccc;
float:left;
}
.left{
background-color:#00F;
line-height:50px;
width:200px;
position:relative;
float:left;
left:-200px;
margin-left:-100%;
}
.right{
float: left;
background: #00F;
line-height:50px;
width:200px;
margin-left:-200px;
position:relative;
left:200px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">頭部</div>
<div id="body">
<div class="main">中間</div>
<div class="left">左側</div>
<div class="right">右側</div>
<div></div>
</div>
<div id="footer">尾部</div>
</div>
</body>
</html>
這樣就差不多啦！自己做一遍就明白啦！
前端愛好者們約定，閱讀后：
if（‘覺得有用’）
｛
分享到朋友圈（‘I get it！’）;
｝
else if（‘已了解’）
｛
分享到朋友圈（‘a piece of cake！’）;
｝
else if('看不懂')
{
回復小編（'help me!'）;
}
圖片來源于網絡，感謝圖片分享者！
總結
以上是生活随笔為你收集整理的前端必须掌握的经典布局：“双飞翼布局”的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java 两个线程同步_Java 多线程
- 下一篇： 第一节：别出心裁的HTML5简介