三列布局的聖杯布局和雙飛翼布局的理解與思考

1.dom結構

中間/div>
左邊右邊

定義出整個dom結構，將center放在最上面，以便優先渲染。

2.css**

首先將container盒子內的三個div設定成左浮動，給定左邊盒子寬度200px，右邊盒子寬度200px，中間盒子寬度100%，再加以背景顏色區分。

.container .container>div .center .left .right

效果圖如下：

可以看到，由於center盒子寬度是100%，所以left盒子和right盒子被擠到第二行了，可以通過margin設定偏移值

.left

不難看出，right盒子只需要減掉其本身寬度的左邊距值

是的，center盒子的寬度依然是100%，只是左邊和右邊被兩個div覆蓋了。所以還需要給左右盒子騰出空間，將container設定左右內邊距值。

再給左右盒子設定相對定位，並給出對於的left值讓它們各自到空白的地方。

.left .right

下面附完整**

* .head .container .foot .container>div .center .left .right

效果如圖

那麼，如果將container設定寬度為100%呢？

根據效果圖可以看出，center盒子布局溢位了，由此可以得出，div設定寬度百分百之後，如果再設定margin和padding，會導致子布局溢位。這裡可以用box-sizing: border-box解決，也就是將內邊距包含在設定的width和height裡面。

.container

之後我又想，可不可以繞過container，直接在center設定padding值或者margin值呢？

理論上是可以的，於是我先嘗試了padding

可以看見，使用了padding，文字內容不被覆蓋，但它padding的部分是會被看做內容覆蓋的。所以只能指望於margin了

1.dom結構

中間左邊右邊

2.css**以上說得差不多了，就是在聖杯布局的基礎上，將center盒子用乙個盒子包圍起來，代替他成為浮動元素。給center-box盒子設定寬度，center盒子由於不是浮動的，於是寬度會自動撐開，並且由於左右margin值，給左右留了空白

.center-box .center

而左右盒子也不用像聖杯布局那樣麻煩。直接設定margin-left的偏移量就行了。

.left .right

下面直接附整個**

* .head .container .center-box .foot .container>div .center .left .right

最後，值得一提的是消除浮動，以上我由於懶直接設定了個height。消除浮動最常用的有三種方法。

第一種：直接在父元素加overflow：hidden；

第三種：通過：after偽類

.container:after

再次最後，最好給body設定個最小寬度，因為瀏覽器視窗如果過於小的話，會使布局變得很亂。聖杯布局的min-width最好大於左盒子寬度+右盒子寬度+左盒子寬度（因為用到了絕對定位，還得加上中間盒子到零點的距離）。雙飛翼的min-width只需要大於左盒子寬度+右盒子寬度就可以了。