盒模型之宽度 width

如果不设置块级元素的 width 属性，那么这个属性的默认值是 auto ，结果会让元素的宽度扩展到与父元素同宽。

没有宽度的盒子

没有（就是没有设置 width）宽度的元素始终会扩展到填满其父元素的宽度为止。添加水平边框、内边距和外边距，会导致内容宽度减少，减少量等于水平边框、内边距和外边距的和。

有宽度的盒子

为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展得更宽。实际上，盒子的 width 属性设定的只是盒子内容区的宽度，而非盒子要占据的水平宽度，浏览器会在宽度之外绘制元素的内边距和边框。盒子的实际宽度等于 width 、边框、内边距、外边距的和。

注意

CSS3 新增了一个 box-sizing 属性，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

{ 
    box-sizing:border-box; 
}