资讯专栏INFORMATION COLUMN

网页中的各种上下左右宽高值

tyheist / 2216人阅读

三种类型offset client scroll offset

只读属性。

width/height——显示出来的屏幕尺寸

top/left——相对于定位父元素的绝对位置

client

只读属性。

width/height——不带边框的offset,也不包含滚动条宽度

top/left——内边距的外边缘与边框外边缘的距离,通常是边框宽度

scroll

width/height——只读,带有溢出内容的client

top/left——非只读,相对于父容器的滚动起始位置,修改值可以改变滚动位置

demo代码见:https://codepen.io/jabbar/pen...

附加

window.outerWidth/window.outerHeight——窗口的外层的宽度和高度

window.innerWidth/window.innerWidth——浏览器窗口的视口(viewport)的宽度和高度

window.screen.width/window.screen.height——屏幕宽度和高度

window.screen.availWidth/window.screen.availHeight——屏幕可用宽度和高度

window.screenTop/window.screenLeft——浏览器在屏幕位置

参考:

https://segmentfault.com/a/11...

https://juejin.im/entry/59772...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54815.html

相关文章

  • 网页中的各种上下左右高值

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

    EastWoodYang 评论0 收藏0
  • 元素auto宽高的影响因素

    摘要:关于内联元素之前讨论的多是块级元素,而没有考虑到内联元素的情况。但巧合的是,在普通流定位中,内联元素宽度和高度规则却和块级元素绝对定位差不多,都只受内容大小影响。 我们知道,元素在没有设置宽高的情况下,默认的宽高值都为auto。而这个auto到底是如何让元素自动拥有宽高的呢,也就是说,元素的宽度和高度到底会受到什么因素的影响?本文将通过一个例子来对这一问题一探究竟,HTML结构和初始c...

    crelaber 评论0 收藏0

发表评论

0条评论

tyheist

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<