各种高度样式和字体单位区别

px、rem、em、vh、wh、vm的区别

px

px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。

em

参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

rem

css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。

vw

css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。
举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

vh

css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。
举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。

vm

css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm

举个例子：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px。

JS三种获取dom元素样式的方法

• dom.style.width
• window.getComputedStyle(dom).width
• dom.getBoundingClientRect()

重点介绍一下getBoundingClientRect
object node.getBoundingClientRect();
object有6个属性

• width: node的宽度（包括边框）
• height: node的高度（包括边框）
• top: node到顶部的距离
• left: node到最左边的距离
• right: left + width
• bottom: top + height

高度总结

• offsetHeight、offsetWidth 返回元素的高度 (包括边框)但不包括margin
• clientHeight、clientWidth 返回元素高度(不包括边框)
• offsetTop、offsetLeft 获取node到offsetParent的top距离和left距离（定位父级bordor之下的距离）。
• clientTop、clientLeft返回周围边框的高度。

要获取当前页面的滚动条纵坐标位置，用：
document.documentElement.scrollTop;
而不是：
document.body.scrollTop;
documentElement 对应的是 html 标签，而 body 对应的是 body 标签。

在标准w3c下，document.body.scrollTop恒为0，需要用document.documentElement.scrollTop来代替;

原文js返回顶部和document.body.scrollTop用法