CSS(二)

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，把元素隐藏起来并且会影响页面布局，可以理解为在页面中删除。