成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

css邊距重疊的解決方案

zhangfaliang / 3390人閱讀

摘要：給父元素設(shè)置屬性給子元素設(shè)置如果子元素是行內(nèi)元素或者行內(nèi)塊級元素則不會(huì)產(chǎn)生邊距重疊的問題使子元素脫離文檔流這個(gè)實(shí)現(xiàn)的方法有很多，浮動(dòng)，絕對定位等，這里我就不做具體的解釋了。

**

css防止邊距重疊的方法

**

今天整理了一下用css防止邊距重疊的幾種方法
先假設(shè)一組dom結(jié)構(gòu)

通常情況下，如果給子元素設(shè)置margin,就會(huì)產(chǎn)生這個(gè)屬性對父元素也產(chǎn)生了同樣的效果，然而
這其實(shí)不是我們想要的結(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）在子元素上方加一個(gè)有寬高的兄弟元素，記住是有寬高的。

（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)塊級元素則不會(huì)產(chǎn)生邊距重疊的問題）

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/112514.html

相關(guān)文章

  • 面試官：談?wù)勀銓?CSS 盒模型的認(rèn)識(shí)?（你確定會(huì)？）

    摘要：從上圖可以看到盒子模型的范圍也包括，和標(biāo)準(zhǔn)盒子模型不同的是盒子模型的部分包含了和。運(yùn)行效果以上就是的清除浮動(dòng)原理。愿你成為終身學(xué)習(xí)者 題目：談?wù)勀銓?CSS 盒模型的認(rèn)識(shí) 涉及知識(shí)點(diǎn)(層層遞進(jìn)): 基本概念：標(biāo)準(zhǔn)模型+ IE模型(區(qū)別) CSS如何設(shè)置這兩種模型 JS如何設(shè)置獲取盒子模型對應(yīng)的寬和高 實(shí)例題(根據(jù)盒模型解釋邊距重疊) BFC(邊距重疊解決方案) CSS盒模型 1. ...

    CocoaChina 評論0 收藏0

  • 面試官：談?wù)勀銓?CSS 盒模型的認(rèn)識(shí)?（你確定會(huì)？）

    摘要：從上圖可以看到盒子模型的范圍也包括，和標(biāo)準(zhǔn)盒子模型不同的是盒子模型的部分包含了和。運(yùn)行效果以上就是的清除浮動(dòng)原理。愿你成為終身學(xué)習(xí)者 題目：談?wù)勀銓?CSS 盒模型的認(rèn)識(shí) 涉及知識(shí)點(diǎn)(層層遞進(jìn)): 基本概念：標(biāo)準(zhǔn)模型+ IE模型(區(qū)別) CSS如何設(shè)置這兩種模型 JS如何設(shè)置獲取盒子模型對應(yīng)的寬和高 實(shí)例題(根據(jù)盒模型解釋邊距重疊) BFC(邊距重疊解決方案) CSS盒模型 1. ...

    Channe 評論0 收藏0

  • 面試官：談?wù)勀銓?CSS 盒模型的認(rèn)識(shí)?（你確定會(huì)？）

    摘要：從上圖可以看到盒子模型的范圍也包括，和標(biāo)準(zhǔn)盒子模型不同的是盒子模型的部分包含了和。運(yùn)行效果以上就是的清除浮動(dòng)原理。愿你成為終身學(xué)習(xí)者 題目：談?wù)勀銓?CSS 盒模型的認(rèn)識(shí) 涉及知識(shí)點(diǎn)(層層遞進(jìn)): 基本概念：標(biāo)準(zhǔn)模型+ IE模型(區(qū)別) CSS如何設(shè)置這兩種模型 JS如何設(shè)置獲取盒子模型對應(yīng)的寬和高 實(shí)例題(根據(jù)盒模型解釋邊距重疊) BFC(邊距重疊解決方案) CSS盒模型 1. ...

    mengera88 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<