编程 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 multiSelect 多选下拉框

Jul 09 Javascript

dess中一个简单的多路委托的实现

Jul 20 Javascript

Microsfot .NET Framework4.0框架安装失败的解决方法

Aug 14 Javascript

JavaScript闭包函数访问外部变量的方法

Aug 27 Javascript

javascript计时器详解

Feb 28 Javascript

表单中单选框添加选项和移除选项

Jul 04 Javascript

vue.js的提示组件

Mar 02 Javascript

jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】

Mar 09 Javascript

angularjs中回车键触发某一事件的方法

Apr 24 Javascript

JavaScript数组的5种迭代方法

Sep 29 Javascript

jQuery实现的粘性滚动导航栏效果实例【附源码下载】

Oct 19 jQuery

使用vuex缓存数据并优化自己的vuex-cache

May 30 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

You might like

不用数据库的多用户文件自由上传投票系统(1)

2006/10/09 PHP

php xml实例留言本

2009/03/20 PHP

PHP mb_convert_encoding 获取字符串编码类型实现代码

2009/04/26 PHP

DOM XPATH获取img src值的query

2013/09/23 PHP

PHP中preg_match函数正则匹配的字符串长度问题

2015/05/27 PHP

PHP正则匹配到2个字符串之间的内容方法

2018/12/24 PHP

Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)

2010/06/11 Javascript

通过Jscript中@cc_on 语句识别IE浏览器及版本的代码

2011/05/07 Javascript

浅析onsubmit校验表单时利用ajax的return false无效问题

2013/07/10 Javascript

通过一段代码简单说js中的this的使用

2013/07/23 Javascript

js判断当页面无法回退时关闭网页否则就history.go(-1)

2014/08/07 Javascript

JavaScript中提前声明变量或函数例子

2014/11/12 Javascript

JavaScript针对网页节点的增删改查用法实例

2015/02/02 Javascript

php利用curl获取远程图片实现方法

2015/10/26 Javascript

jquery输入数字随机抽奖特效的简单实现代码

2016/06/10 Javascript

jQuery实现表格与ckeckbox的全选与单选功能

2016/11/24 Javascript

Bootstrap Table使用整理(五)之分页组合查询

2017/06/09 Javascript

使用AngularJS对表单提交内容进行验证的操作方法

2017/07/12 Javascript

JQuery判断正整数整理小结

2017/08/21 jQuery

jQuery的ztree仿windows文件新建和拖拽功能的实现代码

2018/12/05 jQuery

微信小程序实现单选选项卡切换效果

2020/06/19 Javascript

SpringBoot+Vue 前后端合并部署的配置方法

2020/12/30 Vue.js

python遍历序列enumerate函数浅析

2017/10/17 Python

PyQt5实现无边框窗口的标题拖动和窗口缩放

2018/04/19 Python

numpy添加新的维度:newaxis的方法

2018/08/02 Python

python 实现返回一个列表中出现次数最多的元素方法

2019/06/11 Python

python打开文件的方式有哪些

2020/06/29 Python

Python JSON常用编解码方法代码实例

2020/09/05 Python

推荐信格式范文

2014/05/09 职场文书

社区科普工作方案

2014/06/03 职场文书

部门2014年度工作总结

2014/11/12 职场文书

2014年保卫部工作总结

2014/11/21 职场文书

餐厅收银员岗位职责

2015/04/07 职场文书

2016年乡镇综治宣传月活动总结

2016/03/16 职场文书

JavaScript+HTML实现学生信息管理系统

2021/04/20 Javascript

使用python绘制分组对比柱状图

2022/04/21 Python

JavaScript 盒模型 尺寸深入理解

JavaScript 盒模型尺寸深入理解