各种height/width总结
CSS盒模型是比较复杂的,尤其是当页面中有滚动条时,仅仅通过css来操作高度宽度是不够的,幸运的是Javascript提供了不少这样的接口。Javascript中clientHeight
/ cliengWidth
, scrollHeight
/scrollWidth
, offsetHeight
/ offsetWidth
, height
/ width
都可以获取高度和宽度,但是他们有一些细微的差别:
offsetHeight
/offsetWidth
:文档整体区域包含滚动条和border,对于display:block
的元素通过width/height + padding + border
可以计算出来。clientHeight
/cliengWidth
:可见区域包含padding
,不包含border
和滚动条,不能通过CSS样式计算出来,取决于滚动条的大小。scrollHeight
/scrollWidth
:内容区域的大小,不包含border
,包含不在可见区域内的隐藏部分,不能通过CSS样式计算出来。height
/width
:不包含border
和padding
。
另外:滚动条的宽度可以通过如下方式计算:
scrollbarWidth = offsetWidth - clientWidth - getComputedStyle().borderLeftWidth - getComputedStyle().borderRightWidth
各种height/width总结的更多相关文章
- jQuery - 03. each、prevaAll、nextAll、获取属性、修改属性attr/val/text()、jq.height/width、offset()./position()./scrol Left/Top 、事件绑定bind、delegate、on、事件解绑、事件对象、多库共存
each 方法 $ ( selector).each(function( index,element) { } ); 参数一表示当前元素在所有匹配元素中的索引号 参数二表示当前元素(DOM对象) ...
- Expanded, SingleChildScrollView, CustomScrollView, container, height, width
SingleChildScrollView, CustomScrollView, container, init: double.inifinity. then use Expanded to con ...
- 父容器的flowover:hidden 必须配合父容器的宽高height width才能生效
有时候 给父容器 加上了 flowover:hidden 这个css后, 其中的子元素为什么仍然会跑出来? 解决的根本方法就是要给 父容器 加上具体的一个宽度, 或高度. (而这个宽度和高度, 其实你 ...
- jQueryEasyUI中DataGrid的height,width,fit,fitColumns属性
height: 600, //不指定则默认垂直包裹,指定了则固定 width:1200,//不指定则水平100%平铺,指定了则固定 fit:false,//true:高度填充父窗体,忽略height属 ...
- IOS UI Frame 相对位置调整 与优化方法 Height Width X Y 调整
不使用xib ,纯代码开发的过程中,动态UI 需要改对象的大小位置 反复使用CGRectMake 去 setFrame 非常低效耗时,而且 牵一发动全身. 以下整理出几个方法,方便动态布局 1.s ...
- css中height, width默认值
转载自:https://www.cnblogs.com/heyode/p/5973960.html <body> <div class="wrap"> &l ...
- html元素height(width)是怎么确定的?
1.若height是确定的(比如height:100px),则height直接可确定(还受min-height,max-height影响,见height,min-height,max-heigth的作 ...
- Opencv中图像height width X 轴 Y轴 rows cols之间的对应关系
这里做一个备忘录:
- [WPF系列]- Style - Specify width/height as resource in WPF
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys=" ...
随机推荐
- MFC中的主窗口修改标题
MFC中的主窗口修改标题 如何去掉“无标题”1.在主程序中的InitInstance(): m_pMainWnd->SetWindowText("你要显示的东西如果不想显示置空就行&q ...
- java中创建对象的方法
有4种显式地创建对象的方式: 1.用new语句创建对象,这是最常用的创建对象的方式. 2.运用反射手段,调用java.lang.Class或者java.lang.reflect.Constructor ...
- 手动编译安装lamp之php
转自马哥教育讲课文档 三.编译安装php-5.4.8 1.解决依赖关系: 请配置好yum源(可以是本地系统光盘)后执行如下命令: # yum -y groupinstall "X Softw ...
- C# AutoMapper的简单扩展
AutoMapper可以很方便的将一个实体的属性值转化给另一个对象.这个功能在我们日常的编码中经常会遇到.我将AutoMapper的一些基本映射功能做成扩展方法,在编码中更方便使用. using Sy ...
- c++实验5 顺序/链式队列
链式队列及循环队列 1.循环队列的实现(请采用模板类及模板函数实现) [实现提示] 同时可参见教材p65-p67页的ADT描述及算法实现及ppt)函数.类名称等可自定义,部分变量请加上学号后3位.也可 ...
- Mybatis 动态Sql语句《常用》
MyBatis 的强大特性之一便是它的动态 SQL.如果你有使用 JDBC 或其他类似框架的经验,你就能体会到根据不同条件拼接 SQL 语句有多么痛苦.拼接的时候要确保不能忘了必要的空格,还要注意省掉 ...
- centos7安装nginx(自定义安装文件夹)
一.安装所需要的依赖软件 1.gcc:nginx编译依赖gcc环境 #yum install gcc-c++ 2.pcre:(Perl Compatible Regular Expressions)是 ...
- luoguP4647 [IOI2007] sails 船帆
https://www.luogu.org/problemnew/show/P4647 首先发现答案与顺序无关,令 $ x_i $ 表示高度为 $ i $ 的那一行帆的个数,第 $ i $ 行对答案的 ...
- [flex] as3.0 实现基于air的简单浏览器
<?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx= ...
- RHEL 7 下内存管理小记
RHEL 7 下内存管理小记 一.Overview 众所周知,在 Linux 操作系统中有三个目录非常有趣好玩. /dev /run /proc 一个个解释下,/dev 用于对特殊设备(BTW:特殊设 ...