MDN简介

MDN处在MCP 与MS 之间，是由MDN 管理模块MM、目录服务器DS(多目录服务器)、虚拟内容服务器VCS 以及若干个分布在网络中的PN节点(图中表示为P1, P2, P3)构成的，主要功能是提供广域媒体内容分发业务，

MDN 上对以上3属性有绝妙的总结：

如果你需要知道元素总共占用了多少空间，包括可视内容、滚动条(如果有的话)、内边距和边框的宽度，你会使用offsetWidth和offsetHeight属性;(简单说offsetWidth是border+(若有)scrollbar+padding+width值之和)

如果你需要知道展示区域内容占用了多少空间，包括内边距但是不包括边框、外边距或者滚动条，你会使用clientWidth和clientHeight属性;(简单说clientWidth是padding+width值之和)

如果你想要知道内容区域的实际大小，而不局限于可见区域的话，你会使用scrollWidth和scrollHeight属性。即使使用了滚动条仅有部分内容可见，这两个属性仍会返回元素的完整内容宽高;例如，一个300x300像素 的滚动盒子里放置了一个600x400像素的元素，scrollWidth将会返回600，scrooHeight返回400.

最后补充：style.width仅能返回当样式写在行内的时候以style方式定义的内部样式表的width属性值。style.width获取的元素宽度只是content的宽度，不包括border、和padding所占的宽度，且宽度值是带单位px的。style.width也可以在js中用来设置元素的宽度，而offsetWidth不可以。当样式写在样式表中时，如 #box{ width: 100px; }, 此时只能用offsetWidth来获取元素的宽度，而style.width所返回的值为空。例如：https://jsbin.com/jihaqagule/1/edit?html,js,output