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

aspx中利用js实现确认删除代码

Jul 22 Javascript

jQuery基于当前元素进行下一步的遍历

May 20 Javascript

分享两段简单的JS代码防止SQL注入

Apr 12 Javascript

浅谈String.valueOf()方法的使用

Jun 06 Javascript

AngularJS基础 ng-model-options 指令简单示例

Aug 02 Javascript

Angular自定义组件实现数据双向数据绑定的实例

Dec 11 Javascript

Vue2.0 给Tab标签页和页面切换过渡添加样式的方法

Mar 13 Javascript

JS遍历DOM文档树的方法实例详解

Apr 03 Javascript

Node错误处理笔记之挖坑系列教程

Jun 05 Javascript

layui实现左侧菜单点击右侧内容区显示

Jul 26 Javascript

细说webpack6 Babel的使用详解

Sep 26 Javascript

angular组件间通讯的实现方法示例

May 07 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操作Access类(PHP+ODBC+Access)

2007/01/02 PHP

ThinkPHP自动完成中使用函数与回调方法实例

2014/11/29 PHP

php获得客户端浏览器名称及版本的方法(基于ECShop函数)

2015/12/23 PHP

浅谈php中的访问修饰符private、protected、public的作用范围

2016/11/20 PHP

小型js框架veryide.librar源代码

2009/03/05 Javascript

JQuery.closest(),parent(),parents()寻找父结点

2012/02/17 Javascript

js通过地址栏给action传值(中文乱码全是问号)

2013/05/02 Javascript

JS实现图片放大镜效果的方法

2015/02/27 Javascript

jquery代码实现简单的随机图片瀑布流效果

2015/04/20 Javascript

用JavaScript显示浏览器客户端信息的超相近教程

2015/06/18 Javascript

基于Jquery实现表单验证

2020/07/20 Javascript

Node.js实用代码段之正确拼接Buffer

2016/03/17 Javascript

JavaScript数组去重由慢到快由繁到简(优化篇)

2016/08/26 Javascript

JavaScript算法教程之sku（库存量单位）详解

2017/06/29 Javascript

Vue render深入开发讲解

2018/04/13 Javascript

Vue实现点击时间获取时间段查询功能

2020/08/21 Javascript

微信小程序可滑动月日历组件使用详解

2019/10/21 Javascript

js实现滑动进度条效果

2020/08/21 Javascript

使用Python的urllib2模块处理url和图片的技巧两则

2016/02/18 Python

详解使用 pyenv 管理多个版本 python 环境

2017/10/19 Python

Django中ORM外键和表的关系详解

2019/05/20 Python

python 消除 futureWarning问题的解决

2019/12/25 Python

python3正则模块re的使用方法详解

2020/02/11 Python

Python利用PyPDF2库获取PDF文件总页码实例

2020/04/03 Python

OLEDBConnection和SQLConnection有什么区别

2013/05/31 面试题

最新远光软件笔试题面试题内容

2013/11/08 面试题

旅游与酒店管理的自我评价分享

2013/11/03 职场文书

酒店总经理助理岗位职责

2014/02/01 职场文书

深入开展党的群众路线教育实践活动方案

2014/02/04 职场文书

《狼》教学反思

2014/03/02 职场文书

2014年作风建设工作总结

2014/10/29 职场文书

2014年社区工作总结

2014/11/18 职场文书

教师个人事迹材料

2014/12/17 职场文书

无婚姻登记记录证明

2015/06/18 职场文书

OpenCV实现常见的四种图像几何变换

2022/04/01 Python

PostgreSQL逻辑复制解密原理解析

2022/09/23 PostgreSQL

JavaScript 盒模型 尺寸深入理解

JavaScript 盒模型尺寸深入理解