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，有了上面那个图，随时都可以很清楚的了解这个值的准确信息，在计算一个元素的位置和尺寸时都很有用处。

在弹出层中的应用，动态调整弹出层尺寸，以及拖拽过程中计算最大范围边距时都有用到。

一张图理解：

jquery-box-size

ECMAScript6的新特性箭头函数（Arrow Function）详细介绍
这篇文章主要介绍了ECMAScript6的新特性箭头函数（Arrow Function）详细介绍,ECMAScript6其实就是JavaScript,它的新特性就是JS的新特性,引入只是时间问题,需要的朋友可以参考下
2014-06-06
浅谈JavaScript数组简介
本文主要是给大家简单介绍了Array的相关基础知识，到这里也算是能对Array有更全面的理解了，希望大家能够喜欢，后续我们将继续介绍关于array的内容。
2021-11-11
javaScript面向对象继承方法经典实现
很多人都说JavaScript不能算是面向对象的变成语言。但是JavaScript的类型非常松散，也没有编译器,但是我们可以模仿着其他语言实现面向对象的方式来实现JavaScript的面向编程
2013-08-08
js中值类型和引用类型的区别介绍
这篇文章介绍了js中值类型和引用类型的区别，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
JavaScript中几个重要的属性(this、constructor、prototype)介绍
this表示当前对象，如果在全局作用范围内使用this，则指代当前页面对象window，prototype本质上还是一个JavaScript对象，constructor始终指向创建当前对象的构造函数
2013-05-05
JS中的this变量的使用介绍
在JavaScript中this变量是一个令人难以摸清的关键字，this可谓是非常强大，在本文将为大家详细介绍下JavaScript中this的使用，感兴趣的朋友可以参考下
2013-10-10
ArrayList类（增强版）
ArrayList类（增强版）...
2007-04-04
对xmlHttp对象的理解
xmlHttp是一套在JavaScript脚本语言中通过Http协议传送或者接收XML及其他数据的API。
2011-01-01
图解prototype、proto和constructor的三角关系
在javascript中，prototype、constructor以及__proto__之间有着“著名”的剪不断理还乱的三角关系，楼主就着自己对它们的浅显认识，来粗略地理理以备忘，有不对之处还望斧正。
2016-07-07
总结javascript三元运算符知识点
这是一篇关于javascript三元运算符的相关基础知识点内容，大家可以学习一下巩固基础知识。
2018-09-09