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 相关文章推荐
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
js实现下拉菜单效果
Mar 01 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 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编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
php设计模式 Strategy(策略模式)
2011/06/26 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
PHP中COOKIES使用示例
2015/07/26 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
详解python内置模块urllib
2020/09/09 Python
大二自我鉴定范文
2013/10/05 职场文书
销售实习自我鉴定
2013/12/07 职场文书
超市重阳节活动方案
2014/02/10 职场文书
会计自荐信范文
2014/03/09 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS