瀏覽器回流與重繪
之所以能在頁(yè)面上看到內(nèi)容，是因?yàn)闉g覽器拿到服務(wù)器發(fā)送的數(shù)據(jù)后，開(kāi)始做解析標(biāo)簽樣式的操作，然后維護(hù)了一棵Dom樹和Style樹。
回流（重排）：是指瀏覽器重新刷新整個(gè)或者部分模塊的Dom或者Style樹，然后在頁(yè)面上進(jìn)行重新渲染。而引起重新渲染的條件可能是改變某個(gè)div的位置、大小或者結(jié)構(gòu)等。
重繪：是指部分樣式的修改，比如color、background-color或者visibility等的改變，不會(huì)改動(dòng)Dom樹原本的樣子或者位置，這樣的改動(dòng)會(huì)造成瀏覽器的重繪。
回流必然引起重繪，但是重繪并不一定會(huì)引起回流。由上介紹也可知道，回流更加消耗資源，盡量減少回流次數(shù)，比如修改樣式的時(shí)候使用style.cssText一次性設(shè)置，或者使用.class樣式一次性修改class，或者在樣式修改完成后在將其display設(shè)置為block等。
還有就是：重排也不是立即執(zhí)行的，必須要等到重排隊(duì)列中數(shù)量的操作或者等到一定的時(shí)間間隔才會(huì)執(zhí)行重排操作。還有一種可能是會(huì)立即重排的，不管重排隊(duì)列中操作多少或者間隔時(shí)間是否到了，都會(huì)立即發(fā)生，那就是如下：
div.style.width = "200px";
div.style.height = "300px";
//此時(shí)并不一定會(huì)執(zhí)行2次重排，原因上文已經(jīng)說(shuō)了。
div.style.width = "200px";
console.log(div.offsetWidth);
div.style.height = "300px";
console.log(div.offsetHeight);
//這種情況就會(huì)重繪2次，因?yàn)樵谠O(shè)置完width后，立即取了寬度，瀏覽器知道你需要寬度，所以會(huì)立即重排操作，然后給你最新的寬度。
css權(quán)重
css中存在權(quán)重，權(quán)重大的會(huì)優(yōu)先顯示，所以會(huì)出現(xiàn)，都設(shè)置了某一個(gè)div的顏色，但是只會(huì)顯示一種的原因（css中某個(gè)div的顏色顯示什么，并不是由什么外部樣式，內(nèi)部樣式，行內(nèi)樣式?jīng)Q定的，也不是由樣式表加載順序確定的，而是css權(quán)重確定）更詳細(xì)介紹。如何計(jì)算權(quán)重？可以這樣計(jì)算，將其分為#style -> 千位 #id -> 百 .class -> 十 div -> 個(gè)位，標(biāo)記為四位數(shù)，看見(jiàn)一個(gè)類型就在對(duì)應(yīng)的位置+1若超過(guò)10不進(jìn)位。
-
!important：只要設(shè)置，則顯示其樣式，權(quán)重最高，可以直接忽略其他權(quán)重。 -
style：看見(jiàn)此行內(nèi)樣式，則在千位做+1操作。 -
#id：樣式中看見(jiàn)此選擇器，則在百位做+1操作。 -
.calss | :hover | ...：樣式中看見(jiàn)類選擇器偽類選擇器，則在十位做+1操作。 -
span | ::after | ...：樣式中看見(jiàn)標(biāo)簽選擇器偽元素選擇器，則在個(gè)位做+1操作。
舉個(gè)例子：
<style>
#one { /*div#one樣式的權(quán)重為0100*/
color: yellow;
}
#two { /*span#two樣式的權(quán)重為0100*/
color: blue;
}
#one #two { /*span#two樣式的權(quán)重為0200，所有顯示紅色*/
color: red;
}
</style>
<div id="one">
<span id="two">我是紅色</span>
</div>
<!-- 另一個(gè)例子 -->
<style>
div.one { /*div.one樣式的權(quán)重為0011*/
color: yellow;
}
.one { /*div.one樣式的權(quán)重為0010*/
color: red;
}
</style>
<div class="one">我是黃顏色</div>
BFC布局
首先，什么事BFC布局？
BFC布局是一種塊級(jí)格式化布局方式，通過(guò)設(shè)定特定的屬性值，可以讓一個(gè)盒子或模塊變成一個(gè)特殊的區(qū)域。在這個(gè)區(qū)域內(nèi)的樣式不會(huì)影響到外部，外部也不會(huì)影響到內(nèi)部。而且在其內(nèi)部區(qū)域中，浮動(dòng)的元素是會(huì)計(jì)算高度的，所以可以用來(lái)解決浮動(dòng)元素的父元素高度撐不開(kāi)的問(wèn)題，當(dāng)然還可以解決其他問(wèn)題，比如：
1、解決margin重疊問(wèn)題
2、如果出現(xiàn)浮動(dòng)元素遮蓋兄弟元素的情況，可以將兄弟元素設(shè)置為BFC模式規(guī)避遮擋（因?yàn)锽FC的區(qū)域不會(huì)與float的元素區(qū)域重疊）
3、解決浮動(dòng)元素，父級(jí)撐不開(kāi)的問(wèn)題
4、了解更多傳送門
Flex布局
Flex為流式布局，是一種新的布局方式。其分為主軸和交叉軸。其中容器的屬性有：flex-direction flex-wrap flex-flow justify-content aligin-items align-content。元素的屬性有：order flex-grow flex-shrink flex-basis flex align-self。
