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 相关文章推荐
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
Aug 02 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
layui框架与SSM前后台交互的方法
Sep 12 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 Javascript
vue绑定数字类型 value为数字的实例
Aug 31 Javascript
Vue常用API、高级API的相关总结
Feb 02 Vue.js
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
模拟xcopy的函数
2006/10/09 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
PHP迭代器的内部执行过程详解
2013/11/12 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
PHP对象实例化单例方法
2017/01/19 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
javascript中 try catch用法
2015/08/16 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
python del()函数用法
2013/03/24 Python
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
在类Unix系统上开始Python3编程入门
2015/08/20 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
农村改厕实施方案
2014/03/22 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
Python+Appium新手教程
2021/04/17 Python
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB