題目：談談對css盒模型的基本認識
- 基本概念：標準模型+IE模型
- 標準模型和IE模型的區(qū)別
（計算寬度和高度的不同） - css如何設置這兩種模型
- js如何設置獲取盒模型對應的寬和高
- 實例題（根據(jù)盒模型解釋邊距重疊）
-
BFC（邊距重疊解決方案）
css如何設置這兩種模型巩螃？
box-sizing：content-box（標準模型租幕，也是瀏覽器默認模型）
box-sizing：border-box（ie模型）
js如何設置獲取盒模型對應的寬和高斤葱？
dom.style.width/height（只能獲取內(nèi)聯(lián)屬性的值）
內(nèi)聯(lián)樣式：直接在標簽內(nèi)寫樣式style=""
dom.currentStyle,width/height (只要是瀏覽器渲染出來的dom都能獲取到威始，但是只有ie支持）
window.getComputedStyle(dom).width/height(兼容性更好爵憎，通用）
一個div中嵌套了一個div，子元素高為100px魏宽，子元素與父元素上邊距為10px庶灿，問父元素高為多少，是110px還是100px窄做？
答案：100px或者110px都對愧驱，要看父元素的盒模型怎么設置。
父元素設置了overflow：hidden時椭盏，高度為110px组砚，沒有設置的時候為100px。
<style type="text/css">
.child{
width: 300px;
height: 300px;
margin-top: 20px;
background: #0000FF;
}
.parent{
background: #FF0000;
width: 300px;
/* overflow: hidden; */
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
<style type="text/css">
.child{
width: 300px;
height: 300px;
margin-top: 20px;
background: #0000FF;
}
.parent{
background: #FF0000;
width: 300px;
overflow: hidden;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
補充知識（邊距重疊）
邊界重疊是指兩個或多個盒子(可能相鄰也可能嵌套)的相鄰邊界(其間沒有任何非空內(nèi)容掏颊、補白糟红、邊框)重合在一起而形成一個單一邊界。
兩個或多個塊級盒子的垂直相鄰邊界會重合乌叶，它們的邊界寬度是相鄰邊界寬度中的最大值改化。注意水平邊界是不會重合的。
①父子元素的邊界重疊
- 上面例子中一開始時父元素的高度不是110px枉昏，而是100px陈肛，在這里發(fā)生了高度坍塌。原因是如果塊元素的 margin-top 與它的第一個子元素的margin-top 之間沒有 border兄裂、padding句旱、inline content、 clearance 來分隔晰奖，或者塊元素的 margin-bottom 與它的最后一個子元素的margin-bottom 之間沒有 border谈撒、padding、inline content匾南、height啃匿、min-height、 max-height 分隔，那么外邊距會塌陷溯乒。子元素多余的外邊距會被父元素的外邊距截斷夹厌。也就是說，子元素的外邊距變成了父元素的外邊距裆悄，父元素在進行高度計算時不會對子元素的邊距進行計算矛纹。
②兄弟元素的邊界重疊
<style>
#margin {
background: #E7A1C5;
overflow: hidden;
width: 300px;
}
#margin>p {
background: #C8CDF5;
margin: 20px auto 30px;
}
</style>
<section id="margin">
<p>1</p>
<p>2</p>
<p>3</p>
</section>
可以看到1和2,2和3之間的間距不是50px，發(fā)生了邊距重疊是取了它們之間的最大值30px光稼。
③空元素的邊界重疊
假設有一個空元素或南，它有外邊距，但是沒有邊框或填充艾君。在這種情況下采够，上外邊距與下外邊距就碰到了一起，它們會發(fā)生合并：
bfc（邊距重疊解決方案）
- 基本概念（塊級格式上下文）
- 原理（渲染規(guī)則）
① bfc里的元素垂直方向上的邊距會發(fā)生邊距重疊
②bfc區(qū)域不會與浮動元素發(fā)生重疊
③ bfc在頁面上是一個獨立的容器冰垄，外面的元素不會影響里面的元素吁恍，里面的元素不會影響外面的元素
④ 計算bfc高度的時候，浮動元素也會參與計算 - 如何創(chuàng)建bfc
①float值不為none
②position的值不為static/relative
③display為inline-box/table/table-cell
④overflow：auto/hidden - bfc的使用場景
①清除浮動（解決父元素高度坍塌播演，使父元素計算高度時也將浮動元素高度計算進去）
②BFC垂直方向邊距重疊
解決方法：給其中一個元素再添加一個父元素冀瓦，給父元素觸發(fā)bfc
③布局，左邊固定写烤，右邊自適應（bfc元素不與浮動元素重疊）
