css边距重叠的解决方案

zhangfaliang 发布于2019-08-29 13:18 / 3316人阅读

摘要：给父元素设置属性给子元素设置如果子元素是行内元素或者行内块级元素则不会产生边距重叠的问题使子元素脱离文档流这个实现的方法有很多，浮动，绝对定位等，这里我就不做具体的解释了。

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）使子元素脱离文档流这个实现的方法有很多，浮动，绝对定位等，这里我就不做具体的解释了。
希望可以能帮助到需要的人，如果你觉得这个文章帮到你了，就麻烦动动小手点个赞吧！嘿嘿

GPU云服务器云服务器重叠重叠顺序控件重叠 DIV重叠

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112514.html

面试官：谈谈你对 CSS 盒模型的认识?（你确定会？）

摘要：从上图可以看到盒子模型的范围也包括，和标准盒子模型不同的是盒子模型的部分包含了和。运行效果以上就是的清除浮动原理。愿你成为终身学习者题目：谈谈你对 CSS 盒模型的认识涉及知识点(层层递进): 基本概念：标准模型+ IE模型(区别) CSS如何设置这两种模型 JS如何设置获取盒子模型对应的宽和高实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) CSS盒模型 1. ...

CocoaChina 2019-08-29 15:39 评论0 收藏0
面试官：谈谈你对 CSS 盒模型的认识?（你确定会？）

摘要：从上图可以看到盒子模型的范围也包括，和标准盒子模型不同的是盒子模型的部分包含了和。运行效果以上就是的清除浮动原理。愿你成为终身学习者题目：谈谈你对 CSS 盒模型的认识涉及知识点(层层递进): 基本概念：标准模型+ IE模型(区别) CSS如何设置这两种模型 JS如何设置获取盒子模型对应的宽和高实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) CSS盒模型 1. ...

Channe 2019-08-26 12:02 评论0 收藏0
面试官：谈谈你对 CSS 盒模型的认识?（你确定会？）

摘要：从上图可以看到盒子模型的范围也包括，和标准盒子模型不同的是盒子模型的部分包含了和。运行效果以上就是的清除浮动原理。愿你成为终身学习者题目：谈谈你对 CSS 盒模型的认识涉及知识点(层层递进): 基本概念：标准模型+ IE模型(区别) CSS如何设置这两种模型 JS如何设置获取盒子模型对应的宽和高实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) CSS盒模型 1. ...

mengera88 2019-08-02 10:41 评论0 收藏0