盒模型有兩種，W3C 和IE 盒子模型
-
W3C定義的盒模型包括margin、border、padding、content，元素的寬度width=content的寬度
-
IE盒模型與W3C盒模型的唯一區別就是元素的寬度，元素的width=border + padding + content
-
IE定義的盒模型較為合理，所以在css3中新增了box-sizing，包含兩個屬性content-box和border-box。
-
content-box 元素的width = content
-
border-box 元素的width = border + padding + content
1. 對於行內元素 margin-top/margin-bottom對於上下元素無效，margin-left/margin-right有效！ 對於相鄰的塊級元素margin-top和margin-bottom兩者疊加按照一定的規則
（1） 都是整數 margin值取兩者的最大值
（2） 都是負數 margin值取最小值
（3）兩者正負相反，margin值取兩者之和
標准盒模型和IE模型的區別
標准盒模型中width指的是內容區域content的寬度；height指的是內容區域content的高度。
標准盒模型下盒子的大小 = content + border + padding + margin
怪異盒模型中的width指的是內容、邊框、內邊距總的寬度（content + border + padding）；height指的是內容、邊框、內邊距總的高度
怪異盒模型下盒子的大小=width（content + border + padding） + margin
2. 根據盒模型解釋邊距重疊：
BFC（邊距重疊解決方案）：
-
bfc的基本概念：
BFC 全稱為 塊格式化上下文 (Block Formatting Context) 。
-
bfc的原理：
1.BFC，這個元素的垂直方向的邊距會發生重疊。
2.bfc的區域不會與浮動元素的box重疊
3.計算bfc高度的時候浮動元素也會參與計算
4.bfc在頁面上是一個獨立的容器，外面的元素不會影響里面的元素
-
怎么創建bfc：
根元素
1.float屬性不為none
2.position為absolute或fixed
3.display為inline-block, table-cell, table-caption, flex, inline-flex
4.overflow不為visible
-
bfc的使用場景有哪些？
BFC解決兄弟元素垂直方向邊距重疊 （給子元素增加了父元素div）外邊距將不會重疊：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>獲取盒子寬高</title> <style> #box1{ color: white; font-size:50px; text-align: center; line-height:185px; width:300px;height:185px; background: plum; margin:99px; } #box2{width:300px; height:185px; background:pink; color: white; font-size:50px; text-align: center; line-height:185px; margin:99px; } </style> </head> <body> <div id="box1">盒子一</div> <div style="overflow:hidden"><div id="box2">盒子二</div><div> </body> </html>
效果圖：
BFC如何解決父元素和子元素的邊距重疊 !
可以在父元素中開啟BFC，盡量使用overflow：hidden；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #a{ width:100px; height: 100px; overflow: hidden; background-color: yellowgreen; /*display:inline-block;*/ margin:auto; } #b{ width:50px; height: 50px; margin:25px; background: pink;} </style> </head> <body> <div id="a"><div id="b"></div></div> </body> </html>
用BFC解決之前：
父元素的margin和子元素的margin相互重疊
解決之后：
父元素的margin和子元素的margin將不再相互重疊
BFC不與float重疊（給沒有浮動的盒子創建BFC設置 overflow: hidden;）進行頁面布局！
<style type="text/css"> #a{ width: 100px; height: 100px; float:left; background: red; } #b{ background-color: blue; height: 200px; overflow:hidden; } </style> <body> <div id="a"></div> <div id="b"></div> </body>
沒用創建BFC之前會出現元素重疊問題：
這種方式也可以用來去做文字環繞圖片效果！
開啟了BFC之后元素不再重疊就可以悠閑去進行網頁排版了：
這些方法都可以創建 bfc
1.float屬性不為none
float屬性模式是display：inline-block；模式類型為行內塊元素！
2.position為absolute或fixed
3.display為inline-block, table-cell, table-caption, flex, inline-flex
4.overflow不為visible
