css中关于各种宽度和高度区别

对于宽度的各种定义，不同语境下有不同的含义，PC端与移动端的表现也有不同，还可能与缩放水平、滚动条、viewport设置等因素相关。

读取宽度时，需要明确想要读取的是哪种宽度、这个宽度值受哪些因素影响、与哪些因素无关，这样才能写出适应性更强的代码。

经过一番试验与探索，得到成果整理如下，包括表格、示意图、演示页面，与大家分享。

-------------------------------

关于元素尺寸

对于jQuery：

width(), innerWidth(), outerWidth()

 

对于原生JS:

clientWidth, offsetWidth, scrollWidth

 

clientWidth是内容除去滚动条后实际显示出来的宽度，scrollWidth是包括溢出部分的总宽度。

需要注意的是滚动条的宽度在不同浏览器下是不一样的。