css盒子模型的宽度问题

最近看css权威指南的时候，发现一个之前特别不清楚的概念——宽度。

每个块级元素都有一个元素框，元素框内包括了元素内容，元素内边距，元素边框，元素外边距。

所以元素框的宽度=元素内容宽度+元素内边距+元素边框+元素外边距。

也就是他父元素的内容宽度。

那么我们常说的width就是元素框的宽度吗？

答案是否定的。我们常说的width属性值在css中被定义为从左内边界到右内边界的距离。也就是内容块的宽度。什么都不包括。例如

<div id="parent" style="width: 200px;padding: 20px;"></div>

这里，你用js去获取width值就是200px。就是一个很普通的属性值。加的padding并不会影响你的width值。

那么我们常说的padding+border+content宽度到底是什么呢？

这是元素可见区域的宽度。通常我们用offsetwidth获取就是这个宽度。当然了，我们常说的盒子宽度其实在我看来也是这个值。上面那个盒子的offsetwidth就是240

因为布局的时候有时候并不希望padding会撑大原来的盒子，所以css3中推出了已box-sizing的属性

Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。

Firefox 支持替代的 -moz-box-sizing 属性。

这个属性默认值是content-box。当我们把值设成border-box的时候为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

关于宽度还有一个最小宽度min-width和max-width的问题。这个值设置图片的时候用的比较多。如果元素小于最小宽度，元素会被拉伸到最小宽度，如果元素大于最大宽度，元素会被压缩到最大宽度值。如果在两者之间正常显示。

暂时想到的关于宽度的就这么多。主要参考css权威指南和w3cschool结合了一些自己的理解，如有错误，还请指正。