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

看图学习W3C盒子模型及相关通用脚本元素

阅读更多
from:www.xidea.org


获取大小的属性有
CSS (大小+border)属性对应的 offset长宽属性(无标准的实事标准):
1.offsetWidth
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。
与 CSS width + border对应
2.offsetHeight获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
与 CSS height + border对应
CSS (大小-padding )属性对应的 client长宽属性(无标准的实事标准):
3.clientWidth
获取对象的宽度,不计算任何边距、边框、滚动条或可能应用到该对象的补白。
与CSS width -滚动条宽度(如果有)
对应
4.clientHeight
获取对象的高度,不计算任何边距(margin)、边框、滚动条或可能应用到该对象的补白(padding)。
与CSS height -滚动条宽度(如果有)
对应

获取位置信息的属性有:
几个offset属性(无标准的实事标准):
offset 坐标0点是offsetParent元素content区域的左上点
5.offsetParent
获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。
CSS persition = absolute时,left,top 属性值参照的元素。
Object is positioned relative to parent element's position—or to the body object if its parent element is not positioned—using the top and left properties.
6.offsetLeft
获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
与 CSS left(absolute)+margin对应
7.offsetTop
获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。
与 CSS top(absolute)+margin对应
分享到:
评论

相关推荐

    IE盒子模型和标准W3C盒子模型_资料收集

    **定义**:IE盒子模型是早期Internet Explorer浏览器所使用的模型,与标准W3C盒子模型相比,IE盒子模型将边框和内边距也计算在元素的宽度和高度之内。 **组成**: - 同标准W3C盒子模型,同样包括content、padding、...

    页面布局的W3C盒子模型.ppt

    页面布局的W3C盒子模型.ppt

    网页里的两种盒子模型(W3C盒子模型、IE盒子模型)

    网页设计中的两种主要盒子模型,即W3C盒子模型和IE盒子模型,是理解CSS布局的关键因素。这两种模型在计算元素的实际尺寸时有着显著的区别,从而影响到元素在页面上的表现。 1. W3C盒子模型(标准模型) W3C盒子模型...

    IE盒子模型和标准W3C盒子模型

    在Web开发中,有两种主要的盒子模型:IE盒子模型和标准W3C盒子模型,这两种模型对于元素尺寸的计算方式有所不同,因此对页面布局有着深远的影响。 **标准W3C盒子模型**遵循W3C规范,它将每个HTML元素视为一个矩形...

    CSS+DIV-盒子模型示例.zip

    - **标准盒模型(W3C盒模型)**:内容宽度决定元素总宽度,边框和内填充不包含在内。 - **IE盒模型(怪异盒模型)**:内容宽度加上边框和内填充决定元素总宽度,更符合直觉但与W3C标准不一致。 3. **CSS设置盒...

    CSS盒子模型 图片演示

    W3C标准盒模型中,元素的width和height只包括内容区,而IE盒模型则包括内容区、内边距和边框。为了避免浏览器之间的兼容性问题,通常推荐使用W3C标准盒模型,并可以通过`box-sizing`属性来指定盒模型的类型。例如,`...

    CSS盒子模型.rar

    虽然W3C标准定义了盒子模型,但早期的IE浏览器(尤其是IE6和IE7)采用了一种不同的实现,称为“怪异盒模型”。这导致了跨浏览器的布局问题。为解决这个问题,可以使用`*{box-sizing:border-box}`进行全局设置,使...

    css盒子模型

    CSS盒子模型有两种类型:W3C标准盒子模型和IE盒子模型(也称为怪异盒模型)。在标准模型中,元素的总宽度和高度等于内容区域加上内边距和边框;而在IE模型中,总尺寸仅包含内容区域,内边距和边框被加到了总宽度和...

    盒子模型练习配套源码.zip

    默认情况下,浏览器使用W3C标准盒子模型,即`width`和`height`属性指的是内容区的尺寸。但也可以通过`box-sizing`属性改变盒子模型,将其设置为`border-box`,使得`width`和`height`包含内边距和边框。 接下来,...

    盒子模型.zip

    在CSS中,盒子模型有两种模式:W3C标准盒模型和IE盒模型。在W3C标准盒模型中,元素的总宽度和高度等于内容的宽度和高度加上内边距和边框;而在IE盒模型(也称为怪异盒模型)中,元素的总宽度和高度只包括内容的宽度...

    w3c W3school文档—Web全部标记元素

    【标题】"w3c W3school文档—Web全部标记元素"揭示了这是一份关于Web前端开发的重要参考资料,特别关注HTML、CSS、JavaScript以及AJAX等技术的标记元素。W3School是知名的在线学习平台,它提供的文档通常涵盖了Web...

    21.4 CSS 盒子模型

    CSS盒子模型有两种不同的解析方式:标准盒模型(W3C Box Model)和IE盒模型(IE Quirk Mode)。在标准盒模型中,元素的总宽度和高度计算公式为:内容宽度/高度 + 内边距左右/上下 + 边框左右/上下 + 外边距左右/上下...

    06 盒子模型.zip

    盒子模型有两种不同的解析方式:W3C标准盒模型和IE盒模型(也称为怪异盒模型)。在W3C标准中,元素的总宽度和高度仅包含内容区域加上边框和内边距,而外边距不影响总尺寸。但在IE盒模型中,元素的总尺寸包括内容、内...

    DIV CSS 盒子模型PPT演讲.zip

    `则是传统的W3C标准行为,总尺寸包括内容、内边距和边框。 通过理解和熟练运用盒子模型,我们可以更精确地控制网页元素的大小和位置,实现灵活多样的布局效果。在实际应用中,配合浮动(float)、定位(position)...

    css盒子模型图解

    标准W3C盒子模型是当前广泛使用的盒子模型标准,它规定了元素的总宽度和高度是由内容、内边距和边框的宽度决定的,不包括外边距。 ##### 示例说明 假设一个元素具有以下属性: - Margin(外边距):20px - Border...

    css学习 盒子模型 css基础

    了解盒子模型后,我们还需要关注盒模型的两种类型:标准盒模型(W3C Box Model)和IE盒模型(IE Box Model,又称怪异盒模型)。在标准盒模型中,元素的总宽度和高度仅由内容宽度和高度加上内边距和边框决定,而在IE...

    css 盒子模型彻底解析

    W3C标准盒模型中,元素的宽度和高度仅包含内容区域,不包括内边距和边框,而在IE盒模型中,元素的宽度和高度包含了内容、内边距和边框。 理解CSS盒子模型有助于实现更加灵活和响应式的网页设计。例如,通过调整内...

    学习html 代码来自w3c.zip

    学习html 代码来自w3c学习html 代码来自w3c学习html 代码来自w3c 学习html 代码来自w3c学习html 代码来自w3c学习html 代码来自w3c 学习html 代码来自w3c学习html 代码来自w3c学习html 代码来自w3c 学习html 代码来自...

Global site tag (gtag.js) - Google Analytics