CSS的margin属性
写在前面
更新了很多篇JavaScript和vue的文章啦，今天久违和大家分享以下css的知识点。也是我以前在第一次面试的时候被面试官问倒的问题，希望可以帮助到各位小伙伴。在css中有一个margin属性相信大家都比较的熟悉，但有一些细节还是需要和大家分享学习的。
属性的定义及使用
- 作用：首先不管是在IE盒模型下还是w3c标准盒模型下都是在盒子的最外层，作用就是和其他的盒子之间“顶开”出来，让盒子之间存在距离。如下图所示：
-
属性：这个不需要多讲，就是简单的上右下左
但是简写还是需要和大家简单说明一下的
margin:10px 5px 15px 20px;：- 上边距是 10px
右边距是 5px
下边距是 15px
左边距是 20px
margin:10px 5px 15px;
- 上边距是 10px
右边距和左边距是 5px
下边距是 15px
margin:10px 5px;
- 上边距和下边距是 10px
右边距和左边距是 5px
margin:10px;
- 所有四个边距都是 10px
- 上边距是 10px
外边距塌陷
-
接下来讲讲重点就是外边距的塌陷问题
原因：外边距塌陷也称为外边距合并，是指两个在正常流中相邻（兄弟或父子关系）的块级元素的外边距，组合在一起变成单个外边距，不过只有上下外边距才会有塌陷，左右外边距不会出现这种问题。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.a {
float: left;
width: 100px;
height: 100px;
background-color: bisque;
}
.b {
float: left;
width: 50px;
height: 50px;
background-color: blue;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="a">
<div class="b">456</div>
</div>
</body>
</html>
很明显我们想要的结果并不是这样的，我们想要的是蓝盒子的距离他的父盒子有20px的距离，而我们却发现父盒子也一起掉了下来，这就是我们常说的外边距塌陷问题。
解决这个问题的方法：
（1）给父盒子加上上 边框，如果不想要看到边框可以把边框的像素设置成零也就是：
border:0px dash #fff
（2）给父盒子加上overflow:hidden让父盒子形成BFC也可以解决这个问题
<style>
.a {
width: 100px;
height: 100px;
background-color: bisque;
overflow: hidden;
}
.b {
width: 50px;
height: 50px;
background-color: blue;
margin-top: 20px;
}
</style>
-
还有一种情况就是：当父子都有margin值的时候，以margin值大的为主
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .a { width: 100px; height: 100px; background-color: bisque; margin-top: 50px; } .b { width: 50px; height: 50px; background-color: blue; margin-top: 100px; } </style> </head> <body> <div class="a"> <div class="b">456</div> </div> </body> </html>此时的距离顶部的距离是100px，而不是50px
外边距重叠问题
-
上面讲的是父子盒子间的外边距问题，接下来讲讲兄弟盒子盒子间的重叠问题
-
在兄弟盒子之间的外边距上，垂直外边距会有问题但水平兄弟盒子不会有重叠问题
-
垂直兄弟盒子的计算方式是：
1.两个都是正数，取较大的值
2.两个都是负数，取绝对值较大的值
3.一正一负，取两个值得和
例如1：
<head>
<style>
.a {
width: 100px;
height: 100px;
background-color: bisque;
margin-bottom: 50px;
}
.b {
width: 50px;
height: 50px;
background-color: blue;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="a">
123
</div>
<div class="b">456</div>
</body>
可以看到它们之间的距离并不是我们预想中的150px而是100px
例如2：
.a {
width: 100px;
height: 100px;
background-color: bisque;
margin-bottom: 150px;
}
.b {
width: 50px;
height: 50px;
background-color: blue;
margin-top: -100px;
}
可以看到它们之间的距离就成了50px
例子3：
.a {
float: left;
width: 100px;
height: 100px;
background-color: bisque;
margin-right: 150px;
}
.b {
float: left;
width: 50px;
height: 50px;
background-color: blue;
margin-left: 50px;
}
可以看到相邻的兄弟元素并不会受影响。
总结
在使用margin属性的时候要注意以下问题：
-
当为父子盒子时：子盒子在使用margin属性的时候会有外边距塌陷的情况，要使用overflow：hidden或者父元素加上边框解决。
-
当为兄弟组件的时：垂直兄弟组件会存在外边距重叠问题，要主要好它们之间的实际距离，解决办法可以是给其中一个设置想要的margin宽度即可；而相邻兄弟组件则不存在这种问题，可以放心的使用。
网友评论