JavaScript 盒模型 尺寸深入理解
更新时间：2012年12月31日 11:16:42 作者：
当任意一个块级元素的宽度或高度被显式指定，它应当只确定这个可见元素自身(内容区)的宽度或高度，而padding, border和margin随后被应用
概念
引自维基百科：根据由万维网联盟（W3C）于1996年发行并于1999年修订的CSS1所指定的，当任意一个块级元素的宽度或高度被显式指定，它应当只确定这个可见元素自身(内容区)的宽度或高度，而padding, border和margin随后被应用。Internet Explorer在“怪异模式” 则把内容，内边距（padding）和边框（border）全部包括在一个指定的宽度或高度之内；这导致它呈现出一个比遵从标准行为的结果更窄或者更短的盒子。如下图：
理解盒模型，不管是对于设置一个元素外边据、边框、内边距，高宽CSS样式的准确应用，还是对于使用JavaScript去计算盒子的宽度、高度都有很大的帮助。比方说jQuery中提供的outerWidth，innerWidth，width，有了上面那个图，随时都可以很清楚的了解这个值的准确信息，在计算一个元素的位置和尺寸时都很有用处。
在弹出层中的应用，动态调整弹出层尺寸，以及拖拽过程中计算最大范围边距时都有用到。
一张图理解：
相关文章
常用一些Javascript判断函数,都是一些js基础知识，学习js的朋友可以看下2012-08-08
js中getBoundingClientRect( )方法案例详解
这篇文章主要介绍了js中getBoundingClientRect( )方法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-07-07
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
本篇文章是对DHTML,JavaScript,DOM,BOM以及WEB标准进行了详细的描述介绍，需要的朋友参考下2013-06-06
这篇文章主要介绍了javascript设计模式之对象工厂函数与构造函数详解，使用对象字面量，或者向空对象中动态地添加新成员，是最简单易用的对象创建方法，除了这两种常用的对象创建方式，JavaScript还提供了其他方法创建对象,需要的朋友可以参考下2015-07-07
本篇文章主要介绍了js学习笔记之事件处理模型，对初学这具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2016-10-10
JavaScript中用toString()方法返回时间为字符串
这篇文章主要介绍了JavaScript中用toString()方法返回时间为字符串的方法,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
js中slice()方法的使用说明...2007-03-03
js脚本学习 比较实用的基础...2006-09-09
下面小编就为大家带来一篇javascript 继承学习心得总结。小编觉得挺不错的。现在分享给大家。给大家做个参考2016-03-03
这篇文章主要介绍了JavaScript中的语句，包括条件分支语句、循环语句、迭代语句、Lable语句、break和continue语句、with语句、swith语句，十分全面细致，推荐给小伙伴们。2015-01-01
最新评论