歡迎光臨一流素材網,免積分免費素材下載!

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
相關教程
給個評價吧
贵州11选5开奖直播 初学者怎么理财 红太阳配资 贵州快三玩法中奖概率 幸运农场开奖 什么是股票融资 湖南快乐十分五个数最大遗漏 下期平码如何计算出来 昨晚快乐双彩开奖结果 互联网理财平台盛佳宝 江西11选5一定牛中奖走势图