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 相关文章推荐
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
详解vue事件对象、冒泡、阻止默认行为
Mar 20 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 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 json_encode值中大括号与花括号区别
2013/09/30 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
python socket 超时设置 errno 10054
2014/07/01 Python
Python3多线程操作简单示例
2018/05/22 Python
python实现趣味图片字符化
2019/04/30 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
Python 日期与时间转换的方法
2020/08/01 Python
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
业务主管岗位职责
2013/11/20 职场文书
三下乡活动方案
2014/01/31 职场文书
公司聘任书模板
2014/03/29 职场文书
储备店长岗位职责
2015/04/14 职场文书
证婚人致辞精选
2015/07/28 职场文书
2016新年问候语大全
2015/11/11 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python