获取元素实际宽高需按需求选择api：offsetwidth/offsetheight得含padding和border的占位尺寸；getboundingclientrect()提供视口相对的高精度尺寸；getcomputedstyle()可拆解各盒模型部分值，但需结合box-sizing处理content区域。
获取元素的实际宽高和盒模型尺寸，关键看你想拿哪部分：内容区大小、含内边距的尺寸、含边框的尺寸，还是整个占据空间（含外边距）？不同场景要用不同 API，选错就容易出偏差。
用 offsetWidth / offsetHeight 获取“占位尺寸”
这是最常用也最直观的方式，返回的是元素在页面中实际占用的像素值（四舍五入到整数），包含：
– 内容宽度/高度
– 内边距（padding）
– 边框（border）
– 但不包括外边距（margin）和滚动条（滚动条会从内容区扣除，不影响 offset 值）
适合判断元素是否“撑开”了布局、做简单尺寸比对或兼容性要求高的场景。
- 值是只读的，实时反映渲染后的结果
- 触发同步布局计算（强制重排），频繁调用影响性能
- 对 display: none 的元素返回 0；visibility: hidden 则正常返回
用 getBoundingClientRect() 获取相对视口的精确位置与尺寸
返回一个 DOMRect 对象，包含 left、top、right、bottom、width、height —— 其中 width 和 height 是浮点数，精度更高，且已自动处理缩放、CSS transform 等视觉变换的影响。
注意：它返回的是相对于当前视口（viewport）左上角的位置，不是相对于父容器；width/height 与 offsetWidth/offsetHeight 在无缩放、无 transform 时通常一致，但更可靠。
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 同样包含 content + padding + border
- 支持 sub-pixel 精度，比如 100.375px
- 适用于需要定位弹层、计算滚动锚点、做可视区域判断等
- 也会触发重排，但比反复读 offset 更推荐（一次调用可取多个值）
用 getComputedStyle() 拆解盒模型各部分
如果你想分别拿到 content、padding、border、margin 的具体值（尤其是带单位的原始声明值），就得靠它。返回的是 CSSStyleDeclaration 对象，所有值都是字符串（如 "12px"、"0.5em"、"auto"）。
适合做样式分析、动态计算 content 区域、适配不同 box-sizing 的逻辑。
- 返回的 width/height 是 CSS 声明值（可能是 "auto"、"100%"），不是实际像素，需结合 offset 或 getBoundingClientRect 转换
- paddingTop、borderLeftWidth 等属性名要驼峰化
- 对伪元素也可用（第二个参数传 "::before" 等）
- 不触发重排，但读取大量样式仍有一定开销
特别注意 box-sizing 的影响
默认 box-sizing 是 content-box，此时 width/height 只控制 content 区域；设为 border-box 后，width/height 就表示 content + padding + border 的总和。offsetWidth 始终反映最终渲染尺寸，不受 box-sizing 影响 —— 但它背后的计算逻辑已经变了。
所以如果自己手算 content 宽高，必须先读 getComputedStyle(element).boxSizing，再决定要不要减去 padding 和 border。
- content-box：content = width - padding - border
- border-box：content = width - padding - border（即 width 已含 padding 和 border）
- 用 getBoundingClientRect().width 直接得最终宽，省去推算
不复杂但容易忽略：没有一个 API 能直接拿到“纯 content 区域的像素宽高”并自动处理所有边界情况。多数时候，offsetWidth + getComputedStyle 组合使用最稳妥；需要高精度或处理缩放/transform 就选 getBoundingClientRect。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
