原文：摘自http://www.canaansky.com/blog/107/

在css的盒子模型中，最内部是content area，然后是padding、border、margin

那么width其实就是content area，
innerWidth = width + padding
outerWidth = innerWidth + border

不过，jQuery的outerWidth属性还可以传递一个参数，那么：
outerWidth(true) = outerWidth + margin

稍微有点基础的童鞋应该能很明了地看出来区别了吧。不过这个只是我简单测试的结果，没有做什么特别的测试。若有错误，请纠正。

同理，这个区别同样适用于height、innerHeight、outerHeight；而offset属性是计算到border的位置的哦~

jQuery中width、innerWidth、outerWidth的区别的更多相关文章

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

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

  2. JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义

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

  3. Jquery中的 height(), innerHeight() outerHeight()区别

    jQuery中的 height innerHeight outerHeight区别 标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参 ...

  4. jquery中mouseover和mouseenter的区别

    jquery中mouseover和mouseenter的区别 一.总结 一句话总结: 见名知意:enter(进入)和over(在上方)的意思好好思考一下 mouseover就是从子元素回到自己的时候也 ...

  5. 【jQuery】【转】jQuery中的trigger和triggerHandler区别

    trigger(event, [data]) 在每一个匹配的元素上触发某类事件. 这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个'submit',则同样会导致浏览器 ...

  6. jquery中attr和prop的区别、 什么时候用 attr 什么时候用 prop (转自 芈老头 )

    jquery中attr和prop的区别. 什么时候用 attr 什么时候用 prop   在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这 ...

  7. JQuery中的html(),text(),val()区别

    jQuery中.html()用为读取和修改元素的HTML标签,.text()用来读取或修改元素的纯文本内容,.val()用来读取或修改表单元素的value值. 1.HTML html():取得第一个匹 ...

  8. jQuery中.attr()和.prop()的区别

    之前学习jQuery的时候,学习到了两种取得标签的属性值的方法:一种是elemJobj.attr(),另一种是elemJobj.prop().而在学习JS的时候,只有一种方法elemObj.getAt ...

  9. jquery中attr和prop的区别（转）

    在网络上看到这样一篇关于jquery中attr和prop的区别文章,觉得不错,所以转载了. 在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined.如果你要 ...

  10. 基于jquery中children()与find()的区别介绍

    本篇文章介绍了,基于jquery中children()与find()的区别,需要的朋友参考下 .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选 ...

随机推荐

  1. 汇编实现点亮Led灯(2440)

    1.gboot.lds OUTPUT_ARCH(arm)ENTRY(_start)SECTIONS {    . = 0x30008000;        . = ALIGN(4);    .text ...

  2. easyUI combobox 控件 使用

    1,combobox 二级联动 (参数传递 函数调用) // toolbar 学校班级二级联动 var paramSearch = { school : $('#search-school'), cl ...

  3. Ajax方式上传文件

    用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 For ...

  4. Collections.unmodifiableMap

    1. Collections.unmodifiableMap 是什么? Java的官方解释: public static <K,V> Map<K,V> unmodifiable ...

  5. UnityEditor

    1.添加菜单 [MenuItem("Tools/MyTool")] [MenuItem("Tools/MyTool", false, 10)] 优先级控制菜单的 ...

  6. iOS中如何监测来电

    http://blog.csdn.net/liujinlongxa/article/details/44207587

  7. 消除左递归c语言文法

    <程序> -〉 <外部声明> | <函数定义><外部声明> -〉<头文件> | <变量> | <结构体> <头 ...

  8. 修改html页面文字选中样式

    ::selection { background-color: #31B0D5; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.2); }

  9. 如何让两个div在同一行显示?一个float搞定

    最近在学习div和css,遇到了一些问题也解决了很多以前以为很难搞定的问题.比如:如何让两个div显示在同一行呢?(不是用table表格,table对SE不太友好)其实,<div> 是一个 ...

  10. 微信共享收货地址 edit_address:fail 吐白沫级解决方案

    又被微信坑了一整天,看完官方文档怎么测试都不通过,我一直怀疑是新版本微信支付我没有设置“共享收货地址”开关造成的. 后来经过验证,新版本不需要做这件事了. 那么,我没错,是微信的文档没及时更新... ...