JQuery 确定css方框模型（盒模型Box Model）

如果页面包含有效的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。

赞 (0)

相关推荐

  • JQuery 确定css方框模型（盒模型Box Model）

    如果页面包含有效的DOCTYPE声明,则以严格模式呈现. 如果页面没有DOCTYPE声明或没有有效的DOCTYPE声明,则以兼容模式呈现. 下面将一个两种模式的区别,两种呈现模式的主要差别是对元素width和height样式的计算上.如下面的样式 复制代码 代码如下: { width:180px; height:72px; padding:10px; bording-width:5px; } 在W3C的严格模式下,元素的内容显示的范围是180*72px.内边距和边框在180*72像素的范围之外.

  • JavaScript 盒模型 尺寸深入理解

    JavaScript 盒模型 尺寸深入理解

    概念 引自维基百科:根据由万维网联盟(W3C)于1996年发行并于1999年修订的CSS1所指定的,当任意一个块级元素的宽度或高度被显式指定,它应当只确定这个可见元素自身(内容区)的宽度或高度,而padding, border和margin随后被应用.Internet Explorer在"怪异模式" 则把内容,内边距(padding)和边框(border)全部包括在一个指定的宽度或高度之内:这导致它呈现出一个比遵从标准行为的结果更窄或者更短的盒子.如下图: 应用 理解盒模型,不管是对于

  • 如何使用jquery修改css中带有!important的样式属性

    <div class="test">使用jquery修改css中带有!important的样式属性</div> 外部样式为: div.test{ width:auto !important; overflow:auto !important } 通过 $("div.test").css("width","100px");和 $("div.test").css("width&

  • 如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)

    jquery控制CSS样式,并且取消Css样式(如背景色)   $("#tab1").css("background-color", "");   $("#" + left_tabid).css("background-color", "#025891");

  • JavaScript使用链式方法封装jQuery中CSS()方法示例

    本文实例讲述了JavaScript使用链式方法封装jQuery中CSS()方法.分享给大家供大家参考,具体如下: 主要思路就是:返回this对象,将所获取的操作元素放入一个数组中.在原型中添加拓展方法 <html> <head> <title></title> </head> <body> <div id="one">aa</div> </body> <script typ

  • 基于Jquery+div+css实现弹出登录窗口(代码超简单)

    具体代码详情如下所示: 基本思路先隐藏(dispaly:none)再显示,半透明蒙版层通过 z-index:9998; z-index:9999; 值越大越在前面 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

  • Jquery使用css方法改变样式实例

    本文实例讲述了Jquery使用css方法改变样式.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • JQuery结合CSS操作打印样式的方法

    本节内容:JQuery.CSS操作打印样式. 一.添加打印样式 1,为屏幕显示和打印分别准备一个css文件,如下所示:  用于屏幕显示的css: 复制代码 代码如下: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" /> 用于打印的css: 复制代码 代码如下: <link rel="stylesheet" href=&q

  • jQuery 和 CSS 的文本特效插件集锦

    jQuery 和 CSS 的文本特效插件集锦

    Jumble Text Effect Plugins Demo||Download Vticker – Vertical News Ticker With JQuery Plugin Demo||Download JQuery TE – Text Editor With JQuery Plugin Demo||Download Squishy – JQuery Plugin For Fitting Text Exactly To Its Container Demo||Download Boot

  • jQuery的css()方法用法实例

    本文实例讲述了jQuery的css()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或设置匹配元素的一个或多个样式属性. 语法结构: 语法一: 取得指定样式属性的属性值. 以样式属性名称作为参数.例如: 复制代码 代码如下: $("div").css("color") 以上代码能够获取div的字体颜色值. 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta c

随机推荐