jQuery教程:检测网页标准的W3C盒子模型

文章简介:在jQuery中,可以通过jQuery.support.boxModel对象返回的属性值,确定是否是标准的W3C盒子模型,该方法返回一个布尔值,如果是true表示是W3C盒子模型,否则,则不是W3C盒子模型。

盒子模型分为两类,一类是W3C盒子模型,另一类是IE盒子模型。两者最根本的区别在于,属性Height与Width这两个值是否包含padding与border。W3C盒子模型不包含padding与border,仅值内容和Height和Width,而IE盒子模型包含padding与border。

在jQuery中,可以通过jQuery.support.boxModel对象返回的属性值,确定是否是标准的W3C盒子模型,该方法返回一个布尔值,如果是true表示是W3C盒子模型,否则,则不是W3C盒子模型。

下面是检测页面是否是W3C盒子模型的示例:

<div id="tip"></div>
<script>
    $(function () {
        var boxModel = "您打开的页面是:";
        if ($.support.boxModel) {
            boxModel += "W3C盒子模型";
        } else {
            boxModel += "IE盒子模型"
        }
        $("#tip").html(boxModel);
    })
</script>

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, 3c
, w3c
, 模型
, 属性
, 盒子
布尔
,以便于您获取更多的相关知识。

时间: 2024-09-07 18:07:22

jQuery教程:检测网页标准的W3C盒子模型的相关文章

css的核心内容 标准流、盒子模型、浮动、定位等分析

1.块级元素:如:<div></div> 2.行内元素:如:<span></span> 从效果中看块级元素与行内元素的区别: 通过CSS的设置把行内元素转换成块级元素: 标准流:就是标签的排列方式. <div class="style2">我的未来不是梦</div> <span id="st" class="style1">栏目一</span> <

W3C盒子模型和IE6盒子模型

IE6 盒子模型中,盒子的尺寸包含了 内容区,padding, border 和 margin 这四个部分,而 W3C 的盒子模型中,盒子的尺寸只包含内容区,padding,border 和 margin 被排除在盒子尺寸之外. 盒子模型(Box Model)是 CSS 的核心,现代 Web 布局设计简单说就是一堆盒子的排列与嵌套,掌握了盒子模型与它们的摆放控制,会发现再复杂的页面也不过如此,然而,任何美好的事物都有缺憾,盒子模型有两种不同的诠释,一种来自 IE6,一种来自 W3C 标准浏览器.

[HTML/CSS]盒子模型,块级元素和行内元素

目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,也吃过这方面的亏.今天,群里有朋友问起这个,就趁着学习一下,也算是查漏补缺吧,虽然,谈不上精通,但是了解,还是很有必要的. 盒子模型 css盒子模型分为两种,一种是遵循w3c标准的标准盒子模型,另外一种就是IE盒子模型. 标准盒子模型 IE盒子模型 通过上面两张图可以看出

IE6的盒子模型

盒子模型(Box Model)是 CSS 的核心,现代 Web 布局设计简单说就是一堆盒子的排列与嵌套,掌握了盒子模型与它们的摆放控制,会发现再复杂的页面也不过如此,然而,任何美好的事物都有缺憾,盒子模型有两 种不同的诠释,一种来自 IE6,一种来自 W3C 标准浏览器. 盒子模型 下图就是一个典型的盒子模型示意图 在内容区外面,依次围绕着 padding 区,border 区,margin 区,这一模型结构在所有主流浏览器都是一致的.通过盒子模型,我们可以为我们的内容设置边界,留白以及边距,盒

CSS魔法堂:盒子模型简介

本文讨论的是块级盒子(Block-level box)的盒子模型(Box Model)   一.W3C标准的盒子模型       二.IE盒子模型   三.两种模型的区别 W3C标准盒子模型:   外盒模型        元素空间宽度 = content width + padding + border + margin的宽度        元素空间高度 = content width + padding + border + margin的高度   内盒模型 元素宽度 = content he

从GMail认识的W3C网页标准和Ajax

ajax|w3c|标准|网页 不可否认,W3C网页标准刚出来的时候的确很吸引人.那时因为firefox的出现,冲击了浏览器市场,使得大家为了一个小狐狸,而掀起一场网页标准的风波,但是对于设计师来说带来什么?在这场风波我看到的最多就是技术的泛滥. 和一些designer聊天,第一句话就问,"你的网页标准化了"吗,"你的网页又有几处错误".无形中这些话就给我们这些designer来说带来很大压力.每次更新网页都很害怕因为一些小小的改动导致一些小错误.似乎W3C成了一种追

符合W3C网页标准的iframe标签的使用方法_javascript技巧

网站想改版,其中有一种广告的问题,以前每投放一个广告我都要把全站的文章都要更新一遍,这样既不便又不好!把网站以前推荐的一些文章都改成现在推荐的几个了!而且还浪费了我的时间.所以想使用Iframe来实现,但是直接使用iframe又不符合标准,那么该如何使用才能符合W3C的标准呢?  直接使用"IFRAME"不符合"W3C网页标准"  用JS来实现iframe 的标准化.  一.建立一个JS文件,代码如下:  复制代码 代码如下: function ifr(url,w,

jquery $.ajax 检测用户名是否存在

在很多时候我们为了提搞用户体验得让用户感觉好,今天我们提供一款jquery $.ajax 检测用户名是否存在哦,就是提供验证用户要注册用户名是否可用,这个功能还必须由ajax来实现,下面提供二款jquery ajax 检测用户名实例. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd

web标准化学习指南:如何学习网页标准

web|web标准|网页 如何学习网页标准 很多经典论坛网页标准化版的版友问这个问题,我想每一个刚刚接触web标准的人都会问这样的问题,我就根据自己的经验总结. Step 1.不要一味使用DW等工具设计网页,去熟悉(X)HTML语言和CSS语言 因为web标准对代码的要求提高了,没有对xhtml代码没有一定的了解是无法通过校检的.DW工具也可以使用,但是要看着代码写网页了.首先是xhtml代码,不是很多,知道他们如何使用,怎么正确书写,而且要记得封闭tag.如<img/><br/>