你真的知道元素的宽度吗？

 W3C的标准，又称标准盒子模型，content-box 的width：

《css权威指南》和MDN官方文档对 ' width'都做出了相同的规定

《css权威指南》：元素的 width 被定义为从左内边界到右内边界的距离，height 则是从上内边界到下内边界的距离。

 MDN官方文档：width 属性指定了元素内容区的宽度. 内容区在元素padding，border和margin里面。

   地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/width   

        标准盒模型的width就是content的宽度 ，不包括内边距padding，边框border.在最新的css3可以通过box-sizing：content-box来设置盒子为标准盒子。

Internet Explorer标准，又称IE盒模型，border-box的width:

        IE盒模型的官方文档对于此的定义暂时没有找到，但是众所周知的是，此模型的width包括内容content，内边距padding，边框border。可以通过box-sizing:border-box来实现。一旦设置成IE盒模型，元素的渲染宽度就是设置的width值，再设置内边距padding，边框border时就会向内拓展，侵吞content内容，不会向外拓展，也就是相当于content包裹了padding，border。

        后记，当提到中文" 宽度 "时，一般就是指的是可视宽度，渲染宽度，即在浏览器中的显示宽度，当提到英文"width"时，指的是content的宽度，二者不能混为一谈。而且我们会发现这两种盒子模型的width其实都是content的宽度。