43,708
社区成员
发帖
与我相关
我的任务
分享网页里面的盒模型边距设置问题
因为浏览器网页的不同，所以一般的盒模型宽度和高度尺寸都用百分比来表示，但是设置百分比之后再调整margin的时候它有时因为尺寸不对就突出来了，请问大神们这方法应该怎么解决？
...全文
请发表友善的回复…
发表回复
du2lon 2018-12-28
- 打赏
- 举报
如果想不突出来就在父盒设置溢出隐藏：overflow:hidden;
你这个应该是子盒设置了浮动！如果子盒要浮动并且不溢出父盒的话就在子盒列表的最后加一个隐藏盒并设置清除浮动！
<div class="box">
<div class="list">列表</div>
<div class="list">列表</div>
<div class="list">列表</div>
<div class="cf"></div>
</div>
<style>
.box{whidth:100%; hight:100%}
.list{width:38%; hight:350px; float:left; display:inline;}
.cf{height:0; clear:both;}
</style>
PS: 注意浮动盒一定要设置显示为行内样式，否则 IE 浏览器下很容易出错！比如 IE 6 下浮动盒设置了 margin 后会变为值的两倍！比如你设置 margin-left 为10px，它实际会显示为20px
你这个应该是子盒设置了浮动！如果子盒要浮动并且不溢出父盒的话就在子盒列表的最后加一个隐藏盒并设置清除浮动！
<div class="box">
<div class="list">列表</div>
<div class="list">列表</div>
<div class="list">列表</div>
<div class="cf"></div>
</div>
<style>
.box{whidth:100%; hight:100%}
.list{width:38%; hight:350px; float:left; display:inline;}
.cf{height:0; clear:both;}
</style>
PS: 注意浮动盒一定要设置显示为行内样式，否则 IE 浏览器下很容易出错！比如 IE 6 下浮动盒设置了 margin 后会变为值的两倍！比如你设置 margin-left 为10px，它实际会显示为20px
yaotomo 2018-12-26
- 打赏
- 举报
sass或者less预处理可以进行一些计算
天际的海浪 2018-12-14
- 打赏
- 举报
可以用calc()计算函数
margin: 10px;
width: calc(50% - 20px);
margin: 10px;
width: calc(50% - 20px);
