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

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


获取大小的属性有
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对应