位置: 编程技术 - 正文
概念
引自维基百科:根据由万维网联盟(W3C)于年发行并于年修订的CSS1所指定的,当任意一个块级元素的宽度或高度被显式指定,它应当只确定这个可见元素自身(内容区)的宽度或高度,而padding, border和margin随后被应用。Internet Explorer在“怪异模式” 则把内容,内边距(padding)和边框(border)全部包括在一个指定的宽度或高度之内;这导致它呈现出一个比遵从标准行为的结果更窄或者更短的盒子。如下图:
应用理解盒模型,不管是对于设置一个元素外边据、边框、内边距,高宽CSS样式的准确应用,还是对于使用JavaScript去计算盒子的宽度、高度都有很大的帮助。比方说jQuery中提供的outerWidth,innerWidth,width,有了上面那个图,随时都可以很清楚的了解这个值的准确信息,在计算一个元素的位置和尺寸时都很有用处。
在弹出层中的应用,动态调整弹出层尺寸,以及拖拽过程中计算最大范围边距时都有用到。
一张图理解:
推荐整理分享JavaScript 盒模型 尺寸深入理解(js实现盒子移动),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:js盒子模型,js怎么创建盒子,盒模型html,盒模型html,javascript盒子模型的组成,javascript盒子模型的组成,js盒子,js盒子,内容如对您有帮助,希望把文章链接给更多的朋友!
javascript学习(一)构建自己的JS库 前言库是一个饱受争议的热门话题。一种观点认为它是一种非常棒的工具,是任何开发者都不可或缺的;另一种观点则认为在不理解库的内部工作原理
javascript学习(二)javascript常见问题总结 1、JS中方法和变量都是区分大小写的2、单引号、双引号在JS中没有特殊的区别,都可以用来创建字符串。但作为一般性规则,大多数开发人员喜欢用单
Javascript图像处理—亮度对比度应用案例 前言上一篇文章,我们讲解了图像处理中的卷积操作和平滑(也就是模糊)处理,这篇文章我们进行亮度和对比度的变化。其实,亮度是啥玩意?亮度
标签: js实现盒子移动
本文链接地址:https://www.jiuchutong.com/biancheng/379123.html 转载请保留说明!友情链接: 武汉网站建设