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

jQuery.prototype.init选择器构造函数源码思路分析

Feb 05 Javascript

javascript面向对象之定义成员方法实例分析

Jan 13 Javascript

干货分享：让你分分钟学会javascript闭包

Dec 25 Javascript

javascript 广告移动特效的实现代码

Jun 25 Javascript

Angular2 环境配置详细介绍

Sep 21 Javascript

详谈JS中数组的迭代方法和归并方法

Aug 11 Javascript

把vue-router和express项目部署到服务器的方法

Feb 21 Javascript

Vue2.0学习系列之项目上线的方法步骤(图文)

Sep 25 Javascript

Vue 实时监听窗口变化 windowresize的两种方法

Nov 06 Javascript

微信小程序如何利用getCurrentPages进行页面传值

Jul 01 Javascript

Vue 利用指令实现禁止反复发送请求的两种方法

Sep 15 Javascript

vue中父子组件的参数传递和应用示例

Jan 04 Vue.js

如何制作浮动广告 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

js下函数般调用正则的方法附代码

2008/06/22 PHP

PHP中如何判断AJAX提交的数据

2012/02/05 PHP

php简单实现查询数据库返回json数据

2015/04/16 PHP

原生JS实现Ajax通过POST方式与PHP进行交互的方法示例

2018/05/12 PHP

JavaScript Base64编码和解码，实现URL参数传递。

2006/09/18 Javascript

js form action动态修改方法

2008/11/04 Javascript

让FireFox支持innerText的实现代码

2009/12/01 Javascript

详解jQuery插件开发中的extend方法

2013/11/19 Javascript

jQuery中用dom操作替代正则表达式

2014/12/29 Javascript

JS选项卡动态替换banner图片路径的方法

2015/05/11 Javascript

用JS实现轮播图效果（二）

2016/06/26 Javascript

微信小程序保留小数(toFixed)详细介绍

2016/11/16 Javascript

JavaScript中Array对象用法实例总结

2016/11/29 Javascript

基于jQuery实现一个marquee无缝滚动的插件

2017/03/09 Javascript

bootstrap实现的自适应页面简单应用示例

2017/03/09 Javascript

vue之组件内监控$store中定义变量的变化详解

2019/11/08 Javascript

js事件机制----捕获与冒泡机制实例分析

2020/05/22 Javascript

node.js如何根据URL返回指定的图片详解

2020/10/21 Javascript

[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家

2016/06/28 DOTA

Python编写检测数据库SA用户的方法

2014/07/11 Python

python使用Queue在多个子进程间交换数据的方法

2015/04/18 Python

python实现class对象转换成json/字典的方法

2016/03/11 Python

python3使用pyqt5制作一个超简单浏览器的实例

2017/10/19 Python

python梯度下降法的简单示例

2018/08/31 Python

python 最简单的实现适配器设计模式的示例

2020/06/30 Python

详解Java中一维、二维数组在内存中的结构

2021/02/11 Python

结合CSS3的布局新特征谈谈常见布局方法

2016/01/22 HTML / CSS

美国第一香水网站：Perfume.com

2017/01/23 全球购物

Set里的元素是不能重复的，那么用什么方法来区分重复与否呢？

2016/08/18 面试题

公司领导班子对照检查材料

2014/09/24 职场文书

爱岗敬业事迹材料

2014/12/24 职场文书

2015年安全教育月活动总结

2015/03/26 职场文书

国王的演讲观后感

2015/06/03 职场文书

爱国主义影片观后感

2015/06/18 职场文书

大学三好学生主要事迹范文

2015/11/03 职场文书

Python合并pdf文件的工具

2021/07/01 Python

JavaScript 盒模型 尺寸深入理解

JavaScript 盒模型尺寸深入理解