https://blog.csdn.net/sunshine_zcc/article/details/51622599
第一次寫博客，語言組織不好炼蹦，請大家諒解！
相信很多人都搜過圣杯布局和雙飛翼布局，也知道他們的由來，在這里我就不一一贅述了悄窃，今天主要講的是當我遇到兩個布局時，我是怎樣一步一步從開始到實現(xiàn)的過程蹂窖，例如：剛開始我也不懂為什么圣杯布局和雙飛翼布局的區(qū)別轧抗，不懂圣杯布局為什么會有相對定位等一些問題，在這里給大家講下我的理解瞬测，如有錯誤横媚，歡迎批評指正。
好了月趟，接下來開始今天的寫文章之旅灯蝴！
圣杯布局和雙飛翼布局實現(xiàn)的問題都是三列布局，兩邊定寬孝宗，中間自適應(yīng)布局穷躁，要注意的是中間欄(重要的東西)要在放在文檔流前面以優(yōu)先渲染。
圣杯布局
1因妇、首先定義三列折砸，為它們設(shè)置簡單的css樣式，代碼如下：
<!-- 圣杯布局 --><!DOCTYPE html><html><head><style> .left{ background: #E79F6D; width:150px; float:left; } .main{ background: #D6D6D6; width:100%; float:left; } .right{ background: #77BBDD; width:190px; float:left; }</style></head> <body> <div class="con"> <div class="main">Main</div> <div class="left">Left</div> <div class="right">Right</div> </div> </body></html>
實現(xiàn)效果圖：[圖片上傳失敗...(image-d3f8b5-1537022698948)]
這就是普通的讓三個div左浮動顯示出來的效果沙峻；
2、我們讓Left和Right與main在同一排两芳，這里需要用到margin-left的負值摔寨，這里如果margin-left是負值，我理解的是在此基礎(chǔ)上往左邊移怖辆，設(shè)置Left的margin-left:-100%是复，也就是往左移main的整個寬度，這時Left的左邊緣跟main的左邊緣重疊竖螃，即Left的150px寬覆蓋住了main的150px寬淑廊；[圖片上傳失敗...(image-b17713-1537022698948)]
這時Right跑到左邊了，再對Right設(shè)置margin-left:-190px;即right也跑到上面去了特咆，Right的右邊緣和main的右邊緣對齊季惩，Right的寬度覆蓋了main的右邊的寬度；現(xiàn)在Left和Right都跑上面去了，但是需要注意的是main的值不見了画拾，因為它被覆蓋了啥繁，設(shè)置left和right的margin值只是改變Left和Right的位置，對于main來說還是在以前的位置上青抛，接下來要考慮的問題就是如何定位main的位置旗闽？[圖片上傳失敗...(image-9342a2-1537022698948)]
3、需要給con容器加padding值蜜另，padding值的作用是給這整個容器均移動padding值适室，如在剛開始Left和Right沒上移的時候，給con加padding值的效果如下：
[圖片上傳失敗...(image-e7f9c-1537022698948)]
現(xiàn)在在Left和Right以及main都在同一排的情況下举瑰，加padding的值捣辆，就把main的定位到合適的位置了，但是這時的問題是：Left和Right也跟著一起縮了嘶居，所以要把Left和Right定位帶之前的位置罪帖，該怎么定位呢？
4邮屁、這時Left和Right需要用到css 的left屬性了整袁，left 屬性規(guī)定元素的左邊緣,該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。注意使用屬性left的時候要給這個元素定位佑吝，絕對定位和相對定位都可以坐昙，如果不使用定位的話沒有效果，具體為什么我也不知道芋忿，大家可以自行百度炸客。
Left的css樣式加上：position:relative;left：-150px; 同理css的right屬性也是如此，position:relative;right:-190px; Left和Right回到它們各自的位置上戈钢，OK痹仙，完成圣杯的布局，效果圖貼上：
[圖片上傳失敗...(image-8a9ea6-1537022698948)]
[圖片上傳失敗...(image-3b1bf5-1537022698948)]
完整代碼：
<!-- 圣杯布局 -->
<!DOCTYPE html>
<html>
<head>
<style>
.con {
padding-left: 150px;
padding-right: 190px;
}
.left{
background: #E79F6D;
width:150px;
float:left;
margin-left: -100%;
position: relative;
left:-150px;
}
.main{
background: #D6D6D6;
width:100%;
float:left;
}
.right{
background: #77BBDD;
width:190px;
float:left;
margin-right: -190px;
position: relative;//ls的理解這句可以不用
right: -190px;//ls的理解這句可以不用
}
</style>
</head>
<body>
<div class="con">
<div class="main">Main</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
</body>
</html>
雙飛翼布局
雙飛翼布局可以看成是對圣杯布局的改進殉了，因為圣杯布局用到的標簽屬性較多开仰，用著也較麻煩，所以淘寶玉伯大大就提出來雙飛翼的布局薪铜，雙飛翼是把三列布局比作鳥众弓，中間欄是鳥身，兩邊寬是鳥的兩翼隔箍，重要的是鳥的身體擺好谓娃，再安兩翼。思路和圣杯布局一樣蜒滩，這里我還是以上一個作例子滨达，用到main奶稠，left，right（其實用main sub extra更形象）弦悉。前兩步都是一樣的窒典，重要的是第三步，在前兩步的完成后已經(jīng)形成同行排列稽莉，只不過main值被覆蓋了瀑志，圣杯布局的第三步是給con容器添加padding屬性，而雙飛翼布局是為main里面的內(nèi)容再加一個div污秆，讓main的內(nèi)容包含在內(nèi)層div里劈猪，
<body> <div class="con"> <div class="main"> <div class="mc">Main</div> </div> <div class="left">Left</div> <div class="right">Right</div> </div> </body>
這時，只要設(shè)置mc的margin屬性就可以實現(xiàn)三列布局了良拼，而且main也正常顯示战得；這里，不用設(shè)置con容器的padding屬性庸推，也不用給Left和Right運用left常侦，right屬性，因為設(shè)置padding屬性就是為了不覆蓋main的值贬媒，現(xiàn)在將main里的內(nèi)容放在一個div里聋亡，再為它設(shè)置margin屬性，也就實現(xiàn)了不遮擋main里面的內(nèi)容值际乘，因此雙飛翼布局使用屬性個數(shù)減少坡倔，看著更簡便。代碼如下：
<!-- 雙飛翼布局 --><!DOCTYPE html><html><head><style> .left{ background: #E79F6D; width:150px; float:left; margin-left: -100%; } .main{ background: #D6D6D6; width:100%; float:left; } .mc { margin-left: 150px; } .right{ background: #77BBDD; width:190px; float:left; margin-right: -190px; } </style> </head> <body> <div class="con"> <div class="main"> <div class="mc">Main</div> </div> <div class="left">Left</div> <div class="right">Right</div> </div> </body></html>
OK脖含，兩個布局的過程講解結(jié)束罪塔，謝謝大家，歡迎大家批評指正养葵！
