给div加上padding和border，如何不让div整体改变

最近要入门H5,遇到很多困惑，所以，每解决一个，我就要写在博客里，以防忘记！

 

给div加上padding和border，如何不让div整体改变？

如果想要实现这样的效果，只需要在这个div块中写入

box-sizing:border-box;

CSS3 box-sizing属性有3个值

1 :  content-box;

我想这个值就是一般浏览器的默认的，div的实际宽度 = div的width + pading + border;（标准盒模型）

2 :  border-box;

这个值可以不让padding盒border影响div的整体大小，div的实际宽度 = div的width （怪异盒模型）

3 :  inherit；

在子元素中写inherit可以继承父元素的box-sizing值；