编程 Javascript

JavaScript 盒模型尺寸深入理解

Posted in Javascript onDecember 31, 2012

概念

引自维基百科：根据由万维网联盟（W3C）于1996年发行并于1999年修订的CSS1所指定的，当任意一个块级元素的宽度或高度被显式指定，它应当只确定这个可见元素自身(内容区)的宽度或高度，而padding, border和margin随后被应用。Internet Explorer在“怪异模式” 则把内容，内边距（padding）和边框（border）全部包括在一个指定的宽度或高度之内；这导致它呈现出一个比遵从标准行为的结果更窄或者更短的盒子。如下图：

应用

理解盒模型，不管是对于设置一个元素外边据、边框、内边距，高宽CSS样式的准确应用，还是对于使用JavaScript去计算盒子的宽度、高度都有很大的帮助。比方说jQuery中提供的outerWidth，innerWidth，width，有了上面那个图，随时都可以很清楚的了解这个值的准确信息，在计算一个元素的位置和尺寸时都很有用处。

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

一张图理解：

JavaScript 盒模型尺寸深入理解

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

基于jquery的划词搜索实现（备忘）

Sep 14 Javascript

javascript之bind使用介绍

Oct 09 Javascript

javascript从右边截取指定字符串的三种实现方法

Nov 29 Javascript

JS如何将数字类型转化为没3个一个逗号的金钱格式

Jan 27 Javascript

javascript实现2048游戏示例

May 04 Javascript

jquery 键盘事件的使用方法详解

Sep 13 jQuery

封装运动框架实战左右与上下滑动的焦点轮播图(实例)

Oct 17 Javascript

详解写好JS条件语句的5条守则

Feb 28 Javascript

JS实现给数组对象排序的方法分析

Jun 24 Javascript

js获取 gif 的帧数的代码实例

Sep 10 Javascript

vue.js中使用微信扫一扫解决invalid signature问题(完美解决)

Apr 11 Javascript

vue cli 3.0通用打包配置代码,不分一二级目录

Sep 02 Javascript

如何制作浮动广告 JavaScript制作浮动广告代码

Dec 30 #Javascript

JavaScript 在网页上单击鼠标的地方显示层及关闭层

Dec 30 #Javascript

javascript中的缓动效果实现程序

Dec 29 #Javascript

通过正则格式化url查询字符串实现代码

Dec 28 #Javascript

Js数组的操作push,pop,shift,unshift等方法详细介绍

Dec 28 #Javascript

载入jQuery库的最佳方法详细说明及实现代码

Dec 28 #Javascript

一个背景云变换js特效鼠标移动背景云变化

Dec 28 #Javascript

JavaScript 盒模型 尺寸深入理解

JavaScript 盒模型尺寸深入理解