聖盃佈局and雙飛翼佈局
聖盃佈局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin:0;
}
.warp,.main{
width:100%;
}
.main,.left,.right{
height 詳細講解：
1.首先了解聖盃佈局具體是什麼佈局？
通俗說法是：父盒子裡包括左中右三個子盒子。左右盒子定寬，中間自適應。
2.佈局
我們都知道瀏覽器的渲染順序是字上而下有序進行的。
所以我們將最重要的main盒子放在最上邊。
將left和right放在下邊。
佈局如下：
<div class="warp">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>3.樣式控制
第一步：設定寬度高度
warp:width:100%;height:400px;（可以由元素撐開高度）
main:width:100%;height:100%;
left:width:200px;height:100%;
right:width:100px;height:100%;
第二步：設定子元素的浮動
main:float:left;
left:float:left;
right:float:left;
第三步：用margin的負值來將left,right的盒子搞上去
left:margin-left:-100%;(到父元素的最左邊)
right:margin-right:100px;（到父元素最右邊）
第四步：因為left和right會覆蓋main的內容，所以需要給父元素設定padding值,且保證不影響盒子大小
warp:box-sizing:border-box;
padding-left:200px;
padding-right:100px;
第五步：相對定位將left，right放到父元素騰出來的padding處
left: position: relative;
left:-200px;
right: position: relative;
left:-100px;
ok~
雙飛翼佈局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin:0;
}
.warp,.mainWarp,.main{
width:100%;
}
.mainWarp,.main,.left,.right{
height:100%;
}
.mainWarp,.left,.right{
float: left;
}
.warp{
height:400px;
background: #000;
}
.main{
background: red;
margin-left:200px;
margin-right:100px;
}
.left{
width:200px;
margin-left: -100%;
background: yellow;
}
.right{
width:100px;
margin-left: -100px;
background: blue;
}
</style>
</head>
<div class="warp">
<div class="mainWarp">
<div class="main">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</html><div class="warp">
<div class="mainWarp">
<div class="main">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>3.樣式：
步驟一：設定寬高
warp:width:100%;height:400px;(可用內容撐起來)
mainWarp:width:100%;height:100%;
main:width:100%;height:100%;
left:width:200px;height:100%;
right:width:100px;height:100%;(寬度可按百分比)
步驟二：進行浮動
mainWarp,left,right都設定float:left;
步驟三：用margin的負值來將left,right的盒子搞上去
left:margin-left:-100%;(到父元素的最左邊)
right:margin-right:100px;（到父元素最右邊）
步驟四：因為left和right會覆蓋main的內容，所以這次我們給main一個margin值，使main縮小
main:margin-left:200px;
margin-right:100px;
ok~