<title></title>
<style type="text/css">
*{
padding:0;margin:0;
}
div.box{/*交集选择器*/
width: 200px;
height: 200px;
background:red;
/*overflow:hidden;*//*第一种解决塌陷现象方法*/
border:1px solid transparent;
box-sizing: border-box;
}
div.son{
width: 50px;
height: 50px;
background:blue;
margin-top:100px;
}
</style>
</head>
<body>
<!--margin-top 塌陷现象-->
<!--当盒子是父子关系，用margin-top极有可能出现塌陷现象-->
<div class="box">
<div class="son"></div>
</div>
<!--内边距和外边距共同点：四个值 上右下左-->
<!--不同点：
1)margin不叠加,padding叠加
2)padding，无论有没有宽高都要叠加，而margin,如果没有宽高无效果，没作用 -->
<!--宽度=盒子的宽度+内边距+边框-->
</body>
</html>
<style type="text/css">
*{
padding:0;margin:0;
}
div.box{/*交集选择器*/
width: 200px;
height: 200px;
background:red;
/*overflow:hidden;*//*第一种解决塌陷现象方法*/
border:1px solid transparent;
box-sizing: border-box;
}
div.son{
width: 50px;
height: 50px;
background:blue;
margin-top:100px;
}
</style>
</head>
<body>
<!--margin-top 塌陷现象-->
<!--当盒子是父子关系，用margin-top极有可能出现塌陷现象-->
<div class="box">
<div class="son"></div>
</div>
<!--内边距和外边距共同点：四个值 上右下左-->
<!--不同点：
1)margin不叠加,padding叠加
2)padding，无论有没有宽高都要叠加，而margin,如果没有宽高无效果，没作用 -->
<!--宽度=盒子的宽度+内边距+边框-->
</body>
</html>
613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
