垂直外邊距的重疊
-相鄰的垂直方向外邊距發生重疊現象
-兄弟元素
-兄弟元素間的相鄰垂直外邊距會取二者之間的較大值（二者都是正值）
-特殊情況：
如果相鄰的外邊距一正一負，則取兩者的和
如果相鄰的外邊距都是負值，則取兩者中絕對值較大的
-兄弟元素之間的外邊距的重疊，對於開發是有利的，所以我們不需要處理
第一種情況：
doctype html效果如下：>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
<
title
>document
title
>
<
style
>
.box1,.box2
.box1
.box2
style
>
head
>
<
body
>
<
div
class
="box1"
>
div>
<
div
class
="box2"
>
div>
body
>
html
>
第二中情況（相鄰外邊距的值一正一負）：
doctype html效果如下：>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
<
title
>document
title
>
<
style
>
.box1,.box2
.box1
.box2
style
>
head
>
<
body
>
<
div
class
="box1"
>
div>
<
div
class
="box2"
>
div>
body
>
html
>
-父子元素
-父子元素間相鄰（父子上外邊距重疊）外邊距，子元素的會傳遞給父元素（上外邊距）
-父子外邊距的摺疊會影響到頁面的布局，必須要進行處理
例如下面的現象：
doctype html效果：>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
<
title
>document
title
>
<
style
>
.box1,.box2
.box1
.box2
style
>
head
>
<
body
>
<
div
class
="box1"
><
div
class
="box2"
>
div>
div>
body
>
html
>
給子元素設定margin-top竟然把父元素也拖下來了
解決方法就是在父元素加一行**：overflow:hidden;
doctype html效果：>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
<
title
>document
title
>
<
style
>
.box1,.box2
.box1
.box2
style
>
head
>
<
body
>
<
div
class
="box1"
><
div
class
="box2"
>
div>
div>
body
>
html
>
外邊距重疊
外邊距重疊 在css當中，相鄰的兩個盒子 可能是兄弟關係也可能是祖先關係 的外邊距可以結合成乙個單獨的外邊距。這種合併外邊距的方式被稱為摺疊，並且因而所結合成的外邊距稱為摺疊外邊距。摺疊結果遵循下列計算規則 1.兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值。也就是說當第乙個div的ma...
垂直外邊距重疊問題
當兩個盒子 兄弟元素 處於垂直狀態時,相鄰兩個外邊距不是相加,而是取最大值 當兩個元素是父子關係時,子元素的外邊距 父元素的外邊距 會傳遞給對方 解決方法1 使用文字破壞外邊距相鄰 破壞相鄰狀態 缺點 需要增加html結構 解決方法2 使用border破壞外邊距相鄰 缺點 需要維持可見框大小 解決方...
外邊距重疊 css冷知識
外邊距重疊就是 margin collapse。相鄰的兩個盒子 可能是兄弟關係也可能是祖先關係 的外邊距可以結合成乙個單獨的外邊距。這種合併外邊距的方式被稱為摺疊，結合而成的外邊距稱為摺疊外邊距 摺疊結果遵循下列計算規則 兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值 兩個相鄰的外邊距都...