实现居中对齐
1.在知道父级高度的情况下:
a. 上下居中,在知道自身高度的情况下根据计算使用padding和margin实现
b. 也可以使用line-height来实现
c.在父元素跟子元素行高一致时,可以设置子元素vertical-align: middle,且子元素为行内元素
注意:关于vertical-align: middle,看这里
2.在不知道父级高度的情况下:
a. 知道自身高度的情况下,使用absolute,配合margin来实现
b. 在不知道自身高度情况下,使用absolute,配合transform来实现
c.使用flex模式,直接align-items: center;上下居中,justify-content:center
清除浮动
1.浮动初衷:实现文字环绕
2.浮动负面效果:父级高度塌陷
3.浮动属于半脱离文档流,他与其他为浮动元素相比会出现相似absolute的效果,但相同的float又不会互相重叠,且float会占据位置
4.清除浮动的方法
a. 在css中本身就有移除浮动的样式clear:both,表示该元素左右不允许浮动,这个时候父元素可以捕捉到它,实现撑开高度
b. 直接设置好高度(不建议)
c.设置overflow:hidden;或者display:inline-block
box-sizing
1.一般默认值为content-box,(直译:内容盒子),宽高只包含content的内容,不包含padding和boder
2.border-box(直译:边框盒子),宽高包含padding和border
css权重
!important > 内联样式 > id选择 > (class选择 = 伪类选择) > (标签选择 = 伪元素选择)
什么是重绘和回流
1.重绘是指元素更新属性,只会影响颜色风格,不会影响布局的属性,比如color,background-color,这些称为重绘
2.回流是指更改布局,例如元素尺寸,显隐,位置等等更改结构的变动
3.重绘不一定回流,回流一定重绘
为什么建议使用transform
transform不会引起整个页面回流重绘,节省性能消耗,但是占用内存会相对大些
margin top之类的会出现回流
position
static:默认值,无视top/left/right/bottom
relative:相对定位,处于文档流,top/left/right/bottom会发生相应改变
absolute:绝对定义位,脱离文档流,top/left/right/bottom会根据定位变动位置,(定位由第一个已经定位过的属性或者根目录决定)
fixed:固定定位,脱离文档流,定位规则为相对窗口,top/left/right/bottom会根据定位变动位置
stick:粘性定位,依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。实现粘性布局(兼容性差)
margin重叠现象
在垂直方向上相邻的两个元素如果有相向的margin的设置时,margin回重叠,并且以较大的为最终显示结果
解决办法:
1,不要margin相向,可以用padding替代
2,设置float
3,设置display: inline-block
disable:none与visibility:hidden的区别
disable:none会使元素消失,不会占用空间
vsibility:hidden 元素还占据空间 但是不可见 会影响布局
理解BFC、IFC、GFC、FFC
看这里