box-sizing属性

我们都知道，设置元素的padding或者margin属性时都会改变元素的width和height，传统的方法是将padding和margin的值考虑进去，运用数学的方法进行计算来加以调整，以便使布局不至于改变，但现在box-sizing 属性，可以在使用padding或margin属性时不改变元素的大小，下面使用例子加以说明：

eg：

传统情况下：

HTML代码：

CSS代码：

效果：

增加padding(或者margin)

HTML代码：

CSS代码：

效果：

但如果增加box-sizing则不改变元素的大小

HTML代码：

CSS代码：

 

效果：

 注：box-sizing目前还属于较新的属性，或许你在使用时还得像下面这样：

 

转载于:https://www.cnblogs.com/ncuhwxiong/p/5911875.html