一. 相对于包含块、父级继承的
- 相对于包含块宽度的:
(max/min)width
left
right
text-indent
padding
margin
- 相对于包含块高度的:
(max/min)height
top
bottom
- 相对于继承字号的:
font-size
注意:
- margin 和 padding 不论是margin-top还是margin-left,都是相对于包含块的宽度计算的,这点容易犯错。
- 包含块并不一定是父级元素,对于static定位和reletive定位,包含块一般就是其父元素。但是对于absolute定位的元素,包含块应该是离它最近的 position 为 absolute、relative、或者 fixed 的祖先元素。对fixed定位的元素,它的包含块是视口。
二. 相对于自身的
- 相对于自身字号的:
line-height
- 相对于自身宽高的:
border-radius
background-size
transform: translate()
transform-origin
- 相对于自身行高的:
vertical-align
注意:
- line-height 的 百分比写法(150%)和无单位写法(1.5)对于自身并无区别,均相对于自身字号。区别在于对其子元素的影响不同。百分比写法会用子元素字号进行百分比计算;无单位写法会先用自身字号进行计算,子元素直接继承计算结果值。
三. 其他特殊情况
- 特殊算法的:
background-position
左上角固定为0% 0%,右下角固定为100% 100%