编程 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 学习笔记（六）

Dec 31 Javascript

jquery 多行文本框(textarea)高度变化

Jul 03 Javascript

jQuery获取(选中)单选,复选框,下拉框中的值

Feb 21 Javascript

JavaScript获取两个数组交集的方法

Jun 09 Javascript

AngularJS 在同一个界面启动多个ng-app应用模块详解

Dec 20 Javascript

JS实现新建文件夹功能

Jun 17 Javascript

Vue2 Vue-cli中使用Typescript的配置详解

Jul 24 Javascript

无限循环轮播图之运动框架(原生JS实现)

Oct 01 Javascript

React Native基础入门之调试React Native应用的一小步

Jul 02 Javascript

js使用ajax传值给后台,后台返回字符串处理方法

Aug 08 Javascript

JavaScript实现构造json数组的方法分析

Aug 17 Javascript

vue组件定义，全局、局部组件，配合模板及动态组件功能示例

Mar 19 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下将多个数组合并成一个数组的方法与实例代码

2011/02/03 PHP

PHP中new static()与new self()的区别异同分析

2014/08/22 PHP

php实现在线通讯录功能（附源码）

2016/05/13 PHP

基于JQuery模仿苹果桌面的Dock效果(初级版)

2012/10/15 Javascript

在浏览器窗口上添加遮罩层的方法

2012/11/12 Javascript

纯JS实现动态时间显示代码

2014/02/08 Javascript

开源的javascript项目Kissy介绍

2014/11/28 Javascript

chrome不支持form.submit的解决方案

2015/04/28 Javascript

通过点击jqgrid表格弹出需要的表格数据

2015/12/02 Javascript

JavaScript操作HTML DOM节点的基础教程

2016/03/11 Javascript

jQuery事件处理的特征(事件命名机制)

2016/08/23 Javascript

详解javascript事件绑定使用方法

2016/10/20 Javascript

React 使用recharts实现散点地图的示例代码

2018/12/07 Javascript

koa-router路由参数和前端路由的结合详解

2019/05/19 Javascript

解决layer.open弹出框不能获取input框的值为空的问题

2019/09/10 Javascript

Vue中图片Src使用变量的方法

2019/10/30 Javascript

详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程

2020/04/27 Javascript

vue-quill-editor插入图片路径太长问题解决方法

2021/01/08 Vue.js

vue前端和Django后端如何查询一定时间段内的数据

2021/02/28 Vue.js

Python的Bottle框架中实现最基本的get和post的方法的教程

2015/04/30 Python

python中print的不换行即时输出的快速解决方法

2016/07/20 Python

快速查询Python文档方法分享

2017/12/27 Python

Python 正则表达式 re.match/re.search/re.sub的使用解析

2019/07/22 Python

Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息

2020/03/20 Python

Python 多进程、多线程效率对比

2020/11/19 Python

详解css3中的伪类before和after常见用法

2020/11/17 HTML / CSS

CSS3 实现的火焰动画

2020/12/07 HTML / CSS

美国卡车、吉普车和SUV零件网站：4 Wheel Parts

2016/11/24 全球购物

程序员经常用到的UNIX命令

2015/04/13 面试题

会计学自荐信

2014/06/03 职场文书

2014年新教师工作总结

2014/11/08 职场文书

2014年涉外离婚协议书范本

2014/11/20 职场文书

个园导游词

2015/02/04 职场文书

党支部工作总结2015

2015/04/01 职场文书

如何理解Vue简单状态管理之store模式

2021/05/15 Vue.js

使用Oracle跟踪文件的问题详解

2021/06/28 Oracle

JavaScript 盒模型 尺寸深入理解

JavaScript 盒模型尺寸深入理解