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

广告切换效果(缓动切换)

May 27 Javascript

javaScript 动态访问JSon元素示例代码

Aug 30 Javascript

实现placeholder效果的方案汇总

Jun 11 Javascript

jquery easyui datagrid实现增加，修改，删除方法总结

May 25 Javascript

js当前页面登录注册框,固定div,底层阴影的实例代码

Oct 04 Javascript

深入理解ES7的async/await的用法

Sep 09 Javascript

微信小程序 POST请求的实例详解

Sep 29 Javascript

vue.js 实现点击按钮动态添加li的方法

Sep 07 Javascript

基于node简单实现RSA加解密的方法步骤

Mar 21 Javascript

js实现聊天对话框

Feb 08 Javascript

解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题

Jul 22 Javascript

JS前端可视化canvas动画原理及其推导实现

Aug 05 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

jQuery+PHP+ajax实现微博加载更多内容列表功能

2014/06/27 PHP

PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面

2016/03/21 PHP

thinkphp框架类库扩展操作示例

2019/11/26 PHP

Javascript MD4

2006/12/20 Javascript

javascript获取当前ip的代码

2009/05/10 Javascript

鼠标经过的文本框textbox变色

2009/05/21 Javascript

JS实现标签页效果(配合css)

2013/04/03 Javascript

jquery组件使用中遇到的问题整理及解决

2014/02/21 Javascript

jquery通过select列表选择框对表格数据进行过滤示例

2014/05/07 Javascript

jQuery 计算iframe 窗口大小的方法

2014/05/13 Javascript

Javascript 是你的高阶函数(高级应用)

2015/06/15 Javascript

对jQuary选择器的全面总结

2016/06/20 Javascript

JavaScript实现页面定时刷新（定时器，meta）

2016/10/12 Javascript

jQuery除指定区域外点击任何地方隐藏DIV功能

2017/11/13 jQuery

微信小程序模板和模块化用法实例分析

2017/11/28 Javascript

select获取下拉框的值下拉框默认选中方法

2018/02/28 Javascript

基于vue--key值的特殊用处详解

2020/07/31 Javascript

Nest.js环境变量配置与序列化详解

2021/02/21 Javascript

[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16

2018/08/17 DOTA

python生成验证码图片代码分享

2016/01/28 Python

Python数据类型详解（一）字符串

2016/05/08 Python

Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例

2018/01/29 Python

python 检查文件mime类型的方法

2018/12/08 Python

如何用C代码给Python写扩展库(Cython)

2019/05/17 Python

python对绑定事件的鼠标、按键的判断实例

2019/07/17 Python

Django1.11配合uni-app发起微信支付的实现

2019/10/12 Python

Python使用qrcode二维码库生成二维码方法详解

2020/02/17 Python

Python 实现二叉查找树的示例代码

2020/12/21 Python

物业经理求职自我评价

2013/09/22 职场文书

本科生导师推荐信范文

2014/05/18 职场文书

清明节扫墓活动总结

2015/02/09 职场文书

贷款工作证明模板

2015/06/12 职场文书

2015年秋季开学典礼校长致辞

2015/07/16 职场文书

因个人工作失误检讨书

2019/06/21 职场文书

十大必看国产动漫排名，魁拔上线，第二曾在日本播出

2022/03/18 国漫

Python使用socket去实现TCP客户端和TCP服务端

2022/04/12 Python

JavaScript 盒模型 尺寸深入理解

JavaScript 盒模型尺寸深入理解