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 相关文章推荐
关于document.cookie的使用javascript
Apr 11 Javascript
可以将word转成html的js代码
Apr 11 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
jquery Mobile入门—多页面切换示例学习
Jan 08 Javascript
javascript动画之磁性吸附效果篇
Dec 09 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
JS实现的排列组合算法示例
Jul 16 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 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 字符串 小常识
2009/06/05 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
php递归创建目录的方法
2015/02/02 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
javascript中length属性的探索
2011/07/31 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
原生js实现验证码功能
2017/03/16 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
Vue组件化通讯的实例代码
2017/06/23 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
Mac中安装nvm的教程分享
2017/12/11 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
python 将md5转为16字节的方法
2018/05/29 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
pyhton中__pycache__文件夹的产生与作用详解
2019/11/24 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
NumPy统计函数的实现方法
2020/01/21 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
悬挂训练绳:TRX
2017/12/14 全球购物
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
2015年党员自我剖析材料
2014/12/17 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
java基础——多线程
2021/07/03 Java/Android