编程 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 相关文章推荐

新浪中用来显示flash的函数

Apr 02 Javascript

Javascript 写的简单进度条控件

Jan 22 Javascript

在新窗口打开超链接的方法小结

Apr 14 Javascript

JS版元素周期表实现方法

Aug 05 Javascript

纯javascript实现分页(两种方法)

Aug 26 Javascript

jQuery常见的选择器及用法介绍

Dec 20 Javascript

JavaScript贪吃蛇小组件实例代码

Aug 20 Javascript

自制简易打赏功能的实例

Sep 02 Javascript

Vue + Vue-router 同名路由切换数据不更新的方法

Nov 20 Javascript

angularJs利用$scope处理升降序的方法

Oct 08 Javascript

js实现无限瀑布流实例方法

Sep 16 Javascript

在react中使用vue的状态管理的方法示例

May 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

You might like

基于mysql的bbs设计（二）

2006/10/09 PHP

php 强制下载文件实现代码

2013/10/28 PHP

ThinkPHP处理Ajax返回的方法

2014/11/22 PHP

php如何利用pecl安装mongodb扩展详解

2019/01/09 PHP

PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】

2019/03/27 PHP

jQuery EasyUI API 中文文档 - Spinner微调器使用

2011/10/21 Javascript

javascript+canvas制作九宫格小程序

2014/12/28 Javascript

JavaScript中的fontsize()方法使用详解

2015/06/08 Javascript

javascript随机抽取0-100之间不重复的10个数

2016/02/25 Javascript

使用NodeJs 开发微信公众号（三)微信事件交互实例

2016/03/02 NodeJs

对Angular.js Controller如何进行单元测试

2016/10/25 Javascript

解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题

2017/03/09 Javascript

vue.js项目nginx部署教程

2018/04/05 Javascript

Koa2微信公众号开发之本地开发调试环境搭建

2018/05/16 Javascript

微信小程序实现图片上传功能

2018/05/28 Javascript

微信小程序实现留言板（Storage）

2018/11/02 Javascript

Vue实现购物车的全选、单选、显示商品价格代码实例

2019/05/06 Javascript

微信小程序自定义底部弹出框功能

2020/11/18 Javascript

Python算法应用实战之队列详解

2017/02/04 Python

python实现八大排序算法（2）

2017/09/14 Python

Pandas之drop_duplicates:去除重复项方法

2018/04/18 Python

不到20行代码用Python做一个智能聊天机器人

2019/04/19 Python

python监控nginx端口和进程状态

2019/09/06 Python

Django中的FBV和CBV用法详解

2019/09/15 Python

Python字典底层实现原理详解

2019/12/18 Python

使用Python来做一个屏幕录制工具的操作代码

2020/01/18 Python

Python判断远程服务器上Excel文件是否被人打开的方法

2020/07/13 Python

Node.js 和 Python之间该选择哪个？

2020/08/05 Python

python中random.randint和random.randrange的区别详解

2020/09/20 Python

纽约的奢华内衣店：Journelle

2016/07/29 全球购物

Linux上比较文件的命令都有哪些

2013/09/28 面试题

土地转让协议书范本

2014/04/15 职场文书

给校长的建议书200字

2014/05/16 职场文书

卖房授权委托书样本

2014/10/05 职场文书

2014年音乐教师工作总结

2014/12/03 职场文书

2014年高二班主任工作总结

2014/12/16 职场文书

JavaScript 盒模型 尺寸深入理解

JavaScript 盒模型尺寸深入理解