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 相关文章推荐
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
基于js对象,操作属性、方法详解
Aug 11 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
Vue基于NUXT的SSR详解
Oct 24 Javascript
JS运动特效之完美运动框架实例分析
Jan 24 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 Javascript
JavaScript如何判断对象有某属性
Jul 03 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 Javascript
js正则匹配markdown里的图片标签的实现
Mar 24 Javascript
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
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
jquery 注意事项与常用语法小结
2010/06/07 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
javascript中this的四种用法
2015/05/11 Javascript
js初始化验证实例详解
2016/11/26 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
python33 urllib2使用方法细节讲解
2013/12/03 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
Python wordcloud库安装方法总结
2020/12/31 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
设计师大码女装:11 Honoré
2020/05/03 全球购物
初一家长会邀请函
2014/01/31 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫