css 各种高度和宽度

window.innerheight 返回窗口的文档显示区的高度,不包括菜单栏、工具栏以及滚动条等的高度。

window.innerwidth 返回窗口的文档显示区的宽度,不包括菜单栏、工具栏以及滚动条等的宽度。

window.screen.height 屏幕分辨率的高
window.screen.width  屏幕分辨率的宽

window.screen.availHeight 返回屏幕可用区域高度,对于pc会减去任务栏的高度

window.screen.availWidth  返回屏幕可用区域宽度

document.body.scrollHeight 整个网页的高度,包括滚动区域

document.body.scrollWidth  整个网页的宽度,包括滚动区域

HtmlElement.scrollTop 它返回当前元素相对于其 offsetParent 元素的顶部的距离,offsetParent元素是指含有定位的父元素。

documenr.body.scrollTop 表示最外面滚动条的高度。

document.body.offHeight  它返回当前元素相对于其 offsetParent 元素的顶部的距离。

如果要求某元素的高度,可以对该元素以及该元素的offsetParent以及该元素的offsetParent的offsetParent的offsetTop求和,和的结果就是该元素的高度。

jquery

$().height()            用于获取或者设置高度,该高度不包括padding,border和margin

$().width()   

$().innerHeight()    获取第一个匹配元素内部区域高度(包括padding、不包括border,margin)。此方法对可见和隐藏元素均有效。

$().innerWidth()

$().outerHeight([option])  option为true时,计算元素的高度,包括padding,border和margin,没有参数或者设置option为false时,计算元素的高度时,仅仅包括padding和border

$().outerWidth([option]) 

posted on 2015-10-10 14:46 梦见世界 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/lifeisshort/p/4866852.html

css 各种高度和宽度相关推荐

  1. css设置高度和宽度相同

    (根据宽度设置高度)如果确定width:100%;则设置高度 height: 100vw; (根据高度设置宽度)如果确定高度height:100%;则设置 width: 100vh; (根据宽度设置高 ...

  2. 纯 CSS 实现高度与宽度成比例的效果

    css代码如下: .item {float: left;margin: 10px 5%;padding-bottom: 33.98%;width: 21%;height: 0; } 效果: http: ...

  3. css 图片高度随宽度变化成正方形

    .list-img {width: 100%;position: relative;overflow: hidden;padding-bottom: 100%;//重要属性} .list-img im ...

  4. html盒子宽高,css盒子模型之宽度和高度

    盒子模型的宽度width高度height;宽度和高度的单位px像素,使用%动态计算(自适应和响应式) HTML代码 *lt;div class="pag1">*lt;/div ...

  5. css里dom宽度,2019-08-23 DOM中各种高度、宽度

    1.引言 对常见CSS x,y属性有大概了解,实际运用过程中发现很多概念模糊不清,对其进行学习. 2.常见x,y属性概念 1. e.clientX 是目标点距离浏览器可视范围的X轴坐标 2. e.pa ...

  6. css设置元素继承父元素宽度_CSS设置HTML元素的高度与宽度的各种情况总结

    1.元素不设宽度 第一种情况:元素为文档流中元素 dd dd dd 结论1:把子元素定位换成position:relative与上述例子表现一样,因此在元素不设宽度时,若元素为文档流中元素,则此元素继 ...

  7. 纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

    纯CSS实现移动端常见布局--高度和宽度挂钩的秘密 不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy, ...

  8. css 高度随宽度比例变化

    方案一: padding实现 原理: 一个元素的 padding,如果值是一个百分比,那这个百分比是相对于其父元素的宽度而言的,padding-bottom 也是如此. 使用 padding-bott ...

  9. css设置宽度与高度比例,实现高度为宽度的百分之多少

    自适应网站,因文章内容上传图片宽高比例不统一,列表页调用图片展示不整齐. css设置宽度与高度比例举例: html <div class="banner"><di ...

最新文章

  1. 【Python】SyntaxError: unexpected EOF while parsing
  2. Phalcon和YII的优点
  3. ubuntu16.04安装UR3/UR5/UR10机械臂的ROS驱动并实现gazebo下Moveit运动规划仿真以及真实UR3机械臂的运动控制(1)
  4. 机器学习-集成之随机森林算法原理及实战
  5. 使用基本工具类和预编译进行对数据库的增删改查
  6. 扼杀 304,Cache-Control: immutable
  7. android 自定义actionbar,如何让android的actionbar浮动且透明
  8. 爬虫学习日记 Day1 什么是request,respond,url,headers
  9. 计算两个正整数的最大公约数
  10. 【报错】table burner has no column named USER (code 1): , while compiling: INSERT INTO burner(USER,YELL
  11. 适合python组态软件_组态软件心得体会
  12. PRML第三章3.3贝叶斯线性回归
  13. usb调试助手_【小白教程】如何使用米卓同屏助手?
  14. golang emoji表情处理
  15. 2.基于ITIL的IT服务管理基础篇 --- IT服务管理的背景
  16. 三、PyQt5高级控件的使用
  17. 在java中如何产生随机数
  18. 织梦html网站地图插件,织梦:DEDECMS XML网站地图插件
  19. DOCKER里面PYTORCH关于GLOO地址声明 NCCL地址声明
  20. 二、PC连接上tello edu并通过python进行简单控制

热门文章

  1. 直播疑难杂症排查(7)— 黑屏、花屏、闪屏问题
  2. AddMvcCore,AddControllers,AddControllersWithViews,AddRazorPages的区别
  3. 电脑死机怎么办?超级简单的方法
  4. 阿里现场三面+HR面
  5. 如何将图片一键重命名按顺序_图片批量重命名工具(RenameIt)
  6. 江苏省普通话水平测试计算机评分细则,江苏省计算机辅助普通话水平测试评分细则...
  7. 开鑫金服落实“同心圆”工程 为老年投资人保驾护航
  8. 牛客网数据库SQL实战45—— 将titles_test表名修改为titles_2017
  9. Parallel HDF5 简介
  10. 扫码支付java,详解JAVA后端实现统一扫码支付:微信篇