資訊專欄INFORMATION COLUMN
摘要：給父元素設(shè)置屬性給子元素設(shè)置如果子元素是行內(nèi)元素或者行內(nèi)塊級元素則不會產(chǎn)生邊距重疊的問題使子元素脫離文檔流這個實現(xiàn)的方法有很多，浮動，絕對定位等，這里我就不做具體的解釋了。
**
css防止邊距重疊的方法**
今天整理了一下用css防止邊距重疊的幾種方法
先假設(shè)一組dom結(jié)構(gòu)
通常情況下，如果給子元素設(shè)置margin,就會產(chǎn)生這個屬性對父元素也產(chǎn)生了同樣的效果，然而
這其實不是我們想要的結(jié)果，我們只想對子元素設(shè)置margin，那么現(xiàn)在我們應(yīng)該怎么做呢？
（1） 給父元素設(shè)置邊框
.parent {
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
.child {
width: 200px;
height: 200px;
margin: 20px;
}
（2）給父元素添加padding
.parent {
padding： 1px;
width: 300px;
height: 300px;
}
.child {
width: 200px;
height: 200px;
margin: 20px;
}
（3）在子元素上方加一個有寬高的兄弟元素，記住是有寬高的。
（4）給父元素設(shè)置 overflow: hidden; 屬性
.parent {
overflow: hidden;
width: 300px;
height: 300px;
}
.child {
width: 200px;
height: 200px;
margin: 20px;
}
（5）給子元素設(shè)置 display: inline-block；（如果子元素是行內(nèi)元素或者行內(nèi)塊級元素則不會產(chǎn)生邊距重疊的問題）
.parent {
width: 300px;
height: 300px;
}
.child {
width: 200px;
height: 200px;
margin: 20px;
display: inline-block;
}
（6）使子元素脫離文檔流這個實現(xiàn)的方法有很多，浮動，絕對定位等，這里我就不做具體的解釋了。
希望可以能幫助到需要的人，如果你覺得這個文章幫到你了，就麻煩動動小手點個贊吧！嘿嘿
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112514.html
摘要：從上圖可以看到盒子模型的范圍也包括，和標準盒子模型不同的是盒子模型的部分包含了和。運行效果以上就是的清除浮動原理。愿你成為終身學習者 題目：談?wù)勀銓?CSS 盒模型的認識 涉及知識點(層層遞進): 基本概念：標準模型+ IE模型(區(qū)別) CSS如何設(shè)置這兩種模型 JS如何設(shè)置獲取盒子模型對應(yīng)的寬和高 實例題(根據(jù)盒模型解釋邊距重疊) BFC(邊距重疊解決方案) CSS盒模型 1. ...
摘要：從上圖可以看到盒子模型的范圍也包括，和標準盒子模型不同的是盒子模型的部分包含了和。運行效果以上就是的清除浮動原理。愿你成為終身學習者 題目：談?wù)勀銓?CSS 盒模型的認識 涉及知識點(層層遞進): 基本概念：標準模型+ IE模型(區(qū)別) CSS如何設(shè)置這兩種模型 JS如何設(shè)置獲取盒子模型對應(yīng)的寬和高 實例題(根據(jù)盒模型解釋邊距重疊) BFC(邊距重疊解決方案) CSS盒模型 1. ...
摘要：從上圖可以看到盒子模型的范圍也包括，和標準盒子模型不同的是盒子模型的部分包含了和。運行效果以上就是的清除浮動原理。愿你成為終身學習者 題目：談?wù)勀銓?CSS 盒模型的認識 涉及知識點(層層遞進): 基本概念：標準模型+ IE模型(區(qū)別) CSS如何設(shè)置這兩種模型 JS如何設(shè)置獲取盒子模型對應(yīng)的寬和高 實例題(根據(jù)盒模型解釋邊距重疊) BFC(邊距重疊解決方案) CSS盒模型 1. ...
閱讀 2738·2021-11-22 13:54
閱讀 1077·2021-10-14 09:48
閱讀 2302·2021-09-08 09:35
閱讀 1566·2019-08-30 15:53
閱讀 1178·2019-08-30 13:14
閱讀 615·2019-08-30 13:09
閱讀 2531·2019-08-30 10:57
閱讀 3344·2019-08-29 13:18
