CSS中百分比单位计算方式整理

整理于：https://www.w3cplus.com/css/a-percentage-unit-in-css.html

1、font-size

相对于父元素的font-size来计算，如果父元素（以及它的祖先元素）未显式设置font-size值的话，将会以浏览器的默认值16px为基准。

2、line-height

基于元素自身的font-size的值来计算。如果元素自身未显式设置font-size，则会基于元素继承过来的font-size的值计算。

3、vatical-align

基于元素自身的line-height值计算。如果元素自身未显式设置line-height的值，那么元素会继承其父元素（或祖先元素）的line-height值。

4、text-inent

CSS的text-indent属性可以让一个块元素首行文本内容的缩进量。有的时候也会使用该方法实现图像替换文本
它的计算是相对于元素块width（或height）计算，如果是逻辑属性的话，相对于inline-size（或block-size）计算。具体相对于width（inline-size）还是height（block-size）取决于CSS的书写模式（即受writing-mode和direction）。

5、width/height

相对于父元素的width/height。

6、magin/padding

相对于父元素的width

元素设置margin-left和margin-right值，而且都同时为正值时，元素自身的空间会被margin-left和margin-right挤压，当margin-left和margin-right两个属性的值之和等元素元素width时，该元素将在视图中不可见

元素margin-right的值为正值时且大到一定的值（一般容器剩余空间），那么将会挤压元素自身的width

7、position

当元素position的取值为relative或absolute时，那么元素的偏移属性的%值计算相对于离元素最近的设置了position为非static的元素的width和height。其中top和bottom相对于height计算；left和right相对于width计算。

如果元素的position显式设置值为sticky，那么偏移属性取%值的计算是相对于相关的滚动端口（Scrollport）的大小计算
滚动端口（Scrollport）是指文档（Document）中滚动容器（Scroll Container）的可视窗口。显式给元素设置overflow: scroll或overflow: auto（在内容足够导出溢出时产生）可以创建滚动容器。

8、border-radius

在border-radius使用%值时，它计算的相对值是需要分开来算的，其中 x轴的%值相对于元素的width值计算；y轴的%值相对于元素的height值计算

border-radius计算器-https://codepen.io/airen/pen/gOrOVwv

9、border-image

border-image也是一个简写属性，它的子属性有 border-image-source、 border-image-slice、 border-image-width、 border-image-outset 和 border-image-repeat。其中border-image-slice和border-image-width取值也可以是%

相对于border-image-source引入的图像源尺寸进行计算，其中x方向相对于图像的width计算，y方向相对于图像的height计算

10、background-position

• 水平方向（x轴），相对于元素的width与背景图片的width差 background-position-x=(容器w-图片w)*百分比
• 垂直方向（y轴），相对于元素的height与背景图片的height差 background-position-y=(容器h-图片h)*百分比
  特别声明，背景图片的大小将会受background-size值的影响，上面提到的图片的尺寸是指backgroud-size的值为100% 100%的情景下的尺寸，即背景图片的初始尺寸（原始尺寸）。

11、background-size

background-size的第一个值是x轴方向，其计算相对于元素的width计算；background-size的第二个值是y轴方向，其计算相对于元素的height计算。

12、渐变中的%

linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradient()、repeating-radial-gradient()和repeating-conic-gradient()。在这些属性的运用中也能看到%的身影，其中设置颜色位置可以用%，而且在径向渐变和锥形渐变的圆心位置也可以使用%

径向渐变和锥形渐变的圆心位置的%分为x轴和y，其中x轴是相对于元素的width计算，y轴是相对于元素的height计算

13、object-position

object-fit 取none时
x ⇒ (容器宽度 - 图片宽度) x 百分比值
y ⇒ (容器高度 - 图片高度) x 百分比值

14、clip-path

clip-path: inset( {1,4} [round ]? )
clip-path: circle( []? [at ]? )
clip-path: ellipse( [{2}]? [at ]? )
clip-path: polygon( [,]? [ ]# )

inset()中的和
其中的使用和margin属性类似，的使用border-radius类似。
中的top和bottom相对于元素的height计算；right和left相对于元素的width计算。
中的%值计算方式和前面介绍的border-radius相同。

circle()中的和：
的%计算是相对于半径r值计算，circle()的r的计算是相对于参考框（Reference Box）的width和height来计算，具体的计算公式如下：

即：

r = Math.sqrt(Math.pow(800, 2) + Math.pow(400, 2)) / Math.sqrt(2) = 632.4555320336758px

circle()中的的%值是相对于元素的width和height值计算，其中第一个值是x轴，其相对于width计算，第二个值是y轴的值，相对于元素的height

ellipse()中的相比于circle()中的要简单地多，ellipse()中的半径分rx和ry，其中rx取%是相对于元素的width计算；ry取%是相对于元素的height计算。对于而言，和circle()中的相同。

15、路径动画中的%

offset-distance取值为%值时，它的计算是相对于偏移路径的长度（也就是偏移路径的初始位置和结束位置之间的距离）。

offset-position的计算方式可以参考background-position的方式。

offset-anchor取%值时，它的计算是根据运动物体（元素）的width和height来计算，其中x相对于width计算，y相对于height计算。比如我们所说的(50%, 50%)指的就是我们常说的center（或者center center）。

16、transform

transform中的translateX()和translateY()取%值时，它的计算是相对于元素自身的width和height