从品牌网站建设到网络营销策划,从策略到执行的一站式服务
这篇文章将为大家详细讲解有关css如何解决网页重叠问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联是一家专注于成都网站建设、成都做网站与策划设计,平乐网站建设哪家好?创新互联做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:平乐等地区。平乐做网站价格咨询:18980820575css解决网页重叠的方法:1、给父元素设置边框;2、给父元素添加padding;3、在子元素上方加一个有宽高的兄弟元素;4、给父元素设置“overflow: hidden;”属性等。
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、使子元素脱离文档流这个实现的方法有很多,浮动,绝对定位等,这里我就不做具体的解释了。
关于css如何解决网页重叠问题就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图