CSS中的百分比(%)都是相对于谁的百分比?

2018/01/15

一. 相对于包含块、父级继承的

  • 相对于包含块宽度的:(max/min)width left right text-indent padding margin
  • 相对于包含块高度的:(max/min)height top bottom
  • 相对于继承字号的:font-size

注意:

  1. margin 和 padding 不论是margin-top还是margin-left,都是相对于包含块的宽度计算的,这点容易犯错。
  2. 包含块并不一定是父级元素,对于static定位和reletive定位,包含块一般就是其父元素。但是对于absolute定位的元素,包含块应该是离它最近的 position 为 absolute、relative、或者 fixed 的祖先元素。对fixed定位的元素,它的包含块是视口。

二. 相对于自身的

  • 相对于自身字号的:line-height
  • 相对于自身宽高的:border-radius background-size transform: translate() transform-origin
  • 相对于自身行高的:vertical-align

注意:

  1. line-height 的 百分比写法(150%)和无单位写法(1.5)对于自身并无区别,均相对于自身字号。区别在于对其子元素的影响不同。百分比写法会用子元素字号进行百分比计算;无单位写法会先用自身字号进行计算,子元素直接继承计算结果值。

三. 其他特殊情况

  • 特殊算法的:background-position 左上角固定为0% 0%,右下角固定为100% 100%

文章导航