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

CSS+Table图文混排中实现文本自适应图片宽度（超简单+跨所有浏览器）

Feb 14 Javascript

yepnope.js 异步加载资源文件

Sep 08 Javascript

input标签内容改变的触发事件介绍

Jun 18 Javascript

有关jquery与DOM节点操作方法和属性记录

Apr 15 Javascript

AngularJS模块详解及示例代码

Aug 17 Javascript

AngularJS指令中的绑定策略实例分析

Dec 14 Javascript

jQuery密码强度验证控件使用详解

Jan 05 Javascript

js如何编写简单的ajax方法库

Aug 02 Javascript

浅谈Vue.js 组件中的v-on绑定自定义事件理解

Nov 17 Javascript

ES6下子组件调用父组件的方法(推荐)

Feb 23 Javascript

js实现简单页面全屏

Sep 17 Javascript

OpenLayers3实现测量功能

Sep 25 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

咖啡机如何保养和日常清洁？

2021/03/03 冲泡冲煮

PHP4(windows版本)中的COM函数

2006/10/09 PHP

PHP 过滤页面中的BOM(实现代码)

2013/06/29 PHP

简单的php新闻发布系统教程

2014/05/09 PHP

PHP生成图片缩略图类示例

2017/01/12 PHP

php实现数组纵向转横向并过滤重复值的方法分析

2017/05/29 PHP

PHP手机号码及邮箱正则表达式实例解析

2020/07/11 PHP

jQuery 各种浏览器下获得日期区别

2008/12/22 Javascript

jquery表格内容筛选实现思路及代码

2013/04/16 Javascript

关闭时刷新父窗口两种方法

2014/05/07 Javascript

node.js中的fs.appendFile方法使用说明

2014/12/17 Javascript

javascript定义变量时加var与不加var的区别

2014/12/22 Javascript

JavaScript判断按钮被点击的方法

2015/12/13 Javascript

IScroll5 中文API参数说明和调用方法

2016/05/21 Javascript

第五篇Bootstrap 排版

2016/06/21 Javascript

JS简单判断滚动条的滚动方向实现方法

2017/04/28 Javascript

Angular如何引入第三方库的方法详解

2017/07/13 Javascript

Vue中的v-for指令不起效果的解决方法

2018/09/27 Javascript

PyCharm使用教程之搭建Python开发环境

2016/06/07 Python

python制作小说爬虫实录

2017/08/14 Python

利用python将图片版PDF转文字版PDF

2019/05/03 Python

python TK库简单应用（实时显示子进程输出）

2019/10/29 Python

keras实现多GPU或指定GPU的使用介绍

2020/06/17 Python

15个应该掌握的Jupyter Notebook使用技巧(小结)

2020/09/23 Python

CSS3实现点击放大的动画实例代码

2017/02/27 HTML / CSS

纯CSS3实现圆圈动态发光特效动画的示例代码

2021/03/08 HTML / CSS

璀璨的珍珠、密钉和个性化珠宝：Lily & Roo

2021/01/21 全球购物

财务会计人员求职的自我评价

2014/01/13 职场文书

市场营销专业大学生职业生涯规划文

2014/03/06 职场文书

2014年两会学习心得体会

2014/03/17 职场文书

乡村文明行动实施方案

2014/03/29 职场文书

岗位标兵事迹材料

2014/05/17 职场文书

革命英雄事迹演讲稿

2014/09/13 职场文书

2014年信息宣传工作总结

2014/12/18 职场文书

2015国庆节感想

2015/08/04 职场文书

Mysql排序的特性详情

2021/11/01 MySQL

JavaScript 盒模型 尺寸深入理解

JavaScript 盒模型尺寸深入理解