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

从新浪弄下来的全屏广告代码与使用说明

Mar 15 Javascript

使用JQuery进行跨域请求

Jan 25 Javascript

js中根据字数截取字符串，不能截断url

Jan 12 Javascript

javascript基本类型详解

Nov 28 Javascript

javascript实现倒计时N秒后网页自动跳转代码

Dec 11 Javascript

javascript操作数组详解

Dec 17 Javascript

Vue 过渡实现轮播图效果

Mar 27 Javascript

React Native悬浮按钮组件的示例代码

Apr 05 Javascript

微信小程序外卖选购页实现切换分类与数量加减功能案例

Jan 15 Javascript

详解用vue2.x版本+adminLTE开源框架搭建后台应用模版

Mar 15 Javascript

利用Bootstrap Multiselect实现下拉框多选功能

Apr 08 Javascript

jQuery zTree插件快速实现目录树

Aug 16 jQuery

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

2010/12/29 PHP

bindParam和bindValue的区别以及在Yii2中的使用详解

2018/03/12 PHP

Sample script that deletes a SQL Server database

2007/06/16 Javascript

asp.net+js 实现无刷新上传解析csv文件的代码

2010/05/17 Javascript

jQuery获取当前对象标签名称的方法

2014/02/07 Javascript

javascript实时显示北京时间的方法

2015/03/12 Javascript

node.js实现爬虫教程

2020/08/25 Javascript

AngularJs bootstrap详解及示例代码

2016/09/01 Javascript

JS 动态判断PC和手机浏览器实现代码

2016/09/21 Javascript

微信小程序数组（增，删，改，查）等操作实例详解

2017/01/05 Javascript

微信小程序实例开发总结

2017/04/26 Javascript

jQuery日期范围选择器附源码下载

2017/05/23 jQuery

Ionic + Angular.js实现验证码倒计时功能的方法

2017/06/12 Javascript

微信小程序多列选择器range-key使用详解

2020/03/30 Javascript

Vue.js实现分页查询功能

2020/11/15 Javascript

详解vue-router传参的两种方式

2018/09/10 Javascript

vue强制刷新组件的方法示例

2019/02/28 Javascript

微信小程序中插入激励视频广告并获取收益(实例代码)

2019/12/06 Javascript

TypeScript高级用法的知识点汇总

2019/12/17 Javascript

vue使用screenfull插件实现全屏功能

2020/09/17 Javascript

element-ui点击查看大图的方法示例

2020/12/14 Javascript

[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20

2020/11/23 DOTA

用Python实现一个简单的能够发送带附件的邮件程序的教程

2015/04/08 Python

python opencv 直方图反向投影的方法

2018/02/24 Python

Python爬虫的两套解析方法和四种爬虫实现过程

2018/07/20 Python

Pytorch十九种损失函数的使用详解

2020/04/29 Python

使用Keras预训练好的模型进行目标类别预测详解

2020/06/27 Python

利用Python批量识别电子账单数据的方法

2021/02/08 Python

Luxplus丹麦：香水和个人护理折扣

2018/04/23 全球购物

德国综合购物网站：OTTO

2018/11/13 全球购物

一份报关员的职业规划范文

2014/01/08 职场文书

专题组织生活会方案

2014/06/15 职场文书

病危通知书样本

2015/04/17 职场文书

故意伤害辩护词

2015/05/21 职场文书

vue-element-admin项目导入和导出的实现

2021/05/21 Vue.js

JavaScript最完整的深浅拷贝实现方式详解

2022/02/28 Javascript

JavaScript 盒模型 尺寸深入理解

JavaScript 盒模型尺寸深入理解