问题:垂直方向的margin父子结构一起移动,不可以子单独移动;
触发盒子的bfc进行解决;
bfc:block format context;
触发bfc改变语法规则解决margin塌陷;
position:absolute;
display:inline-block;
float:left/right;
overflow:hidden;
(弥补)
解决1:
liu.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>刘</title>
<link rel = "stylesheet" type = "text/css"
href = "MyHtml.css">
<style type = "css/text">
</style>
</head>
<body>
<div class = "wrapper">
<div class = "content">
</div>
</div>
</body>
</html>
liu.css
*{
padding:0;
margin:0;
}
.wrapper{
width:100px;
height:100px;
background-color:black;
margin-left:100px;
margin-top:100px;
overflow:hidden;
<!-- 溢出盒子的部分要隐藏展示-->
}
.content{
width:50px;
height:50px;
background-color:green;
margin-left:50px;
margin-top:50px;
}