#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. 在CSS文件中引入其他CSS文件

    引入CSS的方法有两种,一种是@import,一种是link 一.@import url('地址');二.<link href="地址" rel="styleshe ...

  2. Webview的使用和注意事项

    1.webView是一个展示web网页的控件,继承 AbsoluteLayout 2.webview的俩个回调应用层: 1)webViewClient 这个对象的创建 WebViewClient my ...

  3. Jquery 操作 select

    1.判断select选项中 是否存在Value="paraValue"的Item $("#selectid option[@value='paraValue']" ...

  4. [转] NSString / NSMutableString 字符串处理,常用代码

     原文 :  http://justcoding.iteye.com/blog/1405951 Objective-C 中核心处理字符串的类是 NSString 与 NSMutableString , ...

  5. 嵌入式开发(一) Ubuntu12.04下搭建交叉编译环境

    操作系统:Ubuntu12.04 AMD64位 交叉编译环境:arm-Linux gcc版本4.4.3 前言: 首先理解一下交叉编译的意思.我们要给嵌入式设备写应用程序,但是又不能在嵌入式设备上完成所 ...

  6. 跟我学android-常用控件之EditText

    EditText 是TextView的直接子类,它与TextView的区别在于,EditText可以接受用户输入. 下面通过一个实例来说明EditText的用法 实例:sina 微博的登录界面(注意, ...

  7. POJ 2438 (哈密顿回路)

    分析: 2*n个小朋友,每个最多有n-1个"敌人",显然是存在哈密顿回路的. 预处理边,然后找哈密顿回路. code #include <iostream> #incl ...

  8. nodejs新手教程中upload file的问题

    可参见: http://cnodejs.org/topic/50234890f767cc9a51f88481 request.setEncoding("utf8");应注释掉.

  9. Java简介(3)-基本语法

    1.大小写敏感 2.类名 3.方法名. 4.源文件名

  10. underscorejs-indexBy学习

    2.19 indexBy 2.19.1 语法 _.indexBy(list, iteratee, [context]) 2.19.2 说明 给定一个list,和 一个用来返回一个在列表中的每个元素键 ...