很多场景下会需要获取当前网页的宽高来达到一些效果，但是获取网页的宽高这里面还是有一点坑的，这里我进行了总结和详解

那么css如何实现高度height随宽度width变化保持比例不变呢？即给定可变宽度的元素，它将确保其高度以响应的方式保持成比例(即，其宽度与高度的比率保持恒定)。下面以高宽 2:1 为例，通过2种方式来实现这种效果。

网页正文部分上：window.screenTop ，网页正文部分左：window.screenLeft，屏幕分辨率的高：window.screen.height ，屏幕分辨率的宽：window.screen.width ，屏幕可用工作区高度：window.screen.availHeight

当做网页图片的切换时，有的做法是将两个div并排在一起，但是只能显示一个div的宽度，当要切换图片时将一个div的宽度从一个宽度值改为0，就实现了简单的图片替换了。 首先，我们将要更改宽度的div摆上来

使用内联样式的元素的宽和高。浏览器渲染以后的元素的宽和高，无论是用何种方式引入的css样式都可以，但只有IE浏览器支持这种写法。计算一个元素的绝对位置（相对于视窗左上角）

offset只读属性。width/height——显示出来的屏幕尺寸,top/left——相对于定位父元素的绝对位置.client只读属性。width/height——不带边框的offset，也不包含滚动条宽度top/left——内边距的外边缘与边框外边缘的距离，通常是边框宽度

一、offsetWidth与offsetHeight：获取的是元素的实际宽高 = width + border + padding ，二：offsetLeft与offsetTop；offsetLeft:获取自己左外边框与父级元素的左内边框的距离 ，offsetTop:获取自己上外边框与父级元素的上内边框的距离

首先说一下js动态获取浏览器或页面等容器的宽高的方法大体有哪些,有时候我们写了100%高度的时候，然后因为是当前页面的子页面，100%的只是父页面，而子页面有下拉条还有内容的话，一些东西就不能都获取到。

那么css如何实现高度height随宽度width变化保持比例不变呢？即给定可变宽度的元素，它将确保其高度以响应的方式保持成比例(即，其宽度与高度的比率保持恒定)。下面以高宽 2:1 为例，通过2种方式来实现这种效果。

当我们为div标签声明了宽度，文本内容为单词或者纯数字的时候会出现文本越界的情况。原因是由于：浏览器在解析我们页面的时候，给这一串数字当成一个词了，这样就不会自动切断字符串而进行换行。

基于实现元素的展开收缩，max-height，给定足够大的高度，就是言义上的任意高度，相对height来说比较灵活，两者的区别就是计算高度的过程，一个是由人为计算，一个由盒子内容高度去计算知识这种写法必须给定足够存放内容的高。

js获取浏览器/界面宽高的问题：clientHeight和clientWidth获取可视区域大小，scrollHeight和scrollWidth获取网页内容高度和宽度。offsetHeight和offsetWidth，获取网页内容高度和宽度（可视区域包括滚动条等边线，会随窗口的显示大小改变）

css中width为auto或者100%的区别四个理论：某div不显示设置宽度那么width为auto；某div的width在默认情况设置的是盒子模型中content的值；某div的width为100%表示的是此div盒子内容部分的宽度为其父元素的宽度

在写html表单的时候，发现了一个问题：input和button设置了一样的宽高，但是显示高度确不一致，很明显的看出高度不一样。这是由于button在高度计算上始终使用了Quirks模式。

css中，min-width是用来限制元素的最小宽度，max-width用来限制元素的最大宽度，也就是说当元素的width大于max-width,或者小于min-width。就被它们的值所代替，尤其适用于网站的自适应。下面将具体介绍下关于min-,max-的区别和联系