難度級別：初級及以上 ????????????????????????????????提問概率：60%?
例如在一個div盒子元素內(nèi)，需要設置一個標題，我們用一個p標簽做為這個標題元素。根據(jù)UI設計要求，標題元素需要距離父div元素20px，理所當然想到的就是為標題元素設置margin-top為20px，希望可以撐開距離頂部的距離。但根據(jù)經(jīng)驗可知，這樣做是存在問題的，父div元素會緊跟著p元素向下20px，并沒有達到撐開20px的效果。先來看一下最初的代碼和下圖的效果
HTML代碼：
<div class="box">
<div class="inner">
<p class="title">標題內(nèi)容</p>
</div>
</div>
CSS代碼：
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 100px;
width: 360px;
height: 260px;
border: 1px solid blue;
}
.inner {
margin-left: 30px;
width: 300px;
height: 200px;
}
.title {
margin-top: 20px;
width: 100%;
text-align: center;
background: yellow;
}
</style>
?
目錄
產(chǎn)生問題的原因?
1 添加一個元素
2 創(chuàng)建塊級格式上下文
3 為父元素設置邊框
4 為父div元素設置padding-top樣式
5 為子標題元素添加padding-top樣式
6 對標題元素使用absolute定位的方式
7 使標題元素變?yōu)樾袃?nèi)塊元素
?
產(chǎn)生問題的原因?
通過上圖發(fā)現(xiàn)，原本很正常的代碼，希望class為title的p標簽和class為inner的div標簽之間產(chǎn)生20px的間距，但卻不經(jīng)意間使class為inner的div標簽與class為box的div標簽之間產(chǎn)生了20px的間距，這并不是我們預期的效果。
這種效果也就是所謂的邊距折疊，結合本場景的案例，意思就是相鄰的class為inner和title兩個元素，margin-top進行了折疊，瀏覽器會解析兩個元素margin-top的最大值，并使用這個最大值。但需要注意的是，只有上下邊距會產(chǎn)生折疊，左右邊距不會產(chǎn)生折疊。
既然知道產(chǎn)生問題的原因，我們接下來嘗試一些解決方案，使標題元素頂部，可以正常與父div元素產(chǎn)生20px的間距。
?
1 添加一個元素
產(chǎn)生問題的原因中有一個重要點，在于相鄰的兩個元素產(chǎn)生了邊距折疊，那么使標題元素與父div元素不相鄰，便可得到解決。我們在標題元素的上面添加一個div兄弟元素，設置其高度為20px。
HTML代碼：
<div class="box">
<div class="inner">
<div class="blank-element"></div>
<p class="title">標題內(nèi)容</p>
</div>
</div>
CSS代碼：
<style>
.blank-element {
height: 20px;
}
</style>
?
通過上圖可知，添加一個空白元素的方式，使得標題元素和父div元素產(chǎn)生了20px的間距。這樣做雖然解決了問題，但多添加一個DOM元素的選擇并不是明智的。?
?
2 創(chuàng)建塊級格式上下文
我們知道創(chuàng)建塊級上下文可以清除浮動，而這種辦法也可以解決父子元素邊距重疊的問題
HTML代碼：
<div class="box">
<div class="inner">
<p class="title">標題內(nèi)容</p>
</div>
</div>
CSS代碼：
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 100px;
width: 360px;
height: 260px;
border: 1px solid blue;
}
.inner {
overflow: hidden;
margin-left: 30px;
width: 300px;
height: 200px;
}
.title {
margin-top: 20px;
width: 100%;
text-align: center;
background: yellow;
}
</style>
?
通過為 .inner 類添加overflow:hidden 的方式，使父div元素和子標題元素規(guī)定于塊級上下文中。這樣做不用添加多余的DOM元素，是個不錯的選擇。?
3 為父元素設置邊框
通過為父元素設置邊框的方法也可以解決邊距重疊的問題
CSS代碼：
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 100px;
width: 360px;
height: 260px;
border: 1px solid blue;
}
.inner {
margin-left: 30px;
border-top: 1px solid #000;
width: 300px;
height: 200px;
}
.title {
margin-top: 20px;
width: 100%;
text-align: center;
background: yellow;
}
</style>
?
雖然為 .inner 類設置上邊框解決了問題，但很顯然如上圖中，使父div又增加了一個帶有色值的邊框，即便是設置上邊框的色值為transparent的透明色，也會使父div的高度加一，這無疑是破壞了原有的代碼環(huán)境。?
?
4 為父div元素設置padding-top樣式
可以避開為子標題元素設置margin-top這一環(huán)節(jié)，換個思路，將子標題元素的margin-top樣式屬性去掉，為父div元素設置padding-top屬性，也可以解決父子元素邊距重疊的問題。
CSS代碼：
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 100px;
width: 360px;
height: 260px;
border: 1px solid blue;
}
.inner {
margin-left: 30px;
width: 300px;
height: 200px;
padding-top: 20px;
}
.title {
width: 100%;
text-align: center;
background: yellow;
}
</style>
為父div元素設置padding-top屬性的方法雖然也解決了邊距重疊的問題，但通過上圖發(fā)現(xiàn)，父div元素的高度變?yōu)榱?20px，這種辦法很顯然和添加邊框的方法類型，都會改變原有代碼環(huán)境，也不推薦使用。?
5 為子標題元素添加padding-top樣式
可以再換一種思路，父div元素不做處理，去掉子標題元素的margin-top樣式，為其設置padding-top樣式，這樣標題元素就會增高，增加空白間距。
CSS代碼：
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 100px;
width: 360px;
height: 260px;
border: 1px solid blue;
}
.inner {
margin-left: 30px;
width: 300px;
height: 200px;
}
.title {
width: 100%;
padding-top: 20px;
text-align: center;
background: yellow;
}
</style>
?
如上圖，這種方法并沒有改變父div元素在上下文的代碼環(huán)境，但標題元素的空白高度增加了，本例中我們?yōu)樽訕祟}元素的背景色設置為yellow，使得這種方法并不合適。但如果標題元素與父div元素的背景色值相同，這種方法也是可行的。?
6 對標題元素使用absolute定位的方式
既然我們一直在想辦法對子標題元素，那么也絕對不會少了position定位的一席之地?？梢酝ㄟ^為父div元素設置相對定位，子標題元素再進行absolute絕對定位的方式進行解決。
CSS代碼：
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 100px;
width: 360px;
height: 260px;
border: 1px solid blue;
}
.inner {
position: relative;
margin-left: 30px;
width: 300px;
height: 200px;
}
.title {
position: absolute;
margin-top: 20px;
width: 100%;
text-align: center;
background: yellow;
}
</style>
?這種方法也解決了父子元素邊距重疊的問題，但需要注意的是，子標題元素設置了absolute絕對定位，這就使得當前的DOM文檔流與之前產(chǎn)生了差異，當父div元素內(nèi)部再添加其他元素的時候，就需要更多的考慮元素定位問題，雖然解決了當前的問題，但很顯然還會產(chǎn)生更多的問題。
?
7 使標題元素變?yōu)樾袃?nèi)塊元素
既然我們所說的邊距重疊，說的是塊級元素上下文的邊距重疊，那么將子標題元素原本的塊元素，改變?yōu)閕nline-block行內(nèi)塊元素，同樣也是可以解決的。
CSS代碼：
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 100px;
width: 360px;
height: 260px;
border: 1px solid blue;
}
.inner {
margin-left: 30px;
width: 300px;
height: 200px;
}
.title {
display: inline-block;
margin-top: 20px;
width: 100%;
text-align: center;
background: yellow;
}
</style>
這種將塊元素更改為行內(nèi)塊元素的方法雖然解決了問題，但他具有行內(nèi)元素的特性，也就是說在標題元素后面再添加行內(nèi)元素，便會出現(xiàn)橫向排列的情況，所以這種解決方案也是有缺陷的。
綜合以上7種解決方案發(fā)現(xiàn)，為父元素創(chuàng)建塊級格式上下文的方式，不會多添加DOM元素，不會改變原有代碼環(huán)境，不需要做多余的定位處理，也不需要改變元素原有的屬性，而且代碼量小，在本案例中是最合適的。
刷題思考
??? 很多初學者其實并不能很好的回答這道題，原因就在于子元素設置margin-top，由于影響因素較多，并不會百分百出現(xiàn)影響父元素的情況。所以想要回答好這類題目，除了日常工作中細心總結外，能夠利用業(yè)務時間多學習并把所學知識實踐到項目中是很重要的。
類似考點文章來源：http://www.zghlxwxcb.cn/news/detail-844611.html
??? 這類題目屬于不經(jīng)意類型的考點，意思就是日常工作中并不會百分百的出現(xiàn)，而想要完美的回答面試題，就需要說出其原理與多個解決方案。面試官還可能會問，例如你遇到過z-index失效的情況嗎？例如你是否用CSS選擇器查找過父元素？你知道兩個相鄰的行內(nèi)元素之間為什么會有空隙嗎等。文章來源地址http://www.zghlxwxcb.cn/news/detail-844611.html
到了這里，關于CSS - 你遇到過子元素設置margin-top，影響父元素的情況嗎的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
