`
libo_591
  • 浏览: 40121 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html的BOX模型分析及使用jquery的宽高函数说明

阅读更多



[img]http://www.appquicker.com.cn:83/reportmis/mis2/reportcenter/ewebeditor/imgServlet?fileID=d07cb5db-41ff-4fbe-9b9a-4903e3165db8" alt="" border="0[/img]











下面来看图说话:

Margin是该元素与周边元素的边界

Padding是该元素的补白,即元素内容到边框的距离

对于W3C标准来说:

(B)对于我们常用的background,那么它其实占据的是border+padding+content的范围

(D)2个块级元素之间的margin,

对于水平距离,为2者加和(marginHorizantal = marginRight+marginLeft )

块级元素不管内容多少,都会占满一行。行内元素按照内容扩展大小

对于不同的浏览器,其盒子标准是不一样的,如下:

而IE的盒子模型,起css中的width和height还包括了padding和border,

[img]http://www.appquicker.com.cn:83/reportmis/mis2/reportcenter/ewebeditor/imgServlet?fileID=1fc6082c-963e-4290-871a-f326d099b561" alt="css-box-model.jpg" width="554" height="692[/img]

a)         首先说下3个函数的含义

                       ii.              innerHeight() --- content+padding后的高度

b)         然后说下3个函数怎么用



http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel_width

右边上边的一条线为250px,下面为DIV,左边调整的为此DIV的CSS
分享到:
评论

相关推荐

    利用jQuery的动画函数animate实现豌豆发射效果

    标题和描述中提到了使用jQuery的animate函数实现豌豆发射效果,这涉及到jQuery库中的animate函数的使用方法。jQuery是一个非常流行的JavaScript库,它提供了丰富的方法来操作DOM(文档对象模型),处理事件,以及...

    实例解析jQuery工具函数

    jQuery工具函数是jQuery库中的一系列实用函数,它们提供了一种方便的方式来处理和操作JavaScript中的数据和DOM元素。本文将通过实例解析这些工具函数,帮助开发者更好地理解和运用它们。 首先,我们来看$.browser...

    JQuery权威指南源代码

    使用boxModel对象检测是否是W3C盒子模型 使用$.each()工具函数遍历数组 使用$.each()工具函数遍历ajaxSettings对象 使用$.grep()工具函数筛选数组中的元素 使用$.map()工具函数变更数组中的元素 使用$.inArray...

    jQuery源码分析(1.7)

    1. **源码结构**:jQuery的核心是一个函数,该函数接受一个文档对象模型(DOM)作为参数,并返回一个包含所有匹配元素的集合。这个函数被称为`jQuery`或`$`。 ```javascript function jQuery(selector, context) { ...

    jquery2.1.4

    jQuery还支持更复杂的选择器组合,如`$("div.box")`选取所有类名为"box"的div元素。 在操作DOM(文档对象模型)方面,jQuery提供了丰富的API。例如,`.html()`用于获取或设置元素的HTML内容,`.text()`则处理文本...

    jquery.layerModel

    而jQuery LayerModel则是jQuery的一个扩展插件,它专注于提供弹出层(Layer)的管理与模型(Model)处理功能,为开发者构建丰富的用户交互体验提供了强大的工具。本文将深入探讨jQuery LayerModel的核心概念、使用...

    jquery资料

    此外,还可以使用组合选择器,如`$("div.box")`选取所有class为"box"的div元素。 ### 3. jQuery的对象模型 jQuery对象是对一组DOM元素的包装,提供了链式调用的可能。例如,`$("div").addClass("active").hide()`...

    jQuery基础教程源码

    在jQuery中,DOM(文档对象模型)操作是其主要功能之一。DOM是HTML和XML文档的结构化表示,jQuery提供了简洁的API来选择、操作和修改DOM元素。例如,`$()`函数可以用来选择页面上的元素,如`$("#id")`选择ID为"id"的...

    JQuery+HTML5+CSS3 相关网站

    **jQuery + HTML5 + CSS3 网站开发详解** 在现代网页开发中,jQuery、HTML5和CSS3是三个至关重要的技术,它们共同构建了丰富、动态且响应式的用户体验。这篇详述将深入探讨这三个关键技术如何协同工作,以及如何在...

    使用jQuery仿网易云音乐官网主页面

    1. **布局技术**:CSS中的盒模型(Box Model)、浮动(Float)和定位(Position)是网页布局的关键。盒模型决定了元素的尺寸,浮动常用于创建多列布局,而定位允许元素相对于其正常位置或父元素进行偏移。 2. **...

    jQuery图片人脸识别代码

    该jQuery插件可能利用了这些算法的JavaScript实现,通过分析图片的像素数据来定位人脸特征。 **1. HTML结构** 在`index.html`中,我们需要包含必要的HTML元素,比如一个`<img>`标签用于显示图片,以及可能存在的...

    jQuery 3D旋转明星人物展示特效

    然后,我们创建一个jQuery函数,该函数负责处理旋转逻辑。这通常包括定义初始旋转角度,设置动画时间,以及使用`.animate()`方法来改变元素的CSS3旋转属性。例如,可以设置`rotateY`属性实现绕Y轴的旋转,同时可以...

    jquery实现图片滚动

    ### 使用jQuery实现图片滚动 #### 一、项目背景与需求分析 在网页设计与开发过程中,为了提升用户体验和页面美观度,常常会用到图片滚动功能。本案例中,一个初学者希望使用jQuery来实现一个简单的图片滚动效果,...

    HTML5+CSS3+jQ注册表单 HTML5+CSS3+jQuery注册表单代码下载.zip

    例如,使用`box-sizing`属性可以改变元素边框和内填充对其大小的影响;`flexbox`或`grid`布局模型使得创建响应式表单更加容易,可以根据屏幕尺寸自动调整元素排列。CSS3还提供了过渡(transitions)、动画...

    jQuery与Zeptoc差异

    因此,Zepto在处理包含边框尺寸时,需要考虑`box-sizing`的设定,而jQuery则需要使用`.outerWidth()`和`.outerHeight()`来获取包含边框和内填充的尺寸。 除此之外,对于某些特殊情况,如创建边框三角形,Zepto和...

    jQuery功能函数详解

    在本文中,我们将深入探讨jQuery的功能函数,包括浏览器检测、盒子模型处理以及JavaScript对象的操作。 1. **浏览器检测** jQuery 提供了一个$.browser对象,用于检测用户正在使用的浏览器类型及其版本。例如: -...

    强大的JQUERY框架

    - **说明.txt**: 文件名暗示可能包含了关于jQuery的简要介绍或使用指南,可以查看以获取更多细节。 - **jquery1.4、jquery1.32、jquery1.26**: 这些可能是jQuery的不同版本,从版本号看,它们可能分别是1.4、1.32和...

    cssjquery仿ext样式页面

    jQuery的动画函数如fadeIn、fadeOut、slideToggle等可以为页面添加动态效果,提升用户体验。另外,jQuery的事件监听功能可以让用户与页面进行交互,例如点击按钮触发功能,拖放操作等。 在实现过程中,可能需要创建...

    jQuery的起点教程.doc

    在进行任何操作之前,需要确保jQuery能够在文档对象模型(Document Object Model,简称DOM)加载完成后立即执行。为此,通常使用`$(document).ready()`函数,该函数确保DOM加载完毕后再执行其中的JavaScript代码。 ...

Global site tag (gtag.js) - Google Analytics