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 相关文章推荐
JavaScript检测鼠标移动方向的方法
May 22 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
Javascript验证方法大全
Sep 21 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
微信小程序使用wxParse解析html的方法示例
Jan 17 Javascript
微信小程序代码上传、审核发布小程序
May 18 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
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
php json转换相关知识(小结)
2018/12/21 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
Javascript 强制类型转换函数
2009/05/17 Javascript
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
js实现简单页面全屏
2019/09/17 Javascript
python smtplib发送带附件邮件小程序
2018/05/22 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
如何利用python生成MD5并去重
2020/12/07 Python
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
Html5自定义字体解决方法
2019/10/09 HTML / CSS
自我评价的范文
2014/02/02 职场文书
解除合同协议书
2014/04/17 职场文书
妇联主席先进事迹
2014/05/18 职场文书
初中语文教学反思范文
2016/03/03 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书