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.老爸,不用你费心,全部我来搞定,我设table3,老爸你先定位,我来平移垂直居中: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:leftCSS3布局:
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 doublecolumn-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}
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- EffectiveObjective-C2.0|EffectiveObjective-C2.0 笔记 - 第二部分
- Android中的AES加密-下
- 【读书笔记】贝叶斯原理
- 【韩语学习】(韩语随堂笔记整理)
- 人性的弱点-笔记
- 读书笔记:博登海默法理学|读书笔记:博登海默法理学 —— 正义的探索(1)
- D034+3组苏曼+《写作这回事》读书笔记
- 《自我的追寻》读书笔记3
- 最有效的时间管理工具(赢效率手册和总结笔记)
- 机器学习|机器学习 Andrew Ng《Machine Learning》课程笔记1