1.BFC(块级格式上下文,用于清除浮动,防止margin重叠等)
块级格式上下文,是一个独立的渲染区域,并且有一定的布局规则。BFC区域不会与float box重叠,BFC是页面上的一个独立的容器,子元素不会影响到外面,计算BFC高度时,浮动元素也会参与计算。
1.1哪些元素会生成BFC
根元素,float不为none的元素,position为fixed和absolute的元素,display为inline-bolck,table-cell,table-caption,flex,inline-flex,的元素。overflow不为visiable的元素。
2.垂直居中的方法
(1)magin:0 auto定位为上下左右为0,margin为0可以实现脱离文档流居中
(2)margin负值法,margin-top设为-height的一半,margin-top设为-width的一半
(3)transform:translate(-50%,-50%)
(4)flex布局:justify-content:center;aligin-items:center;
(5)table-cell(未脱离文档流的)设置父元素的display:table-cell;vertical-align:middle
3.js动画和css3动画的差异性
渲染线程分为main thread(主线程)和compositor thread(),如果css只改变transform和opcaity,这时整个css动画得以在compsitor thread完成(而js动画则会在main thread执行,然后发出compositor thread进行下一步操作),特别注意的是如果改变transform和opacity是不会layout或者paint的。
区别:涵盖功能面,js比css大;实现/重构难度不一,css比js更加简单,性能调优方向固定;对帧速表现不好的低版本浏览器,css3可以做到自然降级;css有天然事件的支持,js需要自己写事件;css3有兼容性问题,而js大多时候没有兼容性问题。
4.块元素和行元素
块元素:独占一行,并且自动填满父元素,可以设置margin,padding,宽度和高度。
行元素:不独占一行,width和height失效,并且垂直方向的margin,padding失效。
5.visiblity=hidden;opacity=0;display:none
- opacity=0,该元素隐藏起来,且不会改变页面的布局,如果该元素有绑定事件,如点击事件,那么再次点击该元素依旧会触发该事件。Visibility=hidden,该元素隐藏起来,不影响页面布局,不会触发绑定事件。Display=none,把元素隐藏起来并且会影响页面布局,可以理解为在页面中删除。