特性问题:
1.兄弟关系 俩个盒子垂直外边距与水平外边距问题
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:20px;
}
.box2{
background-color: yellow;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
效果如图,此时俩盒子直接外边距为40px
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>
.box3,.box4{
width: 200px;
height: 200px;
}
.box3{
float:left;
background-color: blue;
margin-right:100px;
}
.box4{
float:left;
background-color: green;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
效果如图:
相加为150px
2.父子关系,给子加外边距,但作用于父身上了 ,怎么解决?
1)子margin-top===>父的paddin-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>
.box5{
width: 500px;
height: 400px;/*原高度为500ox*/
background: pink;
padding-top: 100px;
}
.box6{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div class="box5">
<div class="box6">
</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>
.box5{
width: 498px;/*原宽度为500ox*/
height: 498px;/*原高度为500ox*/
background: pink;
border: 1px solid transparent; /*transparent为透明颜色*/
}
.box6{
width: 200px;
height: 200px;
background: red;
margin-top:100px;/*正常设置*/
}
</style>
</head>
<body>
<div class="box5">
<div class="box6">
</div>
</div>
</body>
</html>
效果如图:
3) 加浮动(子父都可以)
这里是给父元素加float:left;
<!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>
.box5{
width: 500px;
height: 500px;
background: pink;
float:left;
}
.box6{
width: 200px;
height: 200px;
background: red;
margin-top:100px;/*正常设置*/
}
</style>
</head>
<body>
<div class="box5">
<div class="box6">
</div>
</div>
</body>
</html>
4)父盒子加 overflow:hidden; BFC
<!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>
.box5{
width: 500px;
height: 500px;
background: pink;
overflow:hidden;
}
.box6{
width: 200px;
height: 200px;
background: red;
margin-top:100px;/*正常设置*/
}
</style>
</head>
<body>
<div class="box5">
<div class="box6">
</div>
</div>
</body>
</html>