Layout 相关

Containing block

Layout and the containing block - CSS: Cascading Style Sheets | MDN

The size and position of an element are often impacted by its containing block. Most often, the containing block is the content area of an element's nearest block-level ancestor, but this is not always the case. In this article, we examine the factors that determine an element's containing block.

https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block

Zoom vs Scale

• zoom 是 May 2024 官方新增的 css 属性（之前都是 not standard，ts 也要 5.5 以上版本才支持）。 zoom 会触发 layout计算 (MDN说明)，原因如下：
• zoom 会基于 computed value 进行计算，如果你使用 Element.getBoundingClientRect()/getComputedStyle() 等等实时获取元素大小的 API，发现其数值要么不变（如果你指定了 width/height），或者变得和 zoom 相反的方向（即如果 zoom 大于 1，你用 API 查的元素尺寸会变小），原因是这些 API 计算包含了 zoom 的缩放系数
• 针对上述 computed value 的问题，有一个新属性 currentCSSZoom，可以获取 zoom 缩放系数，并且说明了 computed value 相关 API 失效的原因，但是注意兼容性，截止目前（2024-08-01）很多浏览器还不支持
• zoom的缩放系数会乘以 Doom Tree 路径上所有父元素的 zoom，例如如果有一个父元素 zoom 为 1.1，自己的 zoom 是 1.2，那么实际效果就是
• 用法上， zoom 的缩放中心跟 writing-mode 有关，默认是 top left，对标 transform-origin 的 top left
• 不要使用 zoom: unset ，浏览器兼容性较差

• scale：修改元素宽高 px，不改变 layout，但是可能导致部分子元素受到 overflow 影响，从而布局混乱，例如子元素的 fixed 失效

• 如果尽量希望不出现滚动条，并且不介意 layout 重绘的情况，可以考虑 zoom

• 如果需要根据元素 computed value 计算各种决定定位，建议使用 scale