盒模型到底有什么用
1、結(jié)構(gòu)：盒模型
盒模型：頁(yè)面渲染的時(shí)候，dom元素所采用的布局模式?？梢酝ㄟ^(guò)box-sizing進(jìn)行設(shè)置。盒模型由內(nèi)向外由content,padding, border, margin組成。
盒模型分為：wc3標(biāo)準(zhǔn)（內(nèi)容的寬高）和IE盒模型（元素的寬高是conten+padding+border）。
通過(guò)box-sizing，我們可以來(lái)設(shè)置元素盒模型。
一個(gè)例子來(lái)看一下這兩者之間的區(qū)別：
box-sizing設(shè)置為border-box時(shí)，此元素的寬高為當(dāng)前元素的content+padding+border
box-sizing設(shè)置為content-box時(shí)，此元素的寬高為當(dāng)前元素的content，
box-sizing設(shè)置為inherit時(shí)，此元素繼承父元素的屬性。
2、邊界：邊距重疊
為什么會(huì)出現(xiàn)邊距重疊？
即外邊距重疊,指的是毗鄰的兩個(gè)或多個(gè)普通流中的塊元素垂直方向上的外邊距會(huì)合并為一個(gè)外邊距。
以由幾個(gè)段落組成的典型文本頁(yè)面為例。第一個(gè)段落上面的空間等于段落的上外邊距。如果沒(méi)有外邊距合并，后續(xù)所有段落之間的外邊距都將是相鄰上外邊
距和下外邊距的和。這意味著段落之間的空間是頁(yè)面頂部的兩倍。如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就
一致了。注意：只有在普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。
邊距重疊也會(huì)給我們帶來(lái)問(wèn)題。
如圖我只給子元素設(shè)置了margin,但是父元素會(huì)跟著子元素一起有了邊距。
什么情況下會(huì)出現(xiàn)邊距重疊呢？
這兩個(gè)或多個(gè)邊距沒(méi)有被非空內(nèi)容,padding,border或clear分隔開(kāi)。
這些margin都處于普通文檔流中
注意一點(diǎn),在沒(méi)有被分割開(kāi)的情況下,一個(gè)元素的margin-top會(huì)和它普通流的第一個(gè)元素的margin-top相鄰,
只有在一個(gè)元素的height是’auto’的情況下,他的margin-bottom才會(huì)和它普通流中的最后一個(gè)元素(非浮動(dòng)元素等)的margin-bottom相鄰.
折疊后margin的計(jì)算
1.參與折疊的margin都是正值
<div style="height:50px; **margin-bottom:50px;** width:50px; background-color: red;">A</div><div style="height:50px; **margin-top:100px;** width:50px; background-color: green;">B</div>
在 margin 都是正數(shù)的情況下，取其中 margin 較大的值為最終 margin 值.
2.參與折疊的margin都是負(fù)值
```<div style="height:50px; **margin-bottom:-75px;** width:50px; background-color: red;">A</div><div style="height:50px; **margin-top:-50px;** width:50px; background-color: green;">B</div>```
在 margin 都是負(fù)值的時(shí)候,取的是其中絕對(duì)值較大的,然后從零開(kāi)始,負(fù)向位移.
3.參與折疊的margin中有正值有負(fù)值
```<div style="height:50px; **margin-bottom:-50px;** width:50px; background-color: red;">A</div><div style="height:50px; **margin-top:100px;** width:50px; background-color: green;">B</div>```
在 margin中有正值有負(fù)值的時(shí)候,要從所有負(fù)值中選出絕對(duì)值最大的,所有正值中選擇絕對(duì)值最大的,二者相加,此例的結(jié)果即為: 100px + (-50)px =50px;
4.相鄰的margin要一起參與計(jì)算
```<div style="margin:50px 0; background-color:green; width:50px;"><div style="**margin:-60px 0;**"><div style="**margin:150px 0;**">A</div></div></div><div style="**margin:-100px 0**; background-color:green; width:50px;"><div style="**margin:-120px 0;**"><div style="**margin:200px 0;**">B</div></div></div>```
請(qǐng)注意，多個(gè) margin 相鄰折疊成一個(gè) margin，所以計(jì)算的時(shí)候，應(yīng)該取所有相關(guān)的值一起計(jì)算，而不能分開(kāi)分步來(lái)算。
以上例子中，A 和 B 之間的 margin 折疊產(chǎn)生的 margin，是6個(gè)相鄰 margin 折疊的結(jié)果。將其 margin 值分為兩組：
正值：50px，150px，200px
負(fù)值：-60px，-100px，-120px
根據(jù)有正有負(fù)時(shí)的計(jì)算規(guī)則，正值的最大值為 200px，負(fù)值中絕對(duì)值最大的是 -120px，所以，最終折疊后的 margin 應(yīng)該是 200 + (-120) = 80px。
浮動(dòng)元素,inline-block元素,絕對(duì)定位的元素和創(chuàng)建了塊級(jí)格式化上下文的元素，不和它的子元素發(fā)生 margin 折疊
另外,要注意,自身的margin-botom和margin-top相鄰時(shí)也會(huì)發(fā)生重疊,只有當(dāng)自身內(nèi)容為空,垂直方向上border,padding,均為空時(shí),自身的margin-top與margin-bottom才會(huì)相鄰.
3、如何解決邊距重疊
（1）、外層元素用padding代替
（2）、內(nèi)層元素透明邊框border:1px solid transparent;
（3）、內(nèi)層元素使用絕對(duì)定位postion:absolute
（4）、外層元素使用overflow:hidden;
（5）、內(nèi)層元素 加float:left;或display:inline-block;
（6）、內(nèi)層元素padding:1px.
4、BFC
塊級(jí)格式化上下文，是一個(gè)獨(dú)立的渲染區(qū)域，讓處于 BFC 內(nèi)部的元素與外部的元素相互隔離，使內(nèi)外元素的定位不會(huì)相互影響。
觸發(fā)BFC的條件
根元素position: absolute/fixeddisplay:inline-block / tablefloat元素ovevflow !== visible
規(guī)則
屬于同一個(gè) BFC 的兩個(gè)相鄰Box垂直排列屬于同一個(gè) BFC 的兩個(gè)相鄰Box的 margin 會(huì)發(fā)生重疊BFC 中子元素的 margin box 的左邊，與包含塊(BFC) border box的左邊相接觸(子元素 absolute 除外)BFC 的區(qū)域不會(huì)與float的元素區(qū)域重疊計(jì)算 BFC 的高度時(shí)，浮動(dòng)子元素也參與計(jì)算文字層不會(huì)被浮動(dòng)層覆蓋，環(huán)繞于周?chē)?/span>
應(yīng)用
阻止margin重疊可以包含浮動(dòng)元素——清除內(nèi)部浮動(dòng)(清除浮動(dòng)的原理是兩個(gè)div都位于同一個(gè) BFC 區(qū)域之中)自適應(yīng)兩欄布局可以阻止元素被浮動(dòng)元素覆蓋