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 相关文章推荐
checkbox使用示例
Aug 23 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
Bootstrap popover用法详解
Dec 22 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
JavaScript实现优先级队列
Dec 06 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
数据库的日期格式转换
2006/10/09 PHP
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
PHP数组实例总结与说明
2011/08/23 PHP
PHP的拦截器实例分析
2014/11/03 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
进一步理解Python中的函数编程
2015/04/13 Python
详解Python中break语句的用法
2015/05/14 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
数字漫画:comiXology
2020/06/13 全球购物
初一地理教学反思
2014/01/16 职场文书
开会迟到检讨书
2014/02/03 职场文书
大学生演讲稿
2014/04/25 职场文书
擅自离岗检讨书
2014/09/12 职场文书
档案工作个人总结
2015/03/03 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书