编程 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 常见开发使用技巧总结

Dec 26 Javascript

JS中Iframe之间传值及子页面与父页面应用

Mar 11 Javascript

图片上传插件jquery.uploadify详解

Nov 15 Javascript

解析URI与URL之间的区别与联系

Nov 22 Javascript

jquery设置按钮停顿3秒不可用

Mar 07 Javascript

使用jQuery判断IE浏览器版本的代码

Jun 14 Javascript

jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码

Aug 24 Javascript

JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案

Jul 27 Javascript

jQuery中的select操作详解

Nov 29 Javascript

jquery,js简单实现类似Angular.js双向绑定

Jan 13 Javascript

详解通过JSON数据使用VUE.JS

May 26 Javascript

微信小程序实现页面下拉刷新和上拉加载功能详解

Dec 03 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

apache2.2.4+mysql5.0.77+php5.2.8安装精简

2009/04/29 PHP

php中将数组转成字符串并保存到数据库中的函数代码

2013/09/29 PHP

php实现监听事件

2013/11/06 PHP

[原创]php实现 data url的图片生成与保存

2016/12/04 PHP

Jquery 学习笔记（一）

2009/10/13 Javascript

jquery.validate使用攻略第一部

2010/07/01 Javascript

JQuery与JSon实现的无刷新分页代码

2011/09/13 Javascript

将中国标准时间转换成标准格式的代码

2014/03/20 Javascript

js实现的类似于asp数据字典的数据类型代码实例

2014/09/03 Javascript

JavaScript中Window对象的属性及事件

2015/12/25 Javascript

jquery.Jcrop结合JAVA后台实现图片裁剪上传实例

2016/11/05 Javascript

Bootstrop实现多级下拉菜单功能

2016/11/24 Javascript

AngularJS路由实现页面跳转实例

2017/03/03 Javascript

微信小程序共用变量值的实现

2017/07/12 Javascript

VueJs监听window.resize方法示例

2018/01/17 Javascript

JavaScript React如何修改默认端口号方法详解

2020/07/28 Javascript

OpenLayers3实现鼠标移动显示坐标

2020/09/25 Javascript

vue3 watch和watchEffect的使用以及有哪些区别

2021/01/26 Vue.js

python批量导出导入MySQL用户的方法

2013/11/15 Python

Python列表计数及插入实例

2014/12/17 Python

Python扫描IP段查看指定端口是否开放的方法

2015/06/09 Python

举例讲解Django中数据模型访问外键值的方法

2015/07/21 Python

详解Python的Django框架中manage命令的使用与扩展

2016/04/11 Python

Python设置默认编码为utf8的方法

2016/07/01 Python

python3+PyQt5实现文档打印功能

2018/04/24 Python

Python常用特殊方法实例总结

2019/03/22 Python

Python Pickle 实现在同一个文件中序列化多个对象

2019/12/30 Python

Python实现桌面翻译工具【新手必学】

2020/02/12 Python

python进行二次方程式计算的实例讲解

2020/12/06 Python

美国零售商店：Blue&Cream

2017/04/07 全球购物

韩国江南富人区高端时尚百货商场：Galleria（格乐丽雅）

2018/03/27 全球购物

暑期实习鉴定

2013/12/16 职场文书

自荐信需注意事项

2014/01/25 职场文书

八项规定对照检查材料

2014/08/31 职场文书

和谐拯救危机观后感

2015/06/15 职场文书

JavaScript 盒模型 尺寸深入理解

JavaScript 盒模型尺寸深入理解