JQuery 确定css方框模型(盒模型Box Model)_jquery

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

时间: 2024-10-26 23:31:10

JQuery 确定css方框模型(盒模型Box Model)_jquery的相关文章

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

<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制作动态的下拉菜单_jquery

当要在一个有限的导航菜单空间放一个大的子菜单时,我们一般采用下拉菜单的形式来弥补空间的不足.本文将带大家用最少的时间,使用jQuery和CSS结合制作一个动态的下拉菜单. XHTML 首先是要在页面的head部分引入jquery库,这是必须的. <script type="text/javascript" src="js/jquery.js"></script> 接着我使用一个无序列表来构建菜单. <ul class="men

w3c系列之CSS(四):深入理解盒模型

盒模型是一个老生常谈的话题,本身并不复杂,它描述了文档树所产生的矩形框以及根据可视化格式模型(visual formatting model)所产生的布局结构. 曾经看到一道面试题:说说CSS中的盒模型?网上的回答都是margin,border,padding,width,height之类的,尼玛都是复制粘贴的吧= =.....要是这篇文章也这么写的话就跟前面三篇没啥区别了,既然要深入理解,那就谈点高大上的东西. 1.要深入,先入门 首先还是得对盒模型做个简单而详细的介绍,想要跑,基础要打好~,

CSS基础:CSS2盒模型

css CSS2盒模型 CSS2中的盒模型是关系到设计中排版定位的关键,任何一个选择符都遵循盒模型规范,例如<div>.<p>.<a>--盒模型包含(外补丁)margin,(背景颜色)background-color,(背景图片)background-image,(内补丁)padding ,(内容)content,(边框)border.下图是CSS盒模型的示意图 平面示意图Flash示意模型 需要说明的是:IE5.x 和 IE 6.0在quirks模式下使用自己的错误的

深入讲解CSS中盒模型的用法

  视觉类型的媒体根据CSS的视觉格式化模型(Visual formatting model)的规则来处理文档树中的元素,从而将(X)HTML转化成制作者设计的样子. 例如: 如何生成元素框; 处理各元素之间的关系; 根据框的尺寸.定位等CSS属性来确定元素的位置等; 因此,要掌握使用CSS控制页面内元素的技巧,就需要深入了解框模型(Box Model)及视觉格式化模型的原理. 文档树中的元素都产生矩形的框(Box),这些框影响了元素内容之间的距离.元素内容的位置.背景图片的位置等等.而浏览器根

CSS基础知识 - 盒模型/定位/浮动

1. Box Model (盒模型)       Box Model 是CSS的指定元素如何显示和交互,是CSS的基石之一.       页面上的每个元素被看成是一个矩形框,它由内容,填充(padding),边框(border),空白边(margin)组成.       他们之间的关系如下:       [ margin [ border [ padding [ content ] ] ] ]       margin, border, padding 都是可选的,他们的默认值为0.      

跨浏览器的Flexbox:CSS Flexible盒模型3

文章简介:CSS Flexible盒模型3又简称为Flexbox.摒弃我们传统上使用的一些hack和组件,Flexbox给网络的发展带来了很多正能量和兴奋济,让我们一起把复杂的网站布局变得简易和快速. 简介 CSS Flexible盒模型3又简称为Flexbox.摒弃我们传统上使用的一些hack和组件,Flexbox给网络的发展带来了很多正能量和兴奋济,让我们一起把复杂的网站布局变得简易和快速.早前在Flexbox: fast track to layout nirvana?一文中介绍了Flex

CSS3实例教程:盒模型添加阴影属性box

文章简介:我们要对盒模型添加阴影怎么办呢?其实它的用法与text-shadow用法一样,只不过属性名称是box-shadow. 我们要对盒模型添加阴影怎么办呢?其实它的用法与text-shadow用法一样,只不过属性名称是box-shadow. 相关文章:CSS3教程:网页文字阴影属性text-shadow box-shadow: 此属性与text-shadow一样有4个值,前两个值分别表示水平方向位移距离和垂直方向的位移距离,第三个值表示阴影的模糊半径(包含0及以下的值均表示无模糊),最后一个

CSS入门:CSS2盒模型

css CSS2盒模型 CSS2中的盒模型是关系到设计中排版定位的关键,任何一个选择符都遵循盒模型规范,例如<div>.<p>.<a>--盒模型包含(外补丁)margin,(背景颜色)background-color,(背景图片)background-image,(内补丁)padding ,(内容)content,(边框)border.下图是CSS盒模型的示意图 平面示意图 3D示意图(原图出自:hicksdesign) Flash示意模型 需要说明的是:IE和Mozi