本文摘自PHP中文网,作者藏色散人,侵删。
css解决网页重叠的方法:1、给父元素设置边框;2、给父元素添加padding;3、在子元素上方加一个有宽高的兄弟元素;4、给父元素设置“overflow: hidden;”属性等。
本教程操作环境:Windows7系统、HTML5&&CSS3版本,该方法适用于所有品牌电脑。
推荐:《css视频教程》
css解决网页边距重叠
下面给大家介绍用css防止边距重叠的几种方法。
先假设一组dom结构
1 2 3 4 |
|
通常情况下,如果给子元素设置margin,就会产生这个属性对父元素也产生了同样的效果,然而
这其实不是我们想要的结果,我们只想对子元素设置margin,那么现在我们应该怎么做呢?
1、给父元素设置边框
1 2 3 4 5 6 7 8 9 10 |
|
2、给父元素添加padding
1 2 3 4 5 6 7 8 9 10 |
|
3、在子元素上方加一个有宽高的兄弟元素,记住是有宽高的。
1 2 3 4 5 |
|
4、给父元素设置 overflow: hidden; 属性
1 2 3 4 5 6 7 8 9 10 |
|
5、给子元素设置 display: inline-block;(如果子元素是行内元素或者行内块级元素则不会产生边距重叠的问题)
1 2 3 4 5 6 7 8 9 10 |
|
6、使子元素脱离文档流这个实现的方法有很多,浮动,绝对定位等,这里我就不做具体的解释了。
以上就是css怎么解决网页重叠问题的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者