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 相关文章推荐
5个javascript的数字格式化函数分享
Dec 07 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
js中javascript:void(0) 真正含义
Nov 05 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
react如何快速设置文件路径别名
Apr 28 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
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
自写的一个jQuery圆角插件
2010/10/26 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
Python Tkinter基础控件用法
2014/09/03 Python
Python简单计算文件夹大小的方法
2015/07/14 Python
Python爬豆瓣电影实例
2018/02/23 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
django最快程序开发流程详解
2019/07/19 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
网游商务专员求职信
2013/10/15 职场文书
临床医学专业毕业生的自我评价
2013/10/17 职场文书
大课间活动制度
2014/01/18 职场文书
见习期自我鉴定
2014/01/31 职场文书
财经学院自荐信范文
2014/02/02 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
心理学专业求职信
2014/06/16 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
2014年财政工作总结
2014/12/10 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书