CSS学习笔记——百分比相对于谁

参考：
https://blog.csdn.net/qq_44472722/article/details/105512621
https://blog.csdn.net/weixin_42182143/article/details/103161838
https://blog.csdn.net/qq_41633396/article/details/117352112
https://zhuanlan.zhihu.com/p/35530720

1.第一类——定位类

CSS中的定位分为四种，默认值 static ，相对定位 relative ，绝对定位 absolute 还有固定定位 fixed 。对于位置属性top、bottom 、left、right采用百分比形式，这四种不同定位的百分比参照物如下：

• static：position的默认值，并没有对元素起到定位的作用，所以left、right等位置属性并不能被有效赋值，不存在定位功能上的%值。
• absolute：相对于最近一层的设置了定位的父元素（除去static），left和right相对于width，top和bottom相对于height。
• relative：相对于自身定位，即位置值相对于自身的宽高。
• fixed：相对于视窗定位，即参照物为视窗。

2.第二类——盒子模型

盒子模型中常见的属性值：width、height、padding、margin、border。

• width和height：相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height。
• margin和padding：不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。
• border-radius：相对于自身的宽度。

3.第三类——背景值

• background-size：相对于自身的宽高。
• background-position：相对于自身的宽高值减去背景图片的宽高值所得到的剩余值。因此，属性值"center center"和"50% 50%"是等价的，即如果设置了后者，背景图片会自动居中，不需要像定位那样还要transform偏移。

4.第四类——transform和zoom

• transform:translate()：相对于自身的宽高。
  在CSS3中还有translate3d()，表示在指定方向上进行2d偏移，是相对于自身的宽高。而transform3d()的第三个属性，指的是在z轴上的偏移，因为z-index的默认值是auto，所以%值并不能起作用，也就是说对translateZ()赋予百分比的值是无意义的。
• transform-origin：相对于自身的宽高。
• zoom：相对于自身的宽高。

5.第五类——字体

• font-size：相对于直接父元素的字体大小。
• line-height：相对于自身的字体大小。
• text-indent：相对于直接父亲元素的宽度。

总结

• 相对于父元素相关：
  position:absolute的top/bottom/right/left
  width和height
  margin和padding
  font-size
  text-indent

• 相对于自身相关：
  position:relative的top/bottom/right/left
  border-radius
  background-size
  background-position（自身宽高 - 背景图片宽高）
  transform:translate()
  transform-origin
  zoom
  line-height