想要达到这样的效果:
如果是实现这样的源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css">
.big{
height:300px;
width:500px;
background:#EEEEEE;
}
.small{
height:100px;
width:100px;
background:red;
margin-top:50px;
}
</style>
</head>
<body>
<div class="big">
<div class="small">
</div>
</div>
</body>
</html>
会出现这样的效果:
加了margin设置导致了溢出问题。解决方式有两个:
①.给div加边框border;
.big{
height:300px;
width:500px;
background:#EEEEEE;
border:1px solid black;
}
效果:
②.使用overflow:hidden;隐藏溢出
.big{
height:300px;
width:500px;
background:#EEEEEE;
overflow:hidden;
}
效果: