特性问题:
1.兄弟关系,两个盒子垂直外边距与水平外边距问题
2.父子关系,给子加外边距,但作用于父身上了,怎么解决?
兄弟关系,两个盒子垂直外边距与水平外边距问题
(1)垂直方向,外边距取最大值
.
<!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>
.box1,.box2{
width: 200px;
height: 200px;
}
.box1{
background-color: red;
margin-bottom: 100px;
}
.box2{
margin-top: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
(2)水平方向,外边距会进行合并处理
.
<!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>
.box1,.box2,.box3,.box4{
width: 200px;
height: 200px;
}
.box1{
background-color: red;
margin-bottom: 100px;
}
.box2{
margin-top: 50px;
background-color: yellow;
}
.box3{
float: left;
background: blue;
margin-right: 100px;
}
.box4{
float: left;
background: green;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
父子关系,给子加外边距,但作用于父身上了,怎么解决?
问题
<!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>
.box1{
width: 500px;
height: 500px;
background: yellow;
}
.box2{
width: 200px;
height: 200px;
background: red;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
(1)方法一
<!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>
.box1{
width: 500px;
height: 400px;
background: yellow;
padding-top: 100px;
}
.box2{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
(2)方法二
<!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>
.box1{
width: 500px;
height: 500px;
background: yellow;
border: 1px solid green;
}
.box2{
width: 200px;
height: 200px;
background: red;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
(3)方法三
加浮动
<!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>
.box1{
width: 500px;
height: 500px;
background: yellow;
/* border: 1px solid green; */
float: left;
}
.box2{
width: 200px;
height: 200px;
background: red;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
(4)方法四
overflow: hidden;
<!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>
.box1{
width: 500px;
height: 500px;
background: yellow;
/* border: 1px solid green; */
/* float: left; */
overflow: hidden;
}
.box2{
width: 200px;
height: 200px;
background: red;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>