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

javascript实现焦点滚动图效果具体方法

Jun 24 Javascript

jQuery实现移动和渐变特效的点击事件

Feb 26 Javascript

Javascript中replace()小结

Sep 30 Javascript

总结javascript中的六种迭代器

Aug 16 Javascript

微信小程序生命周期详解

Oct 27 Javascript

Angular2入门教程之模块和组件详解

May 28 Javascript

extjs简介_动力节点Java学院整理

Jul 17 Javascript

jQuery实现动态显示select下拉列表数据的方法

Feb 05 jQuery

JQuery选中select组件被选中的值方法

Mar 08 jQuery

vue注册组件的几种方式总结

Mar 08 Javascript

微信小程序修改swiper默认指示器样式的实例代码

Jul 18 Javascript

angular5 子组件监听父组件传入值的变化方法

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

PHP调用三种数据库的方法(1)

2006/10/09 PHP

PHP中去掉字符串首尾空格的方法

2012/05/19 PHP

基于initPHP的框架介绍

2013/04/18 PHP

解析dedeCMS验证码的实现代码

2013/06/07 PHP

JS之小练习代码

2008/10/12 Javascript

jQuery中bind()方法用法实例

2015/01/19 Javascript

浅谈JavaScript字符串与数组

2015/06/03 Javascript

jQuery里filter()函数与find()函数用法分析

2015/06/24 Javascript

JS实现具备延时功能的滑动门菜单效果

2015/09/17 Javascript

基于JS实现密码框(password)中显示文字提示功能代码

2016/05/27 Javascript

js前端实现多图图片上传预览的两个方法(推荐)

2016/11/18 Javascript

js select下拉联动更具级联性!

2020/04/17 Javascript

vue-loader教程介绍

2017/06/14 Javascript

详解vue-router2.0动态路由获取参数

2017/06/14 Javascript

Vue组件化通讯的实例代码

2017/06/23 Javascript

js动态获取时间的方法分析

2019/08/02 Javascript

vue 实现websocket发送消息并实时接收消息

2019/12/09 Javascript

vue cli3.0打包上线静态资源找不到路径的解决操作

2020/08/03 Javascript

js实现鼠标点击飘爱心效果

2020/08/19 Javascript

vue-admin-template配置快捷导航的代码（标签导航栏）

2020/09/04 Javascript

[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路

2018/04/07 DOTA

在Django的模型和公用函数中使用惰性翻译对象

2015/07/27 Python

详解Python读取yaml文件多层菜单

2019/03/23 Python

python django中8000端口被占用的解决

2019/12/17 Python

python实现多进程按序号批量修改文件名的方法示例

2019/12/30 Python

Python实现加密的RAR文件解压的方法（密码已知）

2020/09/11 Python

pymysql模块使用简介与示例

2020/11/17 Python

ebookers英国：隶属全球最大的在线旅游公司Expedia

2017/12/28 全球购物

俄罗斯园林植物网上商店：Garshinka

2020/07/16 全球购物

小学老师寄语大全

2014/04/04 职场文书

旅游活动总结

2014/08/27 职场文书

中层领导干部群众路线对照检查材料思想汇报

2014/10/02 职场文书

趣味运动会新闻稿

2015/07/17 职场文书

家长会后的感想

2015/08/11 职场文书

只用20行Python代码实现屏幕录制功能

2021/06/02 Python

详解Redis在SpringBoot工程中的综合应用

2021/10/16 Redis

JavaScript 盒模型 尺寸深入理解

JavaScript 盒模型尺寸深入理解