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>
711
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
