计算元素的位置

最新推荐文章于 2024-07-30 12:42:42 发布

神影天初

最新推荐文章于 2024-07-30 12:42:42 发布

阅读量808

点赞数 1

分类专栏： css 文章标签： html html5

本文链接：https://blog.youkuaiyun.com/qq_35134066/article/details/108427653

版权

本文介绍了HTML元素位置计算，包括定位元素与普通元素的区别，滚动元素的特性。屏幕信息通过window.screen获取，元素位置有client、scroll和offset三种前缀。getBoundingClientRect()方法返回元素相对于视口的位置，而document.documentElement和document.body分别代表HTML根元素和body元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

元素位置的计算主要是一个相对的概念, 相对于父级元素, 相对于父级定位元素, 相对于body等.

所以元素分为了定位元素(position: 不是static)和普通元素(postion: static)

滚动元素是普通元素的一种, 由于父级元素框架限制, 而内容溢出导致的

首先说一下屏幕, window.screen返回的对象就是你的屏幕信息参数

{
    availHeight: 834,
    availLeft: 0,
    availTop: 0,
    availWidth: 1536,
    height: 864,
    width: 1536,
    colorDepth: 24,  // 颜色深度, 这是css兼容要求的最大值
    pixelDepth: 24,  // 屏幕的位深度/色彩深度, 这是css兼容要求的最大值
    orientation: {
        angel: 0,  // 屏幕的旋转角度
        // 一般分为四种: 
        // 正常("landscape-primary"), 
        // 顺时针或逆时针旋转90°("portrait-primary", "portrait-secondary"), 
        // 旋转180°("landscape-secondary")
        type: "landscape-primary"
    }
}

带有avail前缀的是不包含半永久或永久界面的(比如window的底部任务栏), 所以可以看到availHeight比height低就是因为少了任务栏. availLeft和availTop指的是左上角的坐标参数(这也是不包含半永久或永久界面的), 如果把底部任务栏变成左侧任务栏, 结果就会产生变化.

上面也说过元素位置分成三种普通的、滚动的和定位的

所以有三种不同的前缀client、scroll和offset, 除了前缀