1.css盒子模型
? ??CSS css盒子模型 又稱框模型 (Box Model) ，包含了元素內(nèi)容（content）烙常、內(nèi)邊距（padding）、邊框（border）、外邊距（margin）幾個(gè)要素谢谦。如圖：
圖中element代表的就是盒子內(nèi)容，周圍是padding（內(nèi)邊距）萝衩，以及邊框border回挽，ele+padding+border整體構(gòu)成了元素本身的大小。外圍的margin則代表了盒子的移動大小猩谊。外邊距margin是透明的千劈，不會遮擋周邊的其他元素。
在繪制的時(shí)候相鄰的普通文本流內(nèi)部的盒子模型會產(chǎn)成覆蓋效果也叫外邊距疊加：兩個(gè)上下方向相鄰的元素框垂直相遇時(shí)牌捷，外邊距會合并墙牌，合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距中較高的那個(gè)邊距值，如圖：
處理方法：行內(nèi)框暗甥、浮動框或絕對定位之間的外邊距不會合并憔古。
實(shí)際開發(fā)會遇到的一些相關(guān)小問題：
比如：當(dāng)父元素沒有邊框border時(shí)，設(shè)置第一個(gè)子元素的margin-top值的時(shí)候淋袖，會出現(xiàn)margin-top值加在父元素上的現(xiàn)象鸿市，解決方法有四個(gè)：
（1）給父元素加邊框border （副作用）
（2）給父元素設(shè)置padding值 ?（副作用）
（3）父元素添加 overflow：hidden （副作用）
（4）父元素加前置內(nèi)容生成。（推薦）
第四種方法就是：.parent {width : 500px;height : 500px;background-color : red;}
.parent : before {content : " ";display : table;}
.child {width : 200px;height : 200px;background-color : green;margin-top : 50px;}
2.css 頁面重繪和回流
要知道這個(gè)就要先了解瀏覽器頁面渲染過程：
1.? 瀏覽器把獲取到的HTML代碼解析成1個(gè)DOM樹即碗，HTML中的每個(gè)標(biāo)簽都是DOM樹中的1個(gè)節(jié)點(diǎn)焰情，根節(jié)點(diǎn)就是常用的document對象。DOM樹里包含了所有HTML標(biāo)簽剥懒，包括display:none隱藏内舟，還有用JS動態(tài)添加的元素等。
2. 瀏覽器把所有樣式(用戶定義的CSS和用戶代理)解析成樣式結(jié)構(gòu)體初橘，在解析的過程中會去掉瀏覽器不能識別的樣式验游，比如IE會去掉-moz開頭的樣式，而FF會去掉_開頭的樣式保檐。
3耕蝉、DOM Tree 和樣式結(jié)構(gòu)體組合后構(gòu)建render tree, render tree類似于DOM tree，但區(qū)別很大夜只，render tree能識別樣式垒在，render tree中每個(gè)NODE都有自己的style，而且?render tree不包含隱藏的節(jié)點(diǎn)?(比如display:none的節(jié)點(diǎn)扔亥，還有head節(jié)點(diǎn))场躯，因?yàn)檫@些節(jié)點(diǎn)不會用于呈現(xiàn)谈为，而且不會影響呈現(xiàn)的，所以就不會包含到 render tree中踢关。注意 visibility:hidden隱藏的元素還是會包含到 render tree中的伞鲫，因?yàn)関isibility:hidden 會影響布局，會占有空間签舞。根據(jù)CSS2的標(biāo)準(zhǔn)榔昔，render tree中的每個(gè)節(jié)點(diǎn)都稱為Box ，理解頁面元素為一個(gè)具有填充瘪菌、邊距撒会、邊框和位置的盒子。
4. 一旦render tree構(gòu)建完畢后师妙，瀏覽器就可以根據(jù)render tree來繪制頁面了诵肛。
所以當(dāng)render tree中的一部分(或全部)因?yàn)樵氐囊?guī)模尺寸，布局默穴，隱藏等改變而需要重新構(gòu)建怔檩。這就稱為回流。
當(dāng)render tree中的一些元素需要更新屬性蓄诽，而這些屬性只是影響元素的外觀薛训，風(fēng)格，而不會影響布局的仑氛，比如background-color乙埃。則就叫稱為重繪。
注意了：每個(gè)頁面至少需要一次回流锯岖，就是在頁面第一次加載的時(shí)候介袜。在回流的時(shí)候，瀏覽器會使渲染樹中受到影響的部分失效出吹，并重新構(gòu)造這部分渲染樹遇伞，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中捶牢。
當(dāng)? ?1. 添加或者刪除可見的DOM元素? ??
2.元素位置改變? ??
3.元素尺寸改變——邊距鸠珠、填充、邊框秋麸、寬度和高度? ??
4.內(nèi)容改變——比如文本改變或者圖片大小改變而引起的計(jì)算值寬度和高度改變? ??
5.頁面渲染初始化
6渐排。瀏覽器窗口尺寸改變——resize事件發(fā)生時(shí)
發(fā)生這些影響到元素位置移動的事件就會產(chǎn)生回流，而如果只是改變顏色竹勉，斜體飞盆，下劃線等不影響位置的操作就會產(chǎn)生重繪娄琉。
所以對此方面有性能優(yōu)化的根本就是減少頁面css的回流操作次乓。
瀏覽器本身會維護(hù)1個(gè)隊(duì)列吓歇，把所有會引起回流、重繪的操作放入這個(gè)隊(duì)列票腰，等隊(duì)列中的操作到了一定的數(shù)量或者到了一定的時(shí)間間隔城看，瀏覽器就會flush隊(duì)列，進(jìn)行一個(gè)批處理杏慰。這樣就會讓多次的回流测柠、重繪變成一次回流重繪。但有時(shí)候我們寫的一些代碼可能會強(qiáng)制瀏覽器提前flush隊(duì)列缘滥，這樣瀏覽器的優(yōu)化可能就起不到作用了轰胁。當(dāng)你請求向?yàn)g覽器請求一些 style信息的時(shí)候，就會讓瀏覽器flush隊(duì)列朝扼。
減少對render tree的操作（合并多次多DOM和樣式的修改）赃阀，并減少對一些style信息的請求，盡量利用好瀏覽器的優(yōu)化策略
方法：
1. 將多次改變樣式屬性的操作合并成一次操作擎颖。
2.將需要多次重排的元素榛斯，position屬性設(shè)為absolute或fixed，這樣此元素就脫離了文檔流搂捧，它的變化不會影響到其他元素驮俗。例如有動畫效果的元素就最好設(shè)置為絕對定位。
3. 在內(nèi)存中多次操作節(jié)點(diǎn)允跑，完成后再添加到文檔中去王凑。例如要異步獲取表格數(shù)據(jù)，渲染到頁面聋丝』绯纾可以先取得數(shù)據(jù)后在內(nèi)存中構(gòu)建整個(gè)表格的html片段，再一次性添加到文檔中去潮针，而不是循環(huán)添加每一行术荤。
4. 由于display屬性為none的元素不在渲染樹中，對隱藏的元素操作不會引發(fā)其他元素的重排每篷。如果要對一個(gè)元素進(jìn)行復(fù)雜的操作時(shí)瓣戚，可以先隱藏它，操作完成后再顯示焦读。這樣只在隱藏和顯示時(shí)觸發(fā)2次重排子库。
5. 在需要經(jīng)常取那些引起瀏覽器重排的屬性值時(shí)，要緩存到變量矗晃。
PS：今天遇到的小問題：在調(diào)用到iframe插入頁面中的時(shí)候在iframe中調(diào)用或者處理外部body的dom元素時(shí)就寫top仑嗅。document來獲取到外部頂級的document，如果是多層嵌套取到父級的就是parent.document啦
