CSS设置width100%与padding后宽度溢出超出父节点解决方法

所属栏目:DIV+CSS技巧更新时间:2017-10-07来源:作者:deepdfhy浏览:0

在CSS中如果设置 width:100%,同时设置了padding后,宽度会超出父节点。等于实际宽度=100%+padding的宽度,这对我们的布局需求造成一定的困扰。

但使用CSS3中的box-sizing属性即可解决这个问题

比如:

.box {width: 100px;  height: 100px;  background: red;}
.boxx {width: 100%;  padding: 10px;  background: black;}

<div class="box"><div class="boxx"></div> </div>

那么boxx的实际宽度会超出box的宽度,

这时,只需给box添加 box-sizing:border-box; 属性即可解决

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;


收藏 0 有帮助 0 没帮助 0 打赏 0
相关教程
给个评价吧
领航时时彩软件 娱乐棋牌 基金配资价格 贵州快三技巧稳赚 网上游戏打鱼赌博 手机血流游戏 体彩开奖直播新浪 2019极速赛车信 我想找台湾马资料 广西快乐双彩今晚开奖结果查询 正版捕鱼游戏平台 个人转让二手麻将机 吉林快3大小怎么预测 5分pk10安妮 赌场有哪些扑克牌玩法 陕西快乐10分钟前三直走势图 股票大盘实时走势图