css如何解決網(wǎng)頁重疊問題
這篇文章將為大家詳細講解有關(guān)css如何解決網(wǎng)頁重疊問題，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
為龍城等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及龍城網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站建設(shè)、做網(wǎng)站、龍城網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！
css解決網(wǎng)頁重疊的方法：1、給父元素設(shè)置邊框；2、給父元素添加padding；3、在子元素上方加一個有寬高的兄弟元素；4、給父元素設(shè)置“overflow: hidden;”屬性等。
css解決網(wǎng)頁邊距重疊
下面給大家介紹用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)的方法有很多，浮動，絕對定位等，這里我就不做具體的解釋了。
關(guān)于css如何解決網(wǎng)頁重疊問題就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
標題名稱：css如何解決網(wǎng)頁重疊問題
本文路徑：http://weahome.cn/article/gojopi.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
重慶分公司
重慶分公司
