公式:当前元素某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 许可协议。转载请注明出处!