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 相关文章推荐
半角全角相互转换的js函数
Oct 16 Javascript
js动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
JavaScript中return false的用法
Mar 12 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
深入理解jQuery之事件移除
Jun 02 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 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
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
PHP 和 HTML
2006/10/09 PHP
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
jquery tab插件精简版分享
2011/09/10 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
python编写爬虫小程序
2015/05/14 Python
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
Python可以实现栈的结构吗
2020/05/27 Python
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
求职信范文大全
2014/05/26 职场文书
青年文明号汇报材料
2014/12/23 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
销售口号霸气押韵
2015/12/24 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang
python+opencv实现视频抽帧示例代码
2021/06/11 Python