html基本单位,html常用单位与js获取方法

以下为各种单位的说明

px：绝对单位，页面按精确像素展示

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算(浏览器默认字体是16px)，整个页面内1em不是一个固定的值。

rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

(另外需注意chrome强制最小字体为12号，即使设置成

10px 最终都会显示成

12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准，所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取)

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。

vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。(100vh为全屏)

vmin：vw和vh中较小的那个。

vmax：vw和vh中较大的那个。

vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome for android39支持

css中用calc()可以加入计算方程式calc()函数支持 "+", "-", "*", "/" 运算；

calc()函数使用标准的数学运算优先级规则width: calc(100% - 20px);

在介绍js获取长宽的方法前，先简单介绍点基础内容

window对象指包含浏览器一起的

Docunment对象是Window对象的一部分(浏览器内容部分)

window.location

window对象的location属性引用的是Location对象，表示该窗口中当前显示文档的URL

document.location

document的对象的location属性也是引用了Location对象

window.location===document.location //true

window.innerHeight,window.innerWidth(整个浏览器宽高)

window.outerHeight,window.outerWidth(除去浏览器头部栏目等宽高，但包含控制台)

window.screen 对象包含有关用户屏幕的信息

window.screen.heigth 屏幕高度

window.screen.width

window.screen.availHeight 屏幕可以利用的高度

window.screen.availWidth

window.screenTop 浏览器离屏幕的距离

window.screenLeft

innerHeight 浏览器可用的高度(兼容IE9以上，不包含控制台)

innerWidth

outerHeight 整个浏览器的高度(包含浏览器栏目，控制台等)

outerWidht

与client相关的宽高

document.body.clientWidth 该属性指的是元素的可视部分宽度和高度，即padding+content(如果没有滚动条，即为元素设定高宽)

document.body.clientHeight (如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高)

document.body.clientLeft 用来读取元素的border的宽度和高度

document.body.clientTop

与offset相关的宽高

document.body.offsetWidth 指的是元素的border+padding+content的宽度和高度

document.body.offsetHeight (该属性和其内部的内容是否超出元素的大小无关，只和本来设定的border以及width和height有关)

document.body.offsetParent  1，如果当前元素的父级元素没有进行CSS定位(position为absolute或relative),offsetParent为body

2，如果当前元素的父级元素中有css定位(position为absolute或relative),offsetParent取最近的那个父级元素

document.body.offsetLeft

document.body.offsetTop

关于scroll

document.body的 scrollWidht和scrollHight

一给定宽高小于浏览器窗口

scrollWidht，scrollHight通常是浏览器窗口的宽高

二给定宽高大于浏览器窗口，且内容小于给定宽高

scrollWidht，scrollHight给定宽高+padding+margin+border

三给定宽高大于浏览器窗口，且内容大于给定宽高

scrollWidht，scrollHight内容宽高+padding+margin+border

screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。

PageX：鼠标在页面上的位置，从页面左上角开始，即是以页面为参考点，不随滑动条移动而变化

clintX：跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。