标签的占位

                标签的占位

                css样式中 盒子模型属性 决定一个标签的占位

                标签对象.offsetWidth

                标签对象.offsetHeight

                    内容 + padding + border

  // 获取标签对象
        var oDiv = document.querySelector('div');
        var oP = document.querySelector('p');

        // 获取 div标签的占位 

        // offsetWidth   offsetHeight 
        // 内容 + padding + border
        // 实际获取的就是div和p标签的宽
        console.log( oDiv.offsetWidth );
        console.log( oDiv.offsetHeight );

        console.log( oP.offsetWidth );
        console.log( oP.offsetHeight );

               

                 标签对象.clientWidth

                标签对象.clientHeight

                    内容 + padding

// clientWidth   clientWHeight 
        // 内容 + padding 
        console.log( oDiv.clientWidth );
        console.log( oDiv.clientHeight );

        console.log( oP.clientWidth );
        console.log( oP.clientHeight );

               

                标签对象.clientTop

                标签对象.clientLeft

                    上 左 边框线宽度

    // clientTop   clientLeft 
        // 上 左 边框线的宽度
        console.log( oDiv.clientTop );
        console.log( oDiv.clientLeft );

        console.log( oP.clientTop );
        console.log( oP.clientLeft  );

 

                标签对象.offsetTop

                标签对象.offsetLeft

                    当前标签 距离 JavaScript定位父级的间距

                    定位父级是谁 存储在 标签对象.offsetParent 属性中

   // 定位父级
        console.log( oP.offsetParent ) ;

        console.log( oP.offsetTop ) ;
        console.log( oP.offsetLeft ) ;

                    标签没有父级 / 父级没有定位

                       定位父级是      body 也就是 html文档

                    标签有父级 并且 父级有定位属性

                        定位父级是      父级标签

                    标签有固定定位

                        定位父级是      null 也就是 视窗窗口

                标签如果是 display:none 标签没有占位