各种width和height傻傻分不清楚(width,clientWidth,scrollWidth,offsetWidth,innerWidth,outerWidth)

width:内容宽度(标准盒模型),怪异盒模型下包含了border,padding

 

clientWidth:包含内容和padding的宽度

 

scrollWidth:跟clientWidth差不多,没发现啥区别(chrome浏览器下取值一样)

 

offsetWidth:包含内容宽度,padding,border

 

innerWidth和outerWidth(仅仅针对浏览器窗口)

window.innerWidth:包含垂直滚动条在内的窗口宽度

window.outerWidth:整个浏览器窗口的宽度

 

这些东西确实很基本,但是又经常想起来觉得分不清,特此备忘

作者:张雪飞
出处:https://zhangxuefei.site/p/1912
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注