Rumah > hujung hadapan web > tutorial css > css怎么解决网页重叠问题

css怎么解决网页重叠问题

藏色散人
Lepaskan: 2020-12-18 09:47:19
asal
3440 orang telah melayarinya

css解决网页重叠的方法:1、给父元素设置边框;2、给父元素添加padding;3、在子元素上方加一个有宽高的兄弟元素;4、给父元素设置“overflow: hidden;”属性等。

css怎么解决网页重叠问题

本教程操作环境:Windows7系统、HTML5&&CSS3版本,该方法适用于所有品牌电脑。

推荐:《css视频教程

css解决网页边距重叠

下面给大家介绍用css防止边距重叠的几种方法。

先假设一组dom结构

<div class="parent">
    <div class="child">
    </div>
</div>
Salin selepas log masuk

通常情况下,如果给子元素设置margin,就会产生这个属性对父元素也产生了同样的效果,然而

这其实不是我们想要的结果,我们只想对子元素设置margin,那么现在我们应该怎么做呢?

1、给父元素设置边框

.parent { 
    width: 300px;       
    height: 300px;
    border: 1px solid #ccc;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}
Salin selepas log masuk

2、给父元素添加padding

.parent {
    padding: 1px;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}
Salin selepas log masuk

3、在子元素上方加一个有宽高的兄弟元素,记住是有宽高的。

<div class="parent">
     <div style="width: 20px;height: 20px;margin-top: "></div>
     <div class="child">
     </div>
</div>
Salin selepas log masuk

4、给父元素设置 overflow: hidden; 属性

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

5、给子元素设置 display: inline-block;(如果子元素是行内元素或者行内块级元素则不会产生边距重叠的问题)

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

6、使子元素脱离文档流这个实现的方法有很多,浮动,绝对定位等,这里我就不做具体的解释了。

Atas ialah kandungan terperinci css怎么解决网页重叠问题. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
css
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan