offset系列浅析

最新推荐文章于 2024-03-21 17:42:38 发布

孤枫_J

最新推荐文章于 2024-03-21 17:42:38 发布

阅读量1.4k

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/qq_35809245/article/details/53981843

版权

HTML+CSS 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

一先看定义：

1 offsetParent:HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table 元素对象或根元素（标准模式下为 html；quirks 模式下为 body）。当元素的 style.display 设置为 “none” 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的
2 offsetLeft:HTMLElement.offsetLeft 是一个只读属性，返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。
3 offsetWidth offsetHeight 指的是当前元素的边框大小，包括content(height,width)+padding+border

二看一下代码解释：

    <style>
        *{
            margin:0 ;
            padding: 0 ;
        }
        #bigdv {
            margin-left: 150px;
            margin-top: 50px;
            padding-left: 17px;
            padding-top: 23px;
            width: 300px;
            height: 300px;
            background-color: green;
            border:30px red solid;
            /*position: absolute;*/
        }
        #dv {
            margin-left: 100px;
            margin-top: 100px;
            padding-left: 13px;
            padding-top: 12px;
            width: 100px;
            height: 100px;
            background-color: pink;
            border:10px red solid;
            /*position: absolute;*/
        }
    </style>

    <body>
        <div id="bigdv">
            <div id="dv"></div>
        </div>
    </body>

第一种情况，子级元素和父级元素都没有定位：此时内部的盒子的 offsetLeft值是 297 ；offsetTop 值是 203；offsetWidth 133 ,offsetHeight 132;(也就是包含当前 dv 元素的不是定位元素，那么是 dv 的盒子边界（border边界）是相对于根元素边界的距离
第二种情况，如果父级元素定位了，子级元素没有定位：此时内部的盒子的 offsetLeft值是 117 ；offsetTop 值是 123；offsetWidth 133 ,offsetHeight 132;（也就是说，此时盒子是相对于当前元素的父元素（因为父元素定位了，不在相对于根元素）的边界，相对的是父元素盒子的border内边界的距离）
第三种情况，如果父元素定位了，子元素也定位了，并且改变了子元素的定位 left top 值：(如果不设置left和top那么offsetLeft和offsetTop还是117 123）

#dv {
        margin-left: 100px;
        margin-top: 100px;
        padding-left: 13px;
        padding-top: 12px;
        width: 100px;
        height: 100px;
        background-color: pink;
        border:10px red solid;
        position: absolute;
        left: 10px;
        top:10px;
    }

此时内部的盒子的 offsetLeft值是 110 ；offsetTop 值是 110；offsetWidth 133 ,offsetHeight 132;

第四种情况，父元素没有定位，子元素定位：

#dv {
        margin-left: 100px;
        margin-top: 100px;
        padding-left: 13px;
        padding-top: 12px;
        width: 100px;
        height: 100px;
        background-color: pink;
        border:10px red solid;
        position: absolute;

    }

此时内部的盒子的 offsetLeft值是 297 ；offsetTop 值是 203；offsetWidth 133 ,offsetHeight 132;

如果设置了子元素定位的 left 和 top

#dv {
        margin-left: 100px;
        margin-top: 100px;
        padding-left: 13px;
        padding-top: 12px;
        width: 100px;
        height: 100px;
        background-color: pink;
        border:10px red solid;
        position: absolute;
        left: 10px;
        top: 10px;
    }

内部的盒子的 offsetLeft值是 110 ；offsetTop 值是 110；offsetWidth 133 ,offsetHeight 132;

三：其实offset系列问题也不难，主要需要理解两点：

1 子元素的定位基准问题，参考http://blog.csdn.net/qq_35809245/article/details/53637512
2 offsetLeft指的是子元素的边界，相对于父元素的边界，这两个边界到底指哪里
其实归根到底总结为两种情况，
a 如果父级元素没有定位，那么子元素的offsetLeft指的是子元素的 (content +padding+border)的border外边界相对于根元素 body 的边界的距离
b 如果父级元素有定位，那么子元素的 offsetLeft 指的是子元素的（content+padding+border)的border边界距离父元素* border 内边界的距离，如果没有border 则是相对于父元素的padding外边界*的距离。

四 offsetWidth 和 offsetHeight 指的是当前元素的 content+padding+border 的宽度和高度

大家仔细琢磨一下吧。