一、水平垂直居中
1.position:absolute+transform:translate(-50%,-50%)
2.position:absolute+margin-top:-100px+margin-left:-100px(需要直到div的寬高)
3.flex
4.絕對定位的top，left，bottom，right都設(shè)置為0，然后通過margin:auto實現(xiàn)水平垂直居中
5.display:table-cell;vertical-align:middle;text-align:center
6.calc函數(shù)計算實現(xiàn)
二、display:none;--visibility:hidden--opcity:0的區(qū)別
display:none;
1.DOM結(jié)構(gòu)：元素不會渲染
2.事件監(jiān)聽：不能監(jiān)聽DOM事件
3.繼承：子元素不會繼承
4.性能：改變此屬性會重排，性能較差
visibility:hidden
1.DOM結(jié)構(gòu)：元素會渲染
2.事件監(jiān)聽：能監(jiān)聽DOM事件
3.繼承：子元素會繼承，可以通過visibility:visible;來取消繼承
4.性能：改變此屬性會重繪，性能較好
opcity:0
1.DOM結(jié)構(gòu)：元素會渲染
2.事件監(jiān)聽：能監(jiān)聽DOM事件
3.繼承：子元素會繼承，而且不能通過opcity：1;來取消隱藏
4.性能：改變此屬性會重繪，性能較好
三、1px邊框問題
產(chǎn)生原因：
window.divicePixelRatio=2(默認(rèn))
意思是：我們css中1px相當(dāng)于實際移動端設(shè)備2px
解決方法：
1.border-width:0.5px
2.box-shadow內(nèi)陰影模擬邊框，
box-shadow:inset 0px -1px 1px 1px red;
3.通過viewport設(shè)置rem的基準(zhǔn)值，就可以直接寫rem了，較好的解決方案
4.偽類+transform
通過:after或:before設(shè)置border，結(jié)合定位
四、圣杯布局和雙飛翼布局
兩側(cè)寬度固定，中間寬度自適應(yīng)
五、瀏覽器渲染機制，重繪和回流
- 瀏覽器渲染機制
- 瀏覽器采用流式布局
- 瀏覽器會把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就形成渲染樹
- 有了渲染樹，我們就知道所有節(jié)點的樣式，然后計算他們在頁面上的大小和位置，把它們繪制到頁面上
- 注意：瀏覽器采用流式布局，對渲染樹的計算只需要遍歷一次就能完成，但table布局除外，他需要花費3備的時間，所以我們要盡量避免使用table布局
- 重繪
元素樣式發(fā)生變化，但是不影響頁面整個布局的情況下會進行重繪，如outline、visibility、color、background-color等 - 回流
影響部分或全部頁面的布局時，會進行回流，回流的代價比重繪高
回流一定會引起重繪，但重繪不一定會引起回流 -
瀏覽器優(yōu)化
瀏覽器是通過隊列機制來批量更新布局，瀏覽器刷新頻率為（60幀/s）,每刷新一次需要16.6ms，也就是說16.6ms瀏覽器會清空隊列，但是在我們獲取布局信息的時候，有一些屬性或方法會強制瀏覽器刷新，觸發(fā)重繪和回流并且清空隊列，比如：
強制觸發(fā)瀏覽器刷新
所以我們要盡量少使用以上屬性和方法
- 減少重繪和回流
- 使用transform代替top
- 使用visibility(只觸發(fā)重繪)代替display(觸發(fā)回流)
- 盡可能在DOM樹的末端改變class，影響盡量少的節(jié)點
- css選擇器盡量不要嵌套過深，從右往左匹配
- 動畫效果最好添加到position：absolute或fixed的元素上，不影響其他元素，只引發(fā)重繪，不引發(fā)回流，控制動畫的速度可以使用requestAnimationFrame()
- 避免使用css表達(dá)式，calc()會引發(fā)回流
- 將頻繁重繪或回流的節(jié)點設(shè)置為圖層，如：will-change，video，iframe，cavas，防止影響別的節(jié)點
- CSS3硬件加速，transform，opacity等不會引起回流重繪
