css:width

在盒模型中，我们如果为内部元素设置精确的宽度，那么这个宽度指的是：content区域的宽度。这就意味着如果我们为该元素设置margin/padding/border时，均会改变该元素在页面中的实际宽度。但是若不指定元素的宽度或将其设置为auto，在为元素设置以上属性时，将不会改变盒子在页面中的实际宽度，但是盒子的content区域将会减小。如图：

我们也可以通过box-sizing属性来规定我们所设置的width的显示效果。

box-sizing:content-box/border-box;

其中，content-box对应的是第一种情况，border-box对应的则是第二种情况，此情况我们也将其称为怪异盒模型，css的默认值就是这种情况。