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

用Mootools获得操作索引的两种方法分享

Dec 12 Javascript

js返回上一页并刷新代码整理

Dec 21 Javascript

在JavaScript并非所有的一切都是对象

Apr 11 Javascript

在jQuery中常用的选择器介绍

Apr 16 Javascript

jquery禁用右键示例

Apr 28 Javascript

jQuery实现复选框成对选择及对应取消的方法

Mar 03 Javascript

JS+CSS实现的拖动分页效果实例

May 11 Javascript

js中substr,substring,indexOf,lastIndexOf，split，replace的用法详解

Nov 09 Javascript

javascirpt实现2个iframe之间传值的方法

Jun 30 Javascript

前端axios下载excel文件(二进制)的处理方法

Jul 31 Javascript

解决vue的touchStart事件及click事件冲突问题

Jul 21 Javascript

图解JS原型和原型链实现原理

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

弄了个检测传输的参数是否为数字的Function

2006/12/06 PHP

php cli 方式在crotab中运行解决

2010/02/08 PHP

Yii使用CLinkPager分页实例详解

2014/07/23 PHP

jQuery学习2 选择器的使用说明

2010/02/07 Javascript

javascript中的取反再取反~~没有意义

2014/04/06 Javascript

JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)

2015/12/13 Javascript

通过BootStrap实现轮播图的实际应用

2016/09/26 Javascript

jQuery 的 ready()的纯js替代方法

2016/11/20 Javascript

js date 格式化

2017/02/15 Javascript

你可能不知道的JSON.stringify()详解

2017/08/17 Javascript

[js高手之路]原型式继承与寄生式继承详解

2017/08/28 Javascript

JavaScript 对引擎、运行时、调用堆栈的概述理解

2018/10/22 Javascript

详细分析Node.js 多进程

2020/06/22 Javascript

Vue 解决通过this.$refs来获取DOM或者组件报错问题

2020/07/28 Javascript

用python实现简单EXCEL数据统计的实例

2017/01/24 Python

Python编程实现的图片识别功能示例

2017/08/03 Python

python中子类调用父类函数的方法示例

2017/08/18 Python

Python机器学习之scikit-learn库中KNN算法的封装与使用方法

2018/12/14 Python

pandas 数据索引与选取的实现方法

2019/06/21 Python

python中有关时间日期格式转换问题

2019/12/25 Python

python实现百度OCR图片识别过程解析

2020/01/17 Python

CSS3制作气泡对话框的实例教程

2016/05/10 HTML / CSS

深入了解canvas在移动端绘制模糊的问题解决

2019/04/30 HTML / CSS

在线服装零售商：SheIn

2016/07/22 全球购物

纽约的奢华内衣店：Journelle

2016/07/29 全球购物

中邮全球便购：中国邮政速递物流

2017/03/04 全球购物

澳洲国民品牌乡村路折扣店：Country Road & Trenery Outlet

2018/04/19 全球购物

美国最大的半成品净菜电商：Blue Apron（蓝围裙）

2018/04/27 全球购物

描述JSP和Servlet的区别、共同点、各自应用的范围

2012/10/02 面试题

美术专业个人自我评价

2014/01/18 职场文书

九年级物理教学反思

2014/01/29 职场文书

《乌塔》教学反思

2014/02/17 职场文书

2015年考研复习计划

2015/01/19 职场文书

2015年党员干部承诺书

2015/01/21 职场文书

超市员工辞职信范文

2015/05/12 职场文书

民事辩护词范文

2015/05/21 职场文书

JavaScript 盒模型 尺寸深入理解

JavaScript 盒模型尺寸深入理解