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)外邊距將不會重疊：

獲取盒子寬高

#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;

}

盒子一盒子二

效果圖：

BFC如何解決父元素和子元素的邊距重疊 !

可以在父元素中開啟BFC，盡量使用overflow：hidden；

Document

#a{width:100px;height:100px;overflow:hidden;background-color:yellowgreen;

/*display:inline-block;*/margin:auto;

}#b{width:50px;height:50px;margin:25px;background:pink;}

用BFC解決之前：

父元素的margin和子元素的margin相互重疊

解決之后：

父元素的margin和子元素的margin將不再相互重疊

BFC不與float重疊(給沒有浮動的盒子創建BFC設置 overflow: hidden;)進行頁面布局！

#a{width:100px;height:100px;float:left;background:red;

}#b{background-color:blue;height:200px;overflow:hidden;

}

沒用創建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

總結

以上是生活随笔為你收集整理的css三个块元素重叠,CSS盒模型以及如何解决边距重叠问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。