代码是这样的:
CSS:
.test1 {
background-color:green;
width:500px; height:400px;
/*border:10px solid yellow;*/
/*position: absolute;*/
margin:30px 0 0 30px;
}
.test2 {
background-color:red;
width:100%; height:100%;
margin:30px;
}
HTML:
<div class="test1">
<div class="test2"></div>
</div>
如上代码,在 Firefox 和 Chrome 中,子元素的margin-left都会在父容器里,子元素向右侧水平偏移,但是margin-top会从父容器溢出(也就是说,test1和test2有色彩的部分是等高的)。
按照我的理解,这样的CSS应该会让子元素向右下角偏移
看我注释掉的两条,取消任意一条的注释都能够让子元素的 margin-top 出现在父元素中
求教为什么会出现这样的情况?
究竟这两个CSS属性共同改变test1和test2的什么属性?