css居中方法與雙飛翼佈局

• 居中

類型	方法	對應屬性
水平 垂直 水平&垂直	1.父元素使用外邊距自動 2.子元素顯示行內塊級元素，寫入內容，父元素設置文本居中 3.給父元素開啓非絕對和固定定位做爲子元素開啓絕對定位的參考脫離文檔流 3-1.設置相對偏移量50% 3-2.使用平移設置水平偏移量適當修改 3-3.此屬性是當對於子元素位置平移，括號值正值向右平移，負值向左平移	水 平	margin: 0 auto ;
			display: inline-block; text-align: center;
			position: relative; position: absolute; transform的translateX（）
		垂 直	margin: 0 auto ;
			display: inline-block; vertical-align: middle;
			position: relative; position: absolute; transform的translateY（）
		水平 & 垂直	margin: 0 auto ;
			display: inline-block; vertical-align: middle; text-align: center;
			position: relative; position: absolute; transform的translate（x，y）

• 佈局

1.兩列布局 ：兩個塊級元素顯示水平排列效果

• 定寬 —— 兩列定寬 兩個子元素浮動 父級設置高度避免塌陷

• 定寬 —— 一列定寬，一列自適應【根據定寬的列適應剩餘全部空間】一塊兒浮動

– 前面元素開啓相對定位，後面元素設置左內邊距向右移動，怪異盒子

– 相對定位優先級比浮動的優先級高

2.三列布局

• 定寬 —— 左邊與中間定寬，右邊自適應

• 定寬 —— 左右定寬，中間自適應

– 中間爲頁面主題內容利於被搜索引擎抓取靠前排

3.聖盃佈局（3行3列）

• header（1st row）

• nav（1st col.） article（2nd col.） aside（3rd col.） { 2nd row }

• footer（3rd row）

• TODO 思路：1.建立header頭 、div容器及其3個子元素div,語義化 - 用nav/article/aside分別替代三個子元素div

TODO 2.給父級設置class屬性值隨意，子級class屬性分別設置爲center，left，right
TODO * center爲頁面主體內容利於搜索引擎抓取，排列要靠前
TODO * 設置樣式 - 頭、尾、父級及3個子級高度設置同樣
TODO * 父級寬度減去left與right的寬度
TODO 3.header與footer設置寬高、背景色、外邊框、外邊距自動-居中
TODO 4.left與right設置寬高、背景色 ； center設置寬100%自適應高與前面一致
TODO 5.3個子元素一塊兒左浮動
TODO 6.容器內邊距留白給左右
TODO 7.left - 左外邊距值爲-100%（向左移動一行） ， 相對本身左移動100px
TODO 8.right - 左外邊距距center-100px向左移動100px ， 浮動後排不下本應在center右邊 ，相對本身右移動100px

4.雙飛翼佈局

思路：

TODO 思路：1.建立header頭 、div容器及其3個子元素div,語義化 - 用nav/article/aside分別替代三個子元素div
TODO 2.給父級設置class屬性值隨意，子級class屬性分別設置爲center，left，right
TODO * center爲頁面主體內容利於搜索引擎抓取，排列要靠前
TODO * 設置樣式 - 頭、尾、父級及3個子級高度設置同樣
TODO * 父級寬度減去left與right的寬度
TODO 3.header與footer設置寬高、背景色、外邊框、外邊距自動-居中
TODO 4.left與right設置寬高、背景色 ； center設置寬100%自適應高與前面一致
TODO 5.3個子元素一塊兒左浮動
TODO 6.left - 左外邊距值爲-100%（向左移動一行）
TODO 7.right - 左外邊距距center-100px向左移動100px ， 浮動後排不下本應在center右邊
TODO 8.容器的寬度改成800px
***************************************************************************************
TODO * 雙飛翼優化了center兩邊被覆蓋問題
TODO 9 - 在center中再加一個子元素inner做爲內容區，使center這個容器覆蓋而內容區不被覆蓋
TODO 10 - 設置inner的內邊距左右100px正確顯示內容