首页 > > 网页制作 > css >

关于CSS和JS中用到的各种Height和Width的问题

2018-12-02 06:13:28来源：博客园阅读 ()

自己记不住,列一下关于CSS和JS中用到的各类有关Height和Width属性的介绍对比.

所属类别	属性名	意义	其他
浏览器模型	Screen.height	浏览器窗口所在的屏幕的高度（单位像素）	1.除非调整显示器的分辨率，否则这个值可以看作常量，不会发生变化。 2.显示器的分辨率与浏览器设置无关，缩放网页并不会改变分辨率。
	Screen.width	浏览器窗口所在的屏幕的宽度（单位像素）
	Screen.availHeight	浏览器窗口可用的屏幕高度（单位像素）	因为部分空间可能不可用，比如系统的任务栏或者 Mac 系统屏幕底部的 Dock 区，这个属性等于height减去那些被系统组件的高度。
	Screen.availWidth	浏览器窗口可用的屏幕宽度（单位像素）
	window.innerHeight	返回网页在当前窗口中可见部分的高度（单位像素）	1.只读,用户放大网页的时候（比如将网页从100%的大小放大为200%），这两个属性会变小。因为这时网页的像素大小不变（比如宽度还是960像素），只是每个像素占据的屏幕空间变大了，因为可见部分（视口）就变小了。 2.注意:这两个属性值包括滚动条的高度和宽度
	window.innerWidth	返回网页在当前窗口中可见部分的宽度
	window.outerHeight	返回浏览器窗口的高度	包括浏览器菜单和边框（单位像素）,只读
	window.outerWidth	返回浏览器窗口的宽度	包括浏览器菜单和边框（单位像素）,只读
元素节点	Element.clientHeight	返回一个整数值，表示元素节点的 CSS 高度（单位像素）	1.只对块级元素生效，对于行内元素返回0。如果块级元素没有设置 CSS 高度，则返回实际高度。 2.除了元素本身的高度，它还包括padding部分，但是不包括border、margin。如果有水平滚动条，还要减去水平滚动条的高度。 3.注意，这个值始终是整数，如果是小数会被四舍五入。
	Element.clientWidth	返回元素节点的 CSS 宽度
	Element.scrollHeight	表示当前元素的总高度（单位像素），包括溢出容器、当前不可见的部分	1.只读. 2.它包括padding，但是不包括border、margin以及水平滚动条的高度（如果有水平滚动条的话），还包括伪元素（::before或::after）的高度。
	Element.scrollWidth	表示当前元素的总宽度（单位像素）
	Element.offsetHeight	表示元素节点的 CSS 高度（单位像素）	1.注意，这个值始终是整数，如果是小数会被四舍五入 2.只对块级元素生效，对于行内元素返回0。如果块级元素没有设置 CSS 高度，则返回实际高度。 3.了元素本身的高度，它还包括padding部分，但是不包括border、margin。如果有水平滚动条，还要减去水平滚动条的高度。 4.如果元素的 CSS 设为不可见（比如display: none;），则返回0。
	Element.offsetWidth	表示元素的 CSS 水平宽度（单位像素）
备注	1.document.documentElement的clientHeight属性，返回当前视口的高度（即浏览器窗口的高度），等同于window.innerHeight属性减去水平滚动条的高度（如果有的话） 2.document.body的高度则是网页的实际高度。一般来说，document.body.clientHeight大于document.documentElement.clientHeight 3.整张网页的总高度可以从document.documentElement.scrollHeight或document.body.scrollHeight上读取。