margin:外边距
margin:10px;
一个值:上下左右
margin:10px 20px ;
二个值:上下/左右
margin:10px 20px 30px ;
三个值:上 左/右 下
margin:10px 20px 30px 40px;
四个值:上 下 左 右
*{ margin:0px; padding:0px; }
初始化网页元素:网页中所有的元素的内外边距都为0
盒子水平居中:左右外边距设置为auto.前提条件:有width
.box${box$}*n:n
表示盒子个数
盒子的塌陷与合并
1.给相邻两个盒子都设置margin,垂直方向外边距取两者中的最大值:合并的解决:只给一个盒子外边距。
2.塌陷:嵌套的两个盒子都设置了margin,垂直方法的外边距取大值,塌陷的解决方法:
1.给父元素加border;
2.给父元素加overflow:hidden
overflow:溢出
hidden:隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>盒子模型外边距</title>
<style>
.box{
width:200Px;
height:200px;
border:5px solid palevioletred;
margin:10px;
/*一个值:上下左右.*/
/*margin:10px 20px;
两个值: 上下/左右
margin:10px 20px 30px;
三个值:上 左/右 下.
margin:10px 20px 30px 40px;
四个值:上 下 左 右
*/
}
.box2{
height:200px;
width:200px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin的应用</title>
<style>
/*1.初始化网页元素:网页中所有的元素的内外边距都为0*/
*{
margin:0px;
padding:0px;
}
.box{
width:300px;
height:300px;
border:solid 1px green;
/*2.盒子水平居中:左右外边距设置为auto.前提条件:有width.*/
margin:0px auto;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子的塌陷与合并</title>
<style>
*{
margin:0px;
padding:0px;
}
/*1.给相邻两个盒子都设置margin,垂直方向外边距取两者中的最大值;*/
/*合并的解决:只给一个盒子外边距;*/
/*2.塌陷:嵌套的两个盒子都设置了margin,垂直方法的外边距取最大值,塌陷的解决方法:
1.给父元素加border;
2.给父元素加overflow:hidden*/
div{
width: 200px;
height:200px;
}
.box1{
background:pink;
margin:30px;
}
.box2{
background: deeppink;
margin: 50px;
}
.box3{
background-color: pink;
/*border: 1px solid red;
overflow溢出hidden隐藏;*/
margin: 50px;
overflow: hidden;
}
.box4{
width: 80px;
height: 80px;
background-color: deeppink;
margin: 30px;
}
</style>
</head>
<body>
<!--.box${box$}*n:n表示盒子个数-->
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">
<div class="box4"></div>
</div>
</body>
</html>