一、CSS兩欄布局
首先圃验，假如HTML中有以下結構：
1.絕對定位
那么，想讓他們呈現(xiàn)兩欄布局细燎，我們可以子元素設置絕對定位两曼，而在他們父元素增加相對定位，示例代碼如下：
2.浮動
- 讓頁面實現(xiàn)兩欄布局找颓，可以在需要兩欄布局的元素的父元素上加一個clearfix的類合愈，然后讓所有子元素都float：left叮贩；就可以了击狮，示例代碼如下：
- 也可以觸發(fā)第二個元素BFC，實現(xiàn)兩欄布局益老，設置overflow:hidden;那么第二個元素可以不需要width彪蓬，而自適應頁面的寬度，示例代碼如下：
二捺萌、CSS三欄布局（以下僅列出5種方法）
三欄布局档冬，一般為兩邊固定，中間自適應的布局桃纯，效果圖如下：
1.flex布局（2種）
- 簡單實用酷誓，但不能兼容IE8及以下瀏覽器。
- 首先在父元素上設置flex态坦，然后在子元素上設置屬性
-
方法一：設置中間的盒子flex：1盐数；即： flex-grow 值，flex-shrink 取 1伞梯，flex-basis 取 0%玫氢，此時中間的盒子是可以隨著頁面的比例自適應的：
7.png -
方法二：設置兩邊盒子有寬度，可以縮小谜诫，中間的盒子可以在頁面有剩余空間放大漾峡，并且由于mid元素在html結構中靠前，可以優(yōu)先被加載出來喻旷，用order屬性讓他在頁面中仍在第二個位置：
6.1.png
2.float布局
-
方法一：在需要三欄布局的元素的父元素上加一個clearfix的類生逸，然后讓所有子元素都float：left；就可以了：
float-1.png -
方法二：在第一個且预、第二個元素上分別設置左右浮動，再在第三個元素辣之，也就是需要出現(xiàn)在第二個位置上的元素設置margin-left和margin-right掰伸，來實現(xiàn)三欄布局：
9.png
3.BFC布局
- 主要內容無法最先加載，當頁面內容較多時會影響用戶體驗怀估。
-
設置元素左右浮動狮鸭，通過在元素上設置overflow：hidden合搅，觸發(fā)BFC特性，具有BFC特性的元素可以防止元素被浮動元素遮擋：
10.png
4.絕對定位布局
-
方法一：先確定中間的元素位置歧蕉，設置中間的元素的左右margin分別為兩邊元素的寬度灾部，然后給父元素設置position:relative;左右兩個元素設置position:absolute，分別定位在頁面左右兩邊：
11.png -
方法二：直接設置每個元素的絕對定位：
12.png
5.table的三欄布局
- 兼容性好惯退，但不能設置欄間距赌髓，且一個單元格變大，兩邊單元格也都會變大催跪；
-
設置三個元素為表格中的三個元素：
13.png
延伸：
- 除此之外還有grid布局锁蠕，圣杯布局，雙飛翼布局懊蒸，就不一一枚舉荣倾；
- 當元素高度未知時，BFC骑丸， flex和table布局會自適應舌仍，其他布局方式需要重新設置一些參數(shù)系數(shù)。
三通危、水平居中：
1.對于inline或者inline-block元素铸豁，可以直接設置父元素text-align：center;就可以了。
2.對于單個block元素菊碟，給定margin-left:auto;margin-right:auto;(這個block元素必須有width节芥，浮動元素或且對定位無法使用這個方法)，子元素寬度不確定時框沟，
a.可以設置margin-left和margin-right為定值藏古。
b.在元素外加入table標簽，所有的table標簽都要寫上忍燥，包括<tr><td>拧晕，然后將該元素寫在<td>內，然后設置margin值為auto梅垄。
3.多個block元素厂捞，可以使用inline-block或者flex布局：
- 設置為inline-block：設置子元素display:inline-block;父元素text-align:center;
- 元素寬高未知：（
a.transform方法，
+1.png
flex布局：父元素設置display:flex; justify-content:center;
子元素要設置max-width队丝。
（以上方法適用于子元素為浮動靡馁、絕對定位、內聯(lián)元素均可水平居中）
4.居中浮動元素：
-
運用相對定位和margin：
+2.png
5.絕對定位元素：
-
依然是使用margin机久，方法和上面很相似（兩種方法）：
+3.png
+4.png
四臭墨、垂直居中（七種方法）
- 前言：如果父元素的height不確定，那么只需要設置padding-top和padding-bottom為一樣的值就可以了膘盖，但是如果確定了胧弛，就很難設置了尤误，以下為常用的其中方法：
1.table自帶功能
將文字放在table標簽的td標簽中就可以直接實現(xiàn)垂直居中了；
2.設置before和after類為100%的父元素高度;所有子元素設置inline-block;vertical-align: middle结缚；也可以用偽類代替before和after類：
3.div偽裝成table：
4.margin-top：-50%损晤；
5.translate：-50%；（通用）
6.absolute margin auto6聯(lián)合使用：
7.flex布局（通用）
9.
小技巧：
- CSS代碼可以搜索關鍵詞+generator搜索红竭，搜到了就可以直接復制標準代碼使用尤勋；
參考自：https://zhuanlan.zhihu.com/p/33522591?utm_source=wechat_session&utm_medium=social&utm_oi=817135426103050240
https://jscode.me/t/topic/1936
https://zhuanlan.zhihu.com/p/43860155?utm_source=wechat_session&utm_medium=social&utm_oi=817135426103050240
https://zhuanlan.zhihu.com/p/25068655
