2,布局笔记

水平居中: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-cell类似
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}

你可能感兴趣的:(2,布局笔记)