css邊距重疊的解決方案

zhangfaliang 發布于2019-08-29 13:18 / 3333人閱讀

摘要：給父元素設置屬性給子元素設置如果子元素是行內元素或者行內塊級元素則不會產生邊距重疊的問題使子元素脫離文檔流這個實現的方法有很多，浮動，絕對定位等，這里我就不做具體的解釋了。

css防止邊距重疊的方法

今天整理了一下用css防止邊距重疊的幾種方法
先假設一組dom結構

通常情況下，如果給子元素設置margin,就會產生這個屬性對父元素也產生了同樣的效果，然而
這其實不是我們想要的結果，我們只想對子元素設置margin，那么現在我們應該怎么做呢？
（1）給父元素設置邊框

.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）給父元素設置 overflow: hidden; 屬性

.parent {
    overflow: hidden;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

（5）給子元素設置 display: inline-block；（如果子元素是行內元素或者行內塊級元素則不會產生邊距重疊的問題）

.parent {
    width: 300px;
    height: 300px;
} 
.child {
    width: 200px;
    height: 200px;
    margin: 20px; 
    display: inline-block;
}

（6）使子元素脫離文檔流這個實現的方法有很多，浮動，絕對定位等，這里我就不做具體的解釋了。
希望可以能幫助到需要的人，如果你覺得這個文章幫到你了，就麻煩動動小手點個贊吧！嘿嘿

云服務器 GPU云服務器重疊重疊順序控件重疊 DIV重疊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112514.html

面試官：談談你對 CSS 盒模型的認識?（你確定會？）

摘要：從上圖可以看到盒子模型的范圍也包括，和標準盒子模型不同的是盒子模型的部分包含了和。運行效果以上就是的清除浮動原理。愿你成為終身學習者題目：談談你對 CSS 盒模型的認識涉及知識點(層層遞進): 基本概念：標準模型+ IE模型(區別) CSS如何設置這兩種模型 JS如何設置獲取盒子模型對應的寬和高實例題(根據盒模型解釋邊距重疊) BFC(邊距重疊解決方案) CSS盒模型 1. ...

CocoaChina 2019-08-29 15:39 評論0 收藏0
面試官：談談你對 CSS 盒模型的認識?（你確定會？）

摘要：從上圖可以看到盒子模型的范圍也包括，和標準盒子模型不同的是盒子模型的部分包含了和。運行效果以上就是的清除浮動原理。愿你成為終身學習者題目：談談你對 CSS 盒模型的認識涉及知識點(層層遞進): 基本概念：標準模型+ IE模型(區別) CSS如何設置這兩種模型 JS如何設置獲取盒子模型對應的寬和高實例題(根據盒模型解釋邊距重疊) BFC(邊距重疊解決方案) CSS盒模型 1. ...

Channe 2019-08-26 12:02 評論0 收藏0
面試官：談談你對 CSS 盒模型的認識?（你確定會？）

摘要：從上圖可以看到盒子模型的范圍也包括，和標準盒子模型不同的是盒子模型的部分包含了和。運行效果以上就是的清除浮動原理。愿你成為終身學習者題目：談談你對 CSS 盒模型的認識涉及知識點(層層遞進): 基本概念：標準模型+ IE模型(區別) CSS如何設置這兩種模型 JS如何設置獲取盒子模型對應的寬和高實例題(根據盒模型解釋邊距重疊) BFC(邊距重疊解決方案) CSS盒模型 1. ...

mengera88 2019-08-02 10:41 評論0 收藏0