水平居中：inline-block+text-align、table+margin、absolute+transform
1，父text-align+子inline-block 优：css2支持ok，IE6-9兼容好。缺：text-align继承性子级文本也会居中。
2，父不设置，子block||table，margin0auto. 优：只需设子。缺：子脱离文档流后无法实现水平居中（position：float、absolute、fixed）
3，父fixed relative absolute都可以。子：position:absolute，left:50%. transform:translateX(-100px)或-50%。优：父脱离WD流不会影响子 缺：transform兼容性CSS3
总结：1.老爸，你来控制，我配合你把自己伪装一下 2.老爸，不用你费心，全部我来搞定，我设table 3，老爸你先定位，我来平移
垂直居中：table-cell+vertical-algin、absolute+transform
1，父display:table-cell virtical-algin:middle 子不需要设置 //table类似<table> table-cell类似<td> virtical-align:文本内容垂直方向对齐方式top.middle.bottom
优：兼容性好css2 缺：vertical-align会导致父本身的文本也垂直居中了
2，父relative定位好 子absolute top:50% transform:translateY(-50%)
优：父脱离文档流不影响子效果 缺：transform兼容性css3
总结：1.老爸，你来吧自己包成tablecell。我啥也不管，直接掉下去 2.老爸你先定位，我来平移
居中：table-cell+vertical-align、
1，父table-cell vertical-align:middle 子:table margin:0auto 优：兼容好 缺：为了子居中，父里设置了很多样式 还有table和table-cell语义上不友好，子改成block
2，父relative 子absolute left:50% top:50% transform:translateXY(-50%,-50%) 兼容性不好
总结：1.老爸，你把自己包成一个单元格放低姿态设垂直居中。横向水平的交给我来把自己包成一个表格。 2你先定位好，我来平移。
垂直方向的，老爸一个人可以完成。水平方向的，我一个人能搞定。水平方向我偶尔需要和老爸一起完成。
两列布局：
1，兄弟，你先定好宽，然后脱流 我会margin出你的宽。优：简单， 缺：clear:both会乱 position的层次，比float的层次高
2，overflow:hidden 溢出时隐藏。 开启BFC模式-当前元素的内部环境与外界完全隔离
3，父table-layout:fixed display:table #left right{table-cell}
三列布局
1，float+margin
2，float+hidden
3，table
圣杯布局：顺序left right center不利于抓取的顺序（浮动 + 定位 + 平移）
子元素float后，父的height高度坍塌
双飞翼布局：
解决圣杯布局中定位代码的问题 center中加一个inner，在inner上加margin-left和right
等分:
1，float 25%
2，父display:table table-layout:fixed 子display:table-cell
等分，加间隙：套一个父层 间隙+父宽 = （间隙+列宽）* N
box-sizing:border-box 默认content-box 设置后，margin+padding+width = 25%
等高:
1，父display:table table-layout:fixed 子display:table-cell width:100px 用内容撑开即可等高
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 只出现在分隔的地方
column-rule:5px tomato double
column-span:none all
column-fill:auto balance.列高由内容决定，还是以内容最高的一列为准。
overflow:auto 滚动条
弹性布局
direction: ltr
display: flex
flex-direction: column;
justify-content: space-around; // 首尾间距只有其它间距的1/2
align-items: flex-end; // 贴边
order:-1 数字越小，越排在前面
父flex 子margin:auto
align-self: baseline 沿着纵轴方向的对齐方式
子flex:2 分配占比
网格布局：
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, 最大根据内容自适应
grid-gap:{10px}
网友评论