100%参考点总结


width,height 百分比参考点 为其父元素的宽高

绝对定位position: absolute元素; 其width,height,left,right,top,bottom属性百分比参考点为其位移参考点,即离其最近一个具有定位属性的父元素的width,height。
固定定位position: fixed元素; 其width,height,left,right,top,bottom属性百分比参考点为屏幕的宽高

padding marging 百分比参考点 为其父元素的width

浮动元素的width和height 百分比参考点为其父元素

translate属性的百分比值 是以元素自身的宽高为参考点

background-size 百分比值 是是以元素的宽高为参考点 设置一个值时,另一个值自动缩放

background-position 百分比是根据 (元素的宽度/高度-背景图片的宽度/高度)*百分比 来计算的,所以当background-size:cover时,设置background-position:50% 50% 则是将背景以中心为基准放大。

原文地址:https://www.cnblogs.com/mei123/p/8467212.html