盒模型的認識
- 基本概念：標準模型+IE模型。 包括margin,border,padding,content
- 標準模型和IE模型的區(qū)別
- css如何設置獲取這兩種模型的寬和高
- js如何設置獲取盒模型對應的寬和高
- 根據盒模型解釋邊距重疊
- BFC（邊距重疊解決方案，還有IFC）解決邊距重疊
一、基本概念：標準模型+IE模型
什么是盒模型：盒模型又稱框模型（Box Model）,包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。如圖：
由于IE盒模型的怪異模式，IE模型和標準模型的內容計算方式不同。
二、標準模型和IE模型的區(qū)別
IE模型和標準模型唯一的區(qū)別是內容計算方式的不同，如下圖所示：
IE模型元素寬度width=content+padding，高度計算相同
標準模型元素寬度width=content，高度計算相同
三、css如何設置獲取這兩種模型的寬和高
通過css3新增的屬性 box-sizing: content-box | border-box分別設置盒模型為標準模型（content-box）和IE模型（border-box）。
.content-box {
box-sizing:content-box;
width: 100px;
height: 50px;
padding: 10px;
border: 5px solid red;
margin: 15px;
}
.content-box設置為標準模型，它的元素寬度width=100px。
.border-box {
box-sizing: border-box;
width: 100px;
height: 50px;
padding: 10px;
border: 5px solid red;
margin: 15px;
}
.border-box設置為IE模型，它的元素寬度width=content + 2 * padding + 2 * border = 70px + 2 * 10px + 2 * 5px = 100px。
四、javascript如何設置獲取盒模型對應的寬和高
-
dom.style.width/height只能取到行內樣式的寬和高，style標簽中和link外鏈的樣式取不到。 -
dom.currentStyle.width/height取到的是最終渲染后的寬和高，只有IE支持此屬性。 -
window.getComputedStyle(dom).width/height同（2）但是多瀏覽器支持，IE9以上支持。 -
dom.getBoundingClientRect().width/height也是得到渲染后的寬和高，大多瀏覽器支持。IE9以上支持，除此外還可以取到相對于視窗的上下左右的距離
以上API在瀏覽器中測試過，有興趣可以都試一下
五、外邊距重疊
當兩個垂直外邊距相遇時，他們將形成一個外邊距，合并后的外邊距高度等于兩個發(fā)生合并的外邊距的高度中的較大者。注意：只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并，行內框、浮動框或絕對定位之間的外邊距不會合并。
且看下面例子：
<section id="sec">
<style media="screen">
* {
margin: 0;
padding: 0;
}
#sec {
background: #f00;
}
.child {
height: 100px;
margin-top: 10px;
background: yellow;
}
</style>
<article class="child"></article>
</section>
這里父元素section的高度是多少呢，100px，但是我們給section設置overflow:hidden后高度就變成110px，這是為什么呢，其實這里我們給父元素創(chuàng)建了BFC。，什么是BFC,請看下面的介紹。
六、BFC
BFC(Block Formatting Context)：塊級格式化上下文。
BFC決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。當設計到可視化布局的時候，BFC提供了一個環(huán)境，HTML元素在這個環(huán)境中按照一定的規(guī)則進行布局。一個環(huán)境中的元素不會影響到其他環(huán)境中的布局。
BFC的原理（渲染規(guī)則）
- BFC元素垂直方向的邊距會發(fā)生重疊。屬于不同BFC外邊距不會發(fā)生重疊
- BFC的區(qū)域不會與浮動元素的布局重疊。
- BFC元素是一個獨立的容器，外面的元素不會影響里面的元素。里面的元素也不會影響外面的元素。
- 計算BFC高度的時候，浮動元素也會參與計算(清除浮動)
如何創(chuàng)建BFC
- overflow不為visible;
- float的值不為none；
- position的值不為static或relative；
- display屬性為inline-blocks,table,table-cell,table-caption,flex,inline-flex;
說了這么多規(guī)則，放幾個實類出來看看。
<section id="margin">
<style>
* {
padding: 0;
margin: 0;
}
#margin {
background: pink;
overflow: hidden;
}
p {
margin: 15px auto 25px;
background: red;
}
</style>
<p>1</p>
<div style="overflow: hidden">
<p>2</p>
</div>
<p>3</p>
<p>4</p>
</section>
請看這里的第二個p元素<p>2</p>他被一個父元素包裹，并且父元素有 overflow:hidden 樣式，前面的如何創(chuàng)建BFC的第一條就說了 overflow:hidden 可以創(chuàng)建一個BFC。結果如下圖所示。
我們看這里的2，它的上下外邊距都沒有與1和3發(fā)生重疊，但3與4外邊距發(fā)生了重疊。這就解釋了BFC創(chuàng)建了一個獨立的環(huán)境，這個環(huán)境中的元素不會影響到其他環(huán)境中的布局，所以BFC內的外邊距不與外部的外邊距發(fā)生重疊。
再看看下面的列子：
<section id="layout">
<style media="screen">
#layout {
background: red;
}
#layout .left {
float: left;
width: 100px;
height: 100px;
background: pink;
}
#layout .right {
height: 110px;
background: #ccc;
}
</style>
<div class="left"></div>
<div class="right"></div>
</section>
效果如下：
寫過前端頁面的我們肯定遇到過這種情況，這里其實是浮動元素疊在 .right 元素的上面，如果我們想讓.right元素不會延伸到 float元素怎么辦,其實我們在.right元素上加 overflow:hidden （用其他的方式創(chuàng)建BFC也可以）創(chuàng)建BFC就可以解決。因為BFC不會與浮動元素發(fā)生重疊。
還有一種情況很常見，就是由于子元素浮動，導致父元素的高度不會把浮動元素算在內，那么我們在父元素創(chuàng)建BFC就可以讓可以讓浮動元素也參與高度計算。
IFC這里就不介紹，大家可以自行搜索。
