1:在布局的时候会碰见子元素设置边距影响父元素的情况，对已经布局好的界面产生影响。
.parent{
width: :300px;
height: 300px;
background-color: green;
}
.child{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>正常情况下
当给child类添加margin: 20px;属性之后，视图变成
父元素同时也margin影响
解决方法：
1：给父元素设置边框：border:1px solid #ccc;
2：给父元素设置padding属性，注意padding不能为0。
3：给子元素添加一个有宽高的同胞元素。
<div class="parent">
<div class="childen" style="width: 100%;height: 10px;"></div>
<div class="child">
</div>
</div>注意添加该同胞元素后高度会出现相加的问题（此时child距离顶部30px），此时可以改变子元素的margin-top的大小来达成需要的高度。
4：父元素设置属性overflow: hidden;
5：将子元素转换成行内元素或者行内块级元素，display: inline-block；
6：使用浮动，绝对定位等脱离文档流
扫一扫
415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
