DOM属性

补充css知识

传统的盒模型来源于css2,是width为内容的宽度，
如果要算盒子的宽度的话是border+padding+内容宽高。这个是盒子的宽度。
之所以会出现这种盒模型是以为早期HTML和css是为了显示文字而生的。所以没有考虑到很多呗，这样最简单就这样来了。
而后期图片增多，就不行了。但是flex布局ie可能存在兼容问题，所以就引入了另一种计算盒模型的方式。这种模型叫做怪异盒子也叫做IE盒子，IE盒子是border+padding+内容合起来是width。如果他们合起来超过width，就会把盒子撑大，所以不要让他们超过盒子的宽。

DOM的对象属性

属性	意义
clientWidth	padding+内容-滚动条
clientHeight	padding+内容-滚动条
offsetWidth	border+padding+内容
offsetHeight	border+padding+内容
scrollHeight	滚动条，如果没有则为padding-内容含滚动条
scrollHeight	滚动条，如果没有则为padding-内容含滚动条
clientLeft	内容距左边的距离
offsetLeft	整个盒子距左边的距离，如果距左上角有定位，那么是距离父元素的距离。而且是子元素的border开始到父元素的内容宽高的一个距离。
scrollLeft
clientTop
offsetTop
scrollTop	滚动条距离可视区域的距离/可视区域的高 = scrollTop/整个页面的高<=>scrollTop/scrollHeight = ?/clientHeigth

scroll比client多了个滚动条处理，如果滚动条比clientWidth大，则变成滚动条的内容。
加padding是为了图文混排，所以client和scroll，就类似于手机屏幕在来回的滑动。而offset，是偏移量的意思。当然不带margin,因为marin不是盒子模型的宽的一部分。所以offset应该是值这个dom对象在页面占有的宽度和高度。
总结来说，offset是内容宽高，client和scroll是可视区域宽高。