#div1 {
width: 100px;
height: 100px;
border: 5px black solid;
padding: 10px;
margin: 10px;
background: orange;
}

#div1-son {
background: white;
width: 100%;
height: 100%;
}

<div id="div1">
  <div id="div1-son"></div>
</div>

width(): 获取第一个匹配元素内部宽度(不包括补白 padding 和边框 border)。

width(): 100

innerWidth() 获取第一个匹配元素边框以内的宽度(包括补白 padding ,不包括 边框border)。

innerWidth(): 120

outerWidth() 获取第一个匹配元素外部宽度(默认包括补白 padding和边框border )。此方法对可见和隐藏元素均有效。

outerWidth(): 130

outerWidth(true) 获取第一个匹配元素外部宽度(默认包括补白 padding和边框border和外边距Margin )。此方法对可见和隐藏元素均有效。

outerWidth(true): 150

height(): 获取第一个匹配元素内部高度(不包括补白 padding 和边框 border)。

heigh(): 100

innerheight() 获取第一个匹配元素边框以内的高度(包括补白 padding ,不包括 边框border)。

innerheight(): 120

outerHeight() 获取第一个匹配元素外部高度(默认包括补白 padding和边框border )。此方法对可见和隐藏元素均有效。

outerWidth(): 130

outerHeight(true) 获取第一个匹配元素外部高度(默认包括补白 padding和边框border和margin )。此方法对可见和隐藏元素均有效。

outerWidth(): 150

jquery width(), innerWidth(), outerWidth() 区别的更多相关文章

  1. jQuery中【width(),innerWidth(),outerWidth()】

    这个问题,已经别扭我多年了,今天终于彻底解决了,拿出来庆贺一下.jquery作为开源项目,无论从思路上,还是从严谨性上,让人崇敬. 随着时间的流逝,jquery的一些功能被逐渐挖掘出来.通过jQuer ...

  2. jQuery中的width() innerWidth() outerWidth() outerWidth(true)的区别

    width()仅仅包括content(内容) innerWidth()包括content(内容)和padding(补白) outerWidth()包括content(内容),padding(补白)和b ...

  3. jQuery—一些常见方法(3)【width(),innerWidth(),outerWidth()】

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. jQuery height() innerHeight() outerHight() width() innerWidth() outerWidth()源码解读

    在第二层each,传入的对象以height举例是这样的,{padding:innerHeight,content:height,"":outerHeight} 对它遍历调用func ...

  5. width() innerwidth() outerwidth() css('width')

    不多说,用一图足以说明 首先先解释下普通元素和非普通元素, 非普通元素是指window,document这些 元素对象, 普通元素是指除window,document之外的元素,如:div 对于普通的 ...

  6. jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别

    jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别 var a = 元素本身的宽度: width() = a: innerWidt ...

  7. [转]jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别

    转自:http://www.cnblogs.com/keyi/p/5933981.html   jquery中innerWidth(),outerWidth(),outerWidth(true)和wi ...

  8. jquery中innerwidth,outerwidth,outerwidth和width的区别

    在jQuery中,width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度, outerWidth()方法用于获得包括内边界(padding)和 ...

  9. innerWidth outerWidth

    在jQuery中: 一.width()方法用于获得元素宽度: 二.innerWidth()方法用于获得包括内边界(padding)的元素宽度; 三.outerWidth()方法用于获得包括内边界(pa ...

随机推荐

  1. ZOJ1463

    题意:给一个括号字符串,求解最少添加的字符能使整个字符串匹配. 输入: s(未匹配的字符串) 输出: S(匹配后的字符串) 思路:绝壁超级坑的一道题,格式我不想说什么了,特坑,然后就是对给定的字符串, ...

  2. Iframe之间及iframe与父窗体之间值的传递

    方法一:ScriptManager.RegisterClientScriptBlock(this,typeof(Page), "NoInformation", "wind ...

  3. strace 使用

  4. Swift - 27 - 使用元组让函数返回多个值

    //: Playground - noun: a place where people can play import UIKit // 定义一个数组 var userScores:[Int]? = ...

  5. equals和hashcode

    java当中所有的类都继承于Object这个基类,在object中的基类定义了一个equals方法,public boolean equals(Object obj) {     return (th ...

  6. dbm数据库

    所有版本的linux以及大多数的UNIX版本都随系统带有一个基本的.但却非常搞笑的数据存储历程集,他被称为dbm数据库.适用于存储比较静态的索引化数据库,即使用索引来存储可变长的数据结构,然后通过索引 ...

  7. jQuery图片提示示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 修改PHP的默认时区

    每个地区都有自己的本地时间,在网上及无线电通信中,时间的转换问题显得格外突出.整个地球分为24个时区,每个时区都有自己的本地时间.在国际无线电或网络通信场合,为了统一起见,使用一个统一的时间,成为通用 ...

  9. IOS自定义alertview

    在家闲来无事,于是就看起来ios绘图的那块,写点什么好呢? 鼓捣了一会,总算写出了一个小东西 这个是写完以后的效果 这里我实现了三种款式的alertview 分别是成功,错误和警告,剩下的呢有空继续添 ...

  10. 10:Hello, World!的大小

    总时间限制:  1000ms 内存限制:  65536kB 描述 还记得在上一章里,我们曾经输出过的“Hello, World!”吗? 它虽然不是本章所涉及的基本数据类型的数据,但我们同样可以用siz ...