深入了解JavaScript盒子模型大小

引用自维基百科的概念：根据万维网联盟(W3C)1996年发布并于1999年修订的CSS1，当明确指定任何块级元素的宽度或高度时，它应该只确定可见元素本身(内容区域)的宽度或高度，而随后应用填充、边框和边距。在“怪异模式”下，Internet Explorer包括指定宽度或高度内的所有内容、填充和边框。这导致它呈现比符合标准行为的结果更窄或更短的框。如下所示：

了解盒子模型，对于设置元素的外边距、边框、内边距，准确应用高度和宽度的CSS样式，使用JavaScript计算盒子的宽度和高度都有很大的帮助。比如jQuery中提供的outerWidth、innerWidth和Width，可以随时清楚地了解这个值的准确信息，这对计算元素的位置和大小非常有用。在弹出层中的应用，弹出层大小的动态调整，拖动时最大范围边距的计算都很有用。理解一幅画：