我们以下面的代码为例：
html代码：
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>css代码：
<style>
.box1{
width: 300px;
height: 300px;
background-color: red;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
margin:0 auto;
margin-top:100px;
}
</style>
展示结果：
我们代码设置的是box2小盒子的margin-top属性，但展示的结果却是大盒子box1的margin-top属性也发生了变化。
问题1：为什么在嵌套图中，设置子元素的margin，另外一个父元素也会跟着改变呢？
问题逻辑角度的解说：在回答这个问题之前我们要先看它的前提是什么，嵌套图。也是说html给它们的语义是小图嵌套在大图里面，那如果小图的margin发生改变，距离顶部有100px的间距，如果大图不跟着小图一起调整，那小图岂不是要出圈儿了，那就不符合嵌套的这个关系了。
前端设计角度的解说：当设置子元素的margin时，子元素会去找父元素的边框，因
9795
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
