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

在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;