JavaScript 盒模型 尺寸深入理解


Posted in Javascript onDecember 31, 2012

概念

引自维基百科:根据由万维网联盟(W3C)于1996年发行并于1999年修订的CSS1所指定的,当任意一个块级元素的宽度或高度被显式指定,它应当只确定这个可见元素自身(内容区)的宽度或高度,而padding, border和margin随后被应用。Internet Explorer在“怪异模式” 则把内容,内边距(padding)和边框(border)全部包括在一个指定的宽度或高度之内;这导致它呈现出一个比遵从标准行为的结果更窄或者更短的盒子。如下图:

JavaScript 盒模型 尺寸深入理解

应用

理解盒模型,不管是对于设置一个元素外边据、边框、内边距,高宽CSS样式的准确应用,还是对于使用JavaScript去计算盒子的宽度、高度都有很大的帮助。比方说jQuery中提供的outerWidth,innerWidth,width,有了上面那个图,随时都可以很清楚的了解这个值的准确信息,在计算一个元素的位置和尺寸时都很有用处。

在弹出层中的应用,动态调整弹出层尺寸,以及拖拽过程中计算最大范围边距时都有用到。

一张图理解

JavaScript 盒模型 尺寸深入理解

Javascript 相关文章推荐
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
javascript之bind使用介绍
Oct 09 Javascript
javascript从右边截取指定字符串的三种实现方法
Nov 29 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
javascript实现2048游戏示例
May 04 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
js获取 gif 的帧数的代码实例
Sep 10 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 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
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
json简单介绍
2008/06/10 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
深入了解js原型模式
2019/05/30 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
python圣诞树编写实例详解
2020/02/13 Python
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
大专学生推荐信范文
2013/11/19 职场文书
就业自荐信
2013/12/04 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
保证书格式范文
2014/04/28 职场文书
护校行动方案
2014/05/31 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书