获取大小的属性有
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盒子模型是早期Internet Explorer浏览器所使用的模型,与标准W3C盒子模型相比,IE盒子模型将边框和内边距也计算在元素的宽度和高度之内。 **组成**: - 同标准W3C盒子模型,同样包括content、padding、...
页面布局的W3C盒子模型.ppt
网页设计中的两种主要盒子模型,即W3C盒子模型和IE盒子模型,是理解CSS布局的关键因素。这两种模型在计算元素的实际尺寸时有着显著的区别,从而影响到元素在页面上的表现。 1. W3C盒子模型(标准模型) W3C盒子模型...
在Web开发中,有两种主要的盒子模型:IE盒子模型和标准W3C盒子模型,这两种模型对于元素尺寸的计算方式有所不同,因此对页面布局有着深远的影响。 **标准W3C盒子模型**遵循W3C规范,它将每个HTML元素视为一个矩形...
- **标准盒模型(W3C盒模型)**:内容宽度决定元素总宽度,边框和内填充不包含在内。 - **IE盒模型(怪异盒模型)**:内容宽度加上边框和内填充决定元素总宽度,更符合直觉但与W3C标准不一致。 3. **CSS设置盒...
W3C标准盒模型中,元素的width和height只包括内容区,而IE盒模型则包括内容区、内边距和边框。为了避免浏览器之间的兼容性问题,通常推荐使用W3C标准盒模型,并可以通过`box-sizing`属性来指定盒模型的类型。例如,`...
虽然W3C标准定义了盒子模型,但早期的IE浏览器(尤其是IE6和IE7)采用了一种不同的实现,称为“怪异盒模型”。这导致了跨浏览器的布局问题。为解决这个问题,可以使用`*{box-sizing:border-box}`进行全局设置,使...
CSS盒子模型有两种类型:W3C标准盒子模型和IE盒子模型(也称为怪异盒模型)。在标准模型中,元素的总宽度和高度等于内容区域加上内边距和边框;而在IE模型中,总尺寸仅包含内容区域,内边距和边框被加到了总宽度和...
默认情况下,浏览器使用W3C标准盒子模型,即`width`和`height`属性指的是内容区的尺寸。但也可以通过`box-sizing`属性改变盒子模型,将其设置为`border-box`,使得`width`和`height`包含内边距和边框。 接下来,...
在CSS中,盒子模型有两种模式:W3C标准盒模型和IE盒模型。在W3C标准盒模型中,元素的总宽度和高度等于内容的宽度和高度加上内边距和边框;而在IE盒模型(也称为怪异盒模型)中,元素的总宽度和高度只包括内容的宽度...
【标题】"w3c W3school文档—Web全部标记元素"揭示了这是一份关于Web前端开发的重要参考资料,特别关注HTML、CSS、JavaScript以及AJAX等技术的标记元素。W3School是知名的在线学习平台,它提供的文档通常涵盖了Web...
CSS盒子模型有两种不同的解析方式:标准盒模型(W3C Box Model)和IE盒模型(IE Quirk Mode)。在标准盒模型中,元素的总宽度和高度计算公式为:内容宽度/高度 + 内边距左右/上下 + 边框左右/上下 + 外边距左右/上下...
盒子模型有两种不同的解析方式:W3C标准盒模型和IE盒模型(也称为怪异盒模型)。在W3C标准中,元素的总宽度和高度仅包含内容区域加上边框和内边距,而外边距不影响总尺寸。但在IE盒模型中,元素的总尺寸包括内容、内...
`则是传统的W3C标准行为,总尺寸包括内容、内边距和边框。 通过理解和熟练运用盒子模型,我们可以更精确地控制网页元素的大小和位置,实现灵活多样的布局效果。在实际应用中,配合浮动(float)、定位(position)...
标准W3C盒子模型是当前广泛使用的盒子模型标准,它规定了元素的总宽度和高度是由内容、内边距和边框的宽度决定的,不包括外边距。 ##### 示例说明 假设一个元素具有以下属性: - Margin(外边距):20px - Border...
了解盒子模型后,我们还需要关注盒模型的两种类型:标准盒模型(W3C Box Model)和IE盒模型(IE Box Model,又称怪异盒模型)。在标准盒模型中,元素的总宽度和高度仅由内容宽度和高度加上内边距和边框决定,而在IE...
W3C标准盒模型中,元素的宽度和高度仅包含内容区域,不包括内边距和边框,而在IE盒模型中,元素的宽度和高度包含了内容、内边距和边框。 理解CSS盒子模型有助于实现更加灵活和响应式的网页设计。例如,通过调整内...
学习html 代码来自w3c学习html 代码来自w3c学习html 代码来自w3c 学习html 代码来自w3c学习html 代码来自w3c学习html 代码来自w3c 学习html 代码来自w3c学习html 代码来自w3c学习html 代码来自w3c 学习html 代码来自...