知识点
未补充
原文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外边距-margin</title>
<style>
* {
margin: 0;
padding: 0;
}
.div1, .div2 {
width: 300px;
height: 300px;
background-color: rgb(231, 63, 50);
color: rgb(255, 255, 255);
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 300px;
/*
margin: 20px; 如果里面只有一个参数 代表 上下左右的外边距都是20px
相当于:
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin: 20px 30px; 如果里面是两个参数, 第一个参数代表上下外边距 第二个参数代表左右外边距
相当于:
margin-top: 20px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 30px;
margin: 20px 30px 40px; 如果里面有三个参数, 第一个参数代表上外边距, 第二个参数代表左右外边距, 第三个参数代表下外边距
相当于:
margin-top: 20px;
margin-right: 30px;
margin-bottom: 40px;
margin-left: 30px;
margin: 20px 30px 40px; 如果里面有四个参数, 第一个参数代表上外边距, 第二个参数代表右外边距, 第三个参数代表下外边距, 第四个参数代表左外边距
相当于:
margin-top: 20px;
margin-right: 30px;
margin-bottom: 40px;
margin-left: 60px;
*/
margin-bottom: 50px;
/* position: relative;
z-index: 2; */
}
.div2 {
/* position: relative;
z-index: 1; */
margin-top: 50px;
background-color: rgb( 47,124,238);
color: rgb(255, 255, 255);
}
/*
两正，取大的
一正一负，取和
两负，取绝对值大的
*/
/*
margin 重叠 塌陷现象:
条件: 只发生在垂直方向 并且只有块级元素才会产生
-- 当两个盒子的属性值都为正数且不相等时取最大值 两值相等时则取其中一值
-- 当两个盒子的属性值为一正一负时 取值为两数之和
-- 当两个值为负数时 取绝对值最大的值
*/
</style>
</head>
<body>
<!-- 这个设置下边距 -->
<div class="div1">div1</div>
<!-- 这个设置上边距 -->
<div class="div2">div2</div>
</body>
</html>