水平居中：inline-block+text-align、table+margin贾费、absolute+transform
1钦购，父text-align+子inline-block 優(yōu)：css2支持ok，IE6-9兼容好褂萧。缺：text-align繼承性子級文本也會居中押桃。
2，父不設(shè)置导犹，子block||table唱凯，margin0auto. 優(yōu)：只需設(shè)子。缺：子脫離文檔流后無法實(shí)現(xiàn)水平居中（position：float谎痢、absolute磕昼、fixed）
3，父fixed relative absolute都可以节猿。子：position:absolute票从，left:50%. transform:translateX(-100px)或-50%。優(yōu)：父脫離WD流不會影響子 缺：transform兼容性CSS3
總結(jié)：1.老爸滨嘱，你來控制峰鄙，我配合你把自己偽裝一下  2.老爸，不用你費(fèi)心太雨，全部我來搞定吟榴，我設(shè)table  3，老爸你先定位囊扳，我來平移

垂直居中：table-cell+vertical-algin煤墙、absolute+transform
1，父display:table-cell virtical-algin:middle 子不需要設(shè)置 //table類似<table> table-cell類似<td> virtical-align:文本內(nèi)容垂直方向?qū)R方式top.middle.bottom
優(yōu)：兼容性好css2 缺：vertical-align會導(dǎo)致父本身的文本也垂直居中了
2宪拥，父relative定位好 子absolute top:50% transform:translateY(-50%)
優(yōu)：父脫離文檔流不影響子效果 缺：transform兼容性css3
總結(jié)：1.老爸，你來吧自己包成tablecell铣减。我啥也不管她君，直接掉下去 2.老爸你先定位，我來平移

居中：table-cell+vertical-align葫哗、
1缔刹，父table-cell vertical-align:middle 子:table margin:0auto  優(yōu)：兼容好 缺：為了子居中球涛，父里設(shè)置了很多樣式 還有table和table-cell語義上不友好，子改成block
2校镐，父relative 子absolute left:50% top:50% transform:translateXY(-50%,-50%) 兼容性不好
總結(jié)：1.老爸亿扁，你把自己包成一個(gè)單元格放低姿態(tài)設(shè)垂直居中。橫向水平的交給我來把自己包成一個(gè)表格鸟廓。 2你先定位好从祝，我來平移。
垂直方向的引谜，老爸一個(gè)人可以完成牍陌。水平方向的，我一個(gè)人能搞定员咽。水平方向我偶爾需要和老爸一起完成毒涧。

兩列布局：
1，兄弟贝室，你先定好寬契讲，然后脫流 我會margin出你的寬。優(yōu)：簡單滑频， 缺：clear:both會亂 position的層次捡偏，比float的層次高
2，overflow:hidden 溢出時(shí)隱藏误趴。 開啟BFC模式-當(dāng)前元素的內(nèi)部環(huán)境與外界完全隔離
3霹琼，父table-layout:fixed display:table #left right{table-cell}

三列布局
1，float+margin
2凉当，float+hidden
3枣申，table

圣杯布局：順序left right center不利于抓取的順序（浮動 + 定位 + 平移）
子元素float后，父的height高度坍塌

雙飛翼布局：
解決圣杯布局中定位代碼的問題 center中加一個(gè)inner看杭，在inner上加margin-left和right

等分:
1忠藤，float 25%
2，父display:table table-layout:fixed 子display:table-cell
等分楼雹，加間隙：套一個(gè)父層 間隙+父寬 = （間隙+列寬）* N
box-sizing:border-box 默認(rèn)content-box 設(shè)置后模孩，margin+padding+width = 25% 


等高:
1，父display:table table-layout:fixed 子display:table-cell width:100px 用內(nèi)容撐開即可等高
2贮缅，父overflow：hidden 子padding-bottom:9999px margin-bottom:-9999px float:left

CSS3布局：
columns:4,300 column-count:4 column-width:300
column-gap:20
column-rule-width:5 column-rule-color:red column-rule-style:double  只出現(xiàn)在分隔的地方
column-rule:5px tomato double

column-span:none all
column-fill:auto balance.列高由內(nèi)容決定榨咐，還是以內(nèi)容最高的一列為準(zhǔn)。
overflow:auto 滾動條

彈性布局
direction: ltr
display: flex
flex-direction: column;
justify-content: space-around; // 首尾間距只有其它間距的1/2
align-items: flex-end; // 貼邊
order:-1 數(shù)字越小谴供，越排在前面
父flex 子margin:auto
align-self: baseline 沿著縱軸方向的對齊方式
子flex:2 分配占比

網(wǎng)格布局：
grid-template-columns:1fr 1fr 1fr; // 1份 或者 :repeat(3, 1fr)
grid-template-rows:repeat(4, 60px); // 4行块茁，每行60高
grid-auto-rows: minmax(60px, auto); // 最小高度60, 最大根據(jù)內(nèi)容自適應(yīng)
grid-gap:{10px}