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，把元素隱藏起來并且會影響頁面布局，可以理解為在頁面中洗掉，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/2135.html
標籤：其他
上一篇：css（一）