2022-09-19CSS00
请注意,本文编写于 634 天前,最后修改于 626 天前,其中某些信息可能已经过时。

你知道 CSS 中不同属性设置为百分比%时对应的计算基准?

公式:当前元素某CSS属性值 = 基准 * 对应的百分比
元素的 position 为 relative 和 absolute 时,top和bottom、left和right基准分别为包含块的 height、width
元素的 position 为 fixed 时,top和bottom、left和right基准分别为初始包含块(也就是视口)的 height、width,移动设备较为复杂,基准为 Layout viewport 的 height、width
元素的 height 和 width 设置为百分比时,基准分别为包含块的 height 和 width
元素的 margin 和 padding 设置为百分比时,基准为包含块的 width(易错)
元素的 border-width,不支持百分比
元素的 text-indent,基准为包含块的 width

元素的 border-radius,基准为分别为自身的height、width
元素的 background-size,基准为分别为自身的height、width
元素的 translateX、translateY,基准为分别为自身的height、width
元素的 line-height,基准为自身的 font-size

元素的 font-size,基准为父元素字体

感谢广东一位小伙伴的回答

场景: wrap包含par包含cont

分析:

absolute准确的说是基于包含absolute的最近的非静态定位的块来定位。

如果par是静态定位(即不写定位或者position: static),wrap是非静态定位,如position: relative,那么cont设置绝对定位时,是相对wrap来定位的,百分比基准自然也是相对于wrap。如果包含cont的所有块都是静态定位,那么cont将相对于body进行定位。 fixed也并不基于浏览器的窗口宽高来定位的,如果包含某个fixed的块的最近的祖先有设置transform,如平移translate或旋转rotate,那么fixed的块将相对于这个祖先开始定位。

本文作者:前端小毛

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!