开篇提示：以下内容都经个人测试，参考API文档总结，但还是不能保证完全正确，若有错误，还请留言指出_______________________________________________________________________________________
offset[Parent/Width/Height/Top/Left]
测试代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>测试偏移量</title> <style> *{ margin: 0; padding: 0; } #div1{ width: 500px; height: 400px; margin: 10px; text-align: right; overflow: hidden; /* 暂时用这个来消除浮动和消除边距合并问题*/ background-color: #5ac770; /*position: relative;*/ /* 测试 offsetParent*/ } #div2{ float: left; width: 300px; height: 300px; padding: 15px; margin: 5px 10px; text-align: left; border: 10px solid darkblue; background-color: palevioletred; } </style> </head> <body> <div id="div1"> <div id="div2"> offset[////]<br /><br /> width: 300px;<br /> height:300px;<br /><br /> margin: 5px 10px;<br /> padding: 15px;<br /><br /> border: 10px solid darkblue;<br /> background-color: #5ac770;<br /> </div><br /> margin: 10px;<br /><br /> </div> </body> <script> var div2 = document.getElementById("div2"); console.log("\noffset相关描述 :") console.log("\n渲染模式(BackCompat:怪异模式/CSS1Compat:标准模式) ： " + document.compatMode); console.log("\noffsetParent.nodeName : " + div1.offsetParent.nodeName + "(测试结果与API文档描述不符)"); console.log("HTMLElement.offsetParent 是一个只读属性，\n返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。\n如果没有定位的元素，则 offsetParent 为最近的 table 元素对象或根元素（标准模式下为 html；quirks 模式下为 body）。\n当元素的 style.display 设置为 'none' 时，offsetParent 返回 null。\noffsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。"); console.log("\noffsetWidth : " + div2.offsetWidth + "px " + " //width + padding + border + scroolbar(竖直滚动条，如果存在的话)"); console.log("只读属性，返回一个元素的布局宽度.(各浏览器的offsetWidth可能有所不同"); console.log("\noffsetHeight : " + div2.offsetHeight + "px " + " //height + padding + border + scroolbar(水平滚动条，如果存在的话)"); console.log("只读属性，返回一个元素的布局宽度.(各浏览器的offsetWidth可能有所不同"); console.log("\noffsetTop : " + div2.offsetTop + "px " + "//自身margin:5px + 父元素margin:10px"); console.log("只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。"); console.log("\noffsetLeft : " + div2.offsetLeft + "px " + "//自身margin:10px + 父元素margin:10px"); console.log("只读属性，返回当前元素左上角相对于offsetParent 节点的左边界偏移的像素值。") </script> </html>