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添加重载函数的辅助方法
Jul 04 Javascript
Jquery 数组操作大全个人总结
Nov 13 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
Angular2中监听数据更新的方法
Aug 31 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
Vue路由模块化配置的完整步骤
Aug 14 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
Vue学习之组件用法实例详解
Jan 06 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 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
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
Python 深入理解yield
2008/09/06 Python
Python装饰器的函数式编程详解
2015/02/27 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
基于FME使用Python过程图解
2020/05/13 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
浅析Python中字符串的intern机制
2020/10/03 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
详细的大学生创业计划书模板
2014/01/27 职场文书
2015年度党员个人总结
2015/02/14 职场文书
送达通知书
2015/04/25 职场文书
小王子读书笔记
2015/06/29 职场文书