一酗捌、水平垂直居中
1.position:absolute+transform:translate(-50%,-50%)
2.position:absolute+margin-top:-100px+margin-left:-100px(需要直到div的寬高)
3.flex
4.絕對(duì)定位的top，left，bottom，right都設(shè)置為0纽门，然后通過margin:auto實(shí)現(xiàn)水平垂直居中
5.display:table-cell;vertical-align:middle;text-align:center
6.calc函數(shù)計(jì)算實(shí)現(xiàn)
二、display:none;--visibility:hidden--opcity:0的區(qū)別
display:none;
1.DOM結(jié)構(gòu)：元素不會(huì)渲染
2.事件監(jiān)聽：不能監(jiān)聽DOM事件
3.繼承：子元素不會(huì)繼承
4.性能：改變此屬性會(huì)重排，性能較差
visibility:hidden
1.DOM結(jié)構(gòu)：元素會(huì)渲染
2.事件監(jiān)聽：能監(jiān)聽DOM事件
3.繼承：子元素會(huì)繼承陶耍，可以通過visibility:visible;來取消繼承
4.性能：改變此屬性會(huì)重繪，性能較好
opcity:0
1.DOM結(jié)構(gòu)：元素會(huì)渲染
2.事件監(jiān)聽：能監(jiān)聽DOM事件
3.繼承：子元素會(huì)繼承她混，而且不能通過opcity：1;來取消隱藏
4.性能：改變此屬性會(huì)重繪烈钞，性能較好
三泊碑、1px邊框問題
產(chǎn)生原因：
window.divicePixelRatio=2(默認(rèn))
意思是：我們css中1px相當(dāng)于實(shí)際移動(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)
五、瀏覽器渲染機(jī)制砚作，重繪和回流
- 瀏覽器渲染機(jī)制
- 瀏覽器采用流式布局
- 瀏覽器會(huì)把HTML解析成DOM窘奏，把CSS解析成CSSOM，DOM和CSSOM合并就形成渲染樹
- 有了渲染樹葫录，我們就知道所有節(jié)點(diǎn)的樣式着裹，然后計(jì)算他們?cè)陧撁嫔系拇笮『臀恢茫阉鼈兝L制到頁面上
- 注意：瀏覽器采用流式布局米同，對(duì)渲染樹的計(jì)算只需要遍歷一次就能完成骇扇，但table布局除外，他需要花費(fèi)3備的時(shí)間面粮，所以我們要盡量避免使用table布局
- 重繪
元素樣式發(fā)生變化匠题，但是不影響頁面整個(gè)布局的情況下會(huì)進(jìn)行重繪，如outline但金、visibility韭山、color、background-color等 - 回流
影響部分或全部頁面的布局時(shí)冷溃，會(huì)進(jìn)行回流钱磅，回流的代價(jià)比重繪高
回流一定會(huì)引起重繪，但重繪不一定會(huì)引起回流 -
瀏覽器優(yōu)化
瀏覽器是通過隊(duì)列機(jī)制來批量更新布局似枕，瀏覽器刷新頻率為（60幀/s）,每刷新一次需要16.6ms盖淡，也就是說16.6ms瀏覽器會(huì)清空隊(duì)列，但是在我們獲取布局信息的時(shí)候凿歼，有一些屬性或方法會(huì)強(qiáng)制瀏覽器刷新褪迟，觸發(fā)重繪和回流并且清空隊(duì)列，比如：
強(qiáng)制觸發(fā)瀏覽器刷新
所以我們要盡量少使用以上屬性和方法
- 減少重繪和回流
- 使用transform代替top
- 使用visibility(只觸發(fā)重繪)代替display(觸發(fā)回流)
- 盡可能在DOM樹的末端改變class答憔，影響盡量少的節(jié)點(diǎn)
- css選擇器盡量不要嵌套過深味赃，從右往左匹配
- 動(dòng)畫效果最好添加到position：absolute或fixed的元素上，不影響其他元素虐拓，只引發(fā)重繪心俗，不引發(fā)回流，控制動(dòng)畫的速度可以使用requestAnimationFrame()
- 避免使用css表達(dá)式，calc()會(huì)引發(fā)回流
- 將頻繁重繪或回流的節(jié)點(diǎn)設(shè)置為圖層城榛，如：will-change揪利，video，iframe狠持，cavas疟位，防止影響別的節(jié)點(diǎn)
- CSS3硬件加速，transform喘垂，opacity等不會(huì)引起回流重繪
