新零售商城 快打包

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

所属栏目:CSS技巧 时间:2017-10-07 来源:网络 作者:不详 点击:

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

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

比如:

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

?

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

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

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


请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

标签:CSS宽度

你应该也喜欢这些吧

共有 0 条评论

给个评价吧

验证码:

学习最多的

最近更新的