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

熵桥流沙
• 阅读 1341

三种类型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——浏览器在屏幕位置

参考:

点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
梦
4年前
图片放大显示全屏
html代码<divid"outerdiv"style"position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);zindex:2;width:100%;height:100%;display:none;"<divid"innerdiv"style"position:abs
Stella981 Stella981
3年前
PhoneGap设置Icon
参考:http://cordova.apache.org/docs/en/latest/config\_ref/images.html通过config.xml中的<icon标签来设置Icon<iconsrc"res/ios/icon.png"platform"ios"width"57"height"57"densi
Wesley13 Wesley13
3年前
CSS块级元素与行内元素
CSS块级元素与行内元素行内元素与块状元素1、块级元素:可以设置width,height属性。行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化。可以通过lineheight设置行高(行高和height是不同的东西)。2、块级元素:可以设置margin和padd
Wesley13 Wesley13
3年前
CSS定位和滚动条
0805自我总结一.绝对定位position:absolute;/绝对定位:1、定位属性值:absolute2、在页面中不再占位(浮起来了),就无法继承父级的宽度(必须自己自定义宽度)3、一旦定位后,定位的布局方位top、bottom、left、right都能参与布局
Stella981 Stella981
3年前
IE7、IE8、IE9对min
问题:    IE7、IE8、IE9对minheight不识别,其他无问题解决:   box{width:100px;height:35px;}   htmlbodybox{width:auto;height:auto;width:100px;minheight:35px;} 实例:
Stella981 Stella981
3年前
Sass
嵌套规则(NestedRules)Sass允许将一套CSS样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器mainp{color:00ff00;width:97%;.redbox{
Wesley13 Wesley13
3年前
Unity3D GUI笔记
Rect(intleft,inttop,intwidth,intheight)//left:离屏幕左边距离;top:离屏幕上边距离;width:Rect宽度;height:Rect高度;文本:Label(Rect(),Stringtext)//text:文字内容按钮:Button(Rect(),Tex
Stella981 Stella981
3年前
CSS 分类 (Classification)
★★CSS分类属性(Classification)★★⑴CSS分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。⑵下面是常用的属性以及描述:!(https://oscimg.oschina.net/oscnet/00cb565
Wesley13 Wesley13
3年前
HTML表格的基本结构标记
<table标记1.基本格式:<table属性1"属性值1"属性2"属性值2"......表格内容</table2.table标记的属性  width属性  表示表格的宽度,他的值可以是像素(px)也可以是父级元素的百分比(%)  height属性  表示表格的高度,他的值可以是像素(px