background-color :背景颜色
盒子:内容区(content),边框(border) ,内边距(padding) ,外边距(margin)
left:左 ,right:右 ,top:上 ,bottom:下 ,anuto:自动
外边距合并:相邻两个盒子之间同时设置margin,最终的值是最大的那一个
避免相邻盒子外边距合并:只给其中一个盒子设置外边距。
外边塌陷:嵌套的两个盒子之间同时设置margin,最终取得值也是最大的一个
避免嵌套盒子外边距塌陷:给父盒子添加边框,或添加padding,或添加overflow:hidden;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div练习</title>
<style>
.box{
width: 500px;
height: 400px;
border: solid 5px red;
background-color:pink;
/*四个值:上 右 下 左 顺时针*/
/*三个值:上 左右 下*/
/*两个值:上下 左右*/
margin-left: 200px;
/*给左右margin设置auto(自动),盒子水平居中显示*/
margin: 10px auto;
overflow: hidden;
}
.box2{
width: 200px;
height: 100px;
border: solid 5px red;
background-color: skyblue;
margin: 100px;
margin: 50px auto
}
</style>
</head>
<body>
<div class="box">
<div class="box2">豆芽2</div>
</biv>
</body>
</html>