本文**（
六種布局方式：聖杯布局、雙飛翼布局、flex布局、絕對定位布局、**布局、網格布局
一.聖杯布局
聖杯布局是指布局從上到下分為header、container、footer，然後container部分定為三欄布局。
基礎html：
1<
body
>
2<
div
class
="container"
>34
<
div
class
="center"
>
5center
6div
>
7<
div
class
="left"
>
8left
9div
>
10<
div
class
="right"
>
11right
12div
>
13div
>
14body
>
基礎css：
1.container
4.container > div
9.center
13.left
17.right
對於container，給他設定乙個overflow:hidden使其成為乙個bfc（塊級格式化上下文）。bfc的作用:
1.消除margin collapse
2.容納浮動元素
3.阻止文字換行
使三欄浮動，並相對定位，給左右兩個容器設定200px的寬度，中間的容器設定100%的寬度。此時left和right被相對于父元素container寬度的100%的center擠到下面。
步驟：1.發left放在center上方：由於浮動的原因，給left設定margin-left:100%即可使左側欄浮動到center上方，並位於center左側之上。
2.同樣設定right margin-left:-200px,這裡的長度等於right的長度。
3.這時center的兩側被left和right覆蓋了，因此給container設定padding：0 200px
4.由於left和right也同時往中間縮，因為給left和right分別設定left:-200px;right:-200px,往兩側分別偏移自身的寬度去覆蓋掉contaniner使用padding後的空白位置。
這時，聖杯布局就完成了，但是在拖到很小的時候布局會亂，一下是最終樣式：
.container .container > div .center .left .right
二.雙飛翼布局
這種布局方式同樣分為header、container、footer。聖杯布局的缺陷在於center是在container的padding中的，因此寬度小的時候會出現混亂。
雙飛翼布局給center部分報過了乙個main，通過設定margin主動的把頁面撐開。
基礎html：
1<
div
class
="container"
>23
<
div
class
="center"
>
4<
div
class
="main"
>
5center
6div
>
7div
>
8<
div
class
="left"
>
9left
10div
>
11<
div
class
="right"
>
12right
13div
>
14div
>
步驟1和步驟2同聖杯布局
區別：第三步：給main設定margin：0 200px，同時設定overflow：hidden，使其成為乙個bfc。
這時視窗寬度過小時就不會出現混亂的情況了，關鍵點在於內容部分是包裹在main中。
最終樣式如下：
1.container
4.container > div
9.center
13.left
18.right
23.main
3.flex布局
flex布局是由css3提供的一種方便的布局方式。
基礎html：同聖杯布局
步驟：1.給container設定為乙個flex容器：display：flex
2.center的寬度設定為width：100%，left和right設定為200px
3.為了不讓left和right被center設定的100%壓縮，給left和right設定flex-shrink：0（定義專案的縮小比例，預設為1，如果空間不足則專案縮小，如果有一項為0，其他為1，當空間不足時，前者不縮小）。
4.使用order屬性給三個部分的dom結構進行排序：left：order：1，center:order:2,right:order:3
flex布局是一種極其靈活的布局方式，最終樣式如下：（flex存在瀏覽器相容性）
1.container
4.center
9.left
15.right
4.絕對定位布局
基礎html和聖杯布局一樣。
步驟：1.給container設定position：relative和overflow：hidden，因為絕對定位的元素的參照物為第乙個position不為static的祖先元素。
2.left向左浮動，right向右浮動。
3.center使用絕對定位，通過設定left和right把兩邊撐開。
4.center設定top：0，bottom:0使其高度撐開。
.center
這種方式的缺點是依賴於left和right的高度，如果兩邊欄的高度不夠，中間的內容區域的高度也會被壓縮。
5.table-cell 布局
**布局的好處是能使三欄的高度統一。
基礎html：
1234left56
78center910
11right
1213
14
步驟：1.給三欄都設定**單元：display：table-cell
2.left和right width:200px , center width:100%
3.這時left和right都被到兩邊去了，因此要分別設定min-widht：200px 確保不會被擠壓。
最終樣式：
1.container
5.container > div
9.center
14.left
19.right
這種布局方式能使得三欄的高度是統一的，但不能使center放在最前面得到最先渲染。
6.網格布局
網格布局可能是最強大的布局方式了，使用起來極其方便，但目前而言，相容性不好。網格布局，可以將頁面分割成過個區域，或者用來定義內部元素的大小，位置，圖層關係。
基礎html：
1234left56
78center910
11right
1213
14
步驟：1.給container設定為display：grid
2.設定三欄的高度：grid-template-rows：100px
3.設定三欄的寬度，中間自適應，兩邊固定：grid-template-columns：200px auto 200px；
.container
僅這四條樣式命令就能完成三欄布局，可見網格布局之強大。
總結：1.聖杯布局、雙飛翼布局、flex布局的center高度不受兩邊影響，取決於其自身內容所佔高度。
2.絕對布局center高度取決於兩側的高度(因為是通過設定top：0，bottom:0 把高度撐開的)
3.table-cell布局能讓三欄高度統一，但是不能優先渲染center
4.網格布局也不能優先渲染center，但布局簡單，存在相容性問題。
5.flex布局也存在相容性問題。
6.聖杯布局在頁面縮小時會出現錯亂問題。
搞定css三欄布局（六種方法）
談到布局，首先就要想到定位，當別人問我，css的position定位有哪些取值，分別表示什麼意思？呃.抓頭.gif，是時候回歸本質，看定義了。1.1 position position有六個屬性值 static relative absolute fixed sticky和inherit。三列布局，...
實現三欄布局的8種方式
三欄布局 兩側寬度固定，中間寬度自適應的 左右模組各自向左右浮動，並設定中間模組的 margin 值使中間模組寬度自適應 left right main main left right left main right left main right left main right left main...
繼承的六種實現方式
基本思想就是 利用原型讓乙個引用型別繼承另乙個引用型別的屬性和方法 function supertype supertype.prototype.getsupervalue function function subtype 繼承了 supertype subtype.prototype new s...