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

5个javascript的数字格式化函数分享

Dec 07 Javascript

JavaScript控制Session操作方法

Jan 17 Javascript

js库Modernizr的介绍和使用

May 07 Javascript

js中javascript:void(0) 真正含义

Nov 05 Javascript

js基于cookie方式记住返回页面用法示例

May 27 Javascript

jQuery中deferred对象使用方法详解

Jul 14 Javascript

canvas 画布在主流浏览器中的尺寸限制详细介绍

Dec 15 Javascript

JavaScript简单计算人的年龄示例

Apr 15 Javascript

VUE axios上传图片到七牛的实例代码

Jul 28 Javascript

react项目如何使用iconfont的方法步骤

Mar 13 Javascript

angular组件间传值测试的方法详解

May 07 Javascript

react如何快速设置文件路径别名

Apr 28 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

提示Trying to clone an uncloneable object of class Imagic的解决

2011/10/27 PHP

ThinkPHP字符串函数及常用函数汇总

2014/07/18 PHP

为你的 Laravel 验证器加上多验证场景的实现

2020/04/07 PHP

自写的一个jQuery圆角插件

2010/10/26 Javascript

poshytip 基于jquery的插件主要用于显示微博人的图像和鼠标提示等

2012/10/12 Javascript

js操作滚动条事件实例

2015/01/29 Javascript

纯JavaScript代码实现移动设备绘图解锁

2015/10/16 Javascript

jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果

2015/10/28 Javascript

checkbox 选中一个另一个checkbox也会选中的实现代码

2016/07/09 Javascript

bootstrapValidator自定验证方法写法

2016/12/01 Javascript

javascript中的try catch异常捕获机制用法分析

2016/12/14 Javascript

EasyUI折叠表格层次显示detailview详解及实例

2016/12/28 Javascript

jquery.zclip轻量级复制失效问题

2017/01/08 Javascript

React利用插件和不用插件实现双向绑定的方法详解

2017/07/03 Javascript

vue环境搭建简单教程

2017/11/07 Javascript

fetch 如何实现请求数据

2018/12/20 Javascript

Python Tkinter基础控件用法

2014/09/03 Python

Python简单计算文件夹大小的方法

2015/07/14 Python

Python爬豆瓣电影实例

2018/02/23 Python

浅谈Python脚本开头及导包注释自动添加方法

2018/10/27 Python

django最快程序开发流程详解

2019/07/19 Python

python输出第n个默尼森数的实现示例

2020/03/08 Python

浅析pip安装第三方库及pycharm中导入第三方库的问题

2020/03/10 Python

使用Html5多媒体实现微信语音功能

2019/07/26 HTML / CSS

Lookfantastic瑞典：英国知名美妆购物网站

2018/04/06 全球购物

网游商务专员求职信

2013/10/15 职场文书

临床医学专业毕业生的自我评价

2013/10/17 职场文书

大课间活动制度

2014/01/18 职场文书

见习期自我鉴定

2014/01/31 职场文书

财经学院自荐信范文

2014/02/02 职场文书

《梅花魂》教学反思

2014/04/30 职场文书

心理学专业求职信

2014/06/16 职场文书

教师自我剖析材料（四风问题）

2014/09/30 职场文书

2014年财政工作总结

2014/12/10 职场文书

2016简历自荐信优秀范文

2016/01/29 职场文书

《悲惨世界》：比天空更广阔的是人的心灵

2020/01/16 职场文书

JavaScript 盒模型 尺寸深入理解

JavaScript 盒模型尺寸深入理解