JQuery 确定css方框模型(盒模型Box Model)


Posted in Javascript onJanuary 22, 2010

如果页面包含有效的DOCTYPE声明,则以严格模式呈现。
如果页面没有DOCTYPE声明或没有有效的DOCTYPE声明,则以兼容模式呈现。
下面将一个两种模式的区别,两种呈现模式的主要差别是对元素width和height样式的计算上。如下面的样式

{ 
width:180px; 

height:72px; 

padding:10px; 

bording-width:5px; 
}

在W3C的严格模式下,元素的内容显示的范围是180*72px。内边距和边框在180*72像素的范围之外。所以整个元素的覆盖面积是:width:180 + 10*2 + 5*2 = 210px,height:72 +10*2 + 5*2 =102px。
在IE的兼容模式下整个元素的覆盖面积为180*72像素。内容的大小减小到宽度180 - 10*2 - 5*2=150px,高度72 - 10*2 - 5*2 =32px。
是用JQuery判断Box Modal的方法很简单。是通过bool类型的$.boxModel标志。如果页面是用的是W3C标准的模型,返回true.否则返回false。
Javascript 相关文章推荐
Track Image Loading效果代码分析
Aug 13 Javascript
php跨域调用json的例子
Nov 13 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
Jquery实战_读书笔记2 选择器
Jan 22 #Javascript
Jquery实战_读书笔记1—选择jQuery
Jan 22 #Javascript
jquery last-child 列表最后一项的样式
Jan 22 #Javascript
javascript 拖放效果实现代码
Jan 22 #Javascript
JAVASCRIPT style 中visibility和display之间的区别
Jan 22 #Javascript
javascript 获取url参数和script标签中获取url参数函数代码
Jan 22 #Javascript
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 #Javascript
You might like
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
php表单处理操作
2017/11/16 PHP
php微信公众号开发之简答题
2018/10/20 PHP
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
跟老齐学Python之重回函数
2014/10/10 Python
浅谈Python的垃圾回收机制
2016/12/17 Python
Python函数和模块的使用总结
2019/05/20 Python
python程序变成软件的实操方法
2019/06/24 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
python实现图像全景拼接
2020/03/27 Python
什么是python类属性
2020/06/10 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
外贸专业求职信
2014/03/09 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL