三欄布局的實(shí)現(xiàn)

三欄布局一般指的是頁面中一共有三欄，左右兩欄寬度固定，中間自適應(yīng)的布局，三欄布局的具體實(shí)現(xiàn)：

1.利用絕對定位，左右兩欄設(shè)置為絕對定位，中間設(shè)置對應(yīng)方向大小的 margin 的值。

2.利用 flex 布局，左右兩欄設(shè)置固定大小，中間一欄設(shè)置為 flex:1。

3.利用浮動(dòng)，左右兩欄設(shè)置固定大小，并設(shè)置對應(yīng)方向的浮動(dòng)。中間一欄設(shè)置左右兩個(gè)方向的 margin 值，注意這種方式，中間一欄必須放到最后：

4.圣杯布局，利用浮動(dòng)和負(fù)邊距來實(shí)現(xiàn)。父級元素設(shè)置左右的 padding，三列均設(shè)置向左浮動(dòng)，中間一列放在最前面，寬度設(shè)置為父級元素的寬度，因此后面兩列都被擠到了下一行，通過設(shè)置 margin 負(fù)值將其移動(dòng)到上一行，再利用相對定位，定位到兩邊。

5.雙飛翼布局，雙飛翼布局相對于圣杯布局來說，左右位置的保留是通過中間列的 margin 值來實(shí)現(xiàn)的，而不是通過父元素的 padding 來實(shí)現(xiàn)的。本質(zhì)上來說，也是通過浮動(dòng)和外邊距負(fù)值來實(shí)現(xiàn)的。