🌟 所属专栏:前端只因变凤凰之路
🐔 作者简介:rchjr——五带信管菜只因一枚
😮 前言:该系列将持续更新前端的相关学习笔记,欢迎和我一样的小白订阅,一起学习共同进步~
👉 文章简介:本文介绍CSS的盒子模型中的外边距。知识学习内容来自b站的 @黑马程序员 的视频
💥1外边距
margin属性用于设置外边距,用于控制盒子之间的距离
包括margin-left、margin-right、margin-top、margin-bottom
复合写法:与padding内边距一致
💥2外边距应用-块级盒子水平居中对齐
外边距可以让块级盒子水平居中,但必须做到:
盒子指定了宽度
盒子的左右外边距设置为auto
常见写法:margin: 0 auto;
注意:以上方法是块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.head {
width: 960px;
height: 200px;
margin: 0 auto;
background-color: pink;
text-align: center;
}
</style>
</head>
<body>
<div class="head">
<span>里面的文字</span>
</div>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/62fddcfa8cb0f7b40dc73ecdab84ec82.png)
💥3外边距合并
使用margin定义块级元素的垂直外边距时(margin-top和margin-bottom),可能会出现外边距的合并。
两种情况:
相邻块元素垂直外边距的合并
问题描述:当上下两个块级元素相遇,如果上面的块有margin-bottom,下面的块有margin-top,那么两个块之间的垂直距离就是两者的最大值,而不是和。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.head {
width: 200px;
height: 200px;
background-color: pink;
margin-bottom: 100px;
}
.tail {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 200px;
}
</style>
</head>
<body>
<div class="head">good</div>
<div class="tail">bad</div>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/659caf8a9a74676c251673219c5667d6.png)
解决方案:尽量只给一个盒子添加margin值
嵌套块元素垂直外边距的塌陷
问题描述:对于两个嵌套的父子盒子,父元素与子元素同时有上外边距,这时子元素的上外边距失效(左右外边距如果设置了是有用的),父元素的外边距变成两者中的最大值。
![](https://i-blog.csdnimg.cn/blog_migrate/e412cf81759ba83f0a77f2782d1bb677.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 400px;
height: 400px;
background-color: purple;
margin-top: 20px;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
解决方法:
为父元素定义上边框
为父元素定义上内边距
为父元素添加overflow:hidden(常用)
💥4 清除内外边距
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致,因此在开始布局前,要把所有元素的内外边距去除掉。
![](https://i-blog.csdnimg.cn/blog_migrate/a20c3750d0df11c617c41b88ab5d2209.png)
方法:用通配符去除掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div>
没清除内外边距
</div>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/ce92c0e7f0c64d59a5d236260d1d71b2.png)