transform: translate()

  一个用于动画/过渡的不可思议的属性，它也支持百分比值。然而，这个属性并不指其包含的块，而是指其自身。

  来个例子：

  代码如下：

  <pre class="cm-s-default" style="color:rgb( 89 , 89 , 89 );margin:0px;padding:0px;a href='https://www.veimoz.com/attachment/1291/' title='image-20230316022657830.png' target='_blank'background/a:none 0% 0% / auto repeat scroll padding-box border-box rgba( 0 , 0 , 0 , 0 )">

css百分比

.parent {
    background: #eaeaea;
    width: 300px;
    height: 200px;
}

.child {
    background: red;
    width: 100px;
    height: 50px;
    transform: translate(50%, 50%);
}

.parent {
    [position][5]: relative;
}

.grandparent {
    position: relative;
}

.grandparent::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: radial-gradient(circle at 1px 1px, #000 2px, transparent 0);
    [background-size][6]: 49.5px 49.5px;
}

  在这个事例中：

  父级 div 的大小为 6x4。

  子 div 的大小为 2x1，使用 transform: translate(50%， 50%)

  最后结果，子 div 被定位在离父 div 的顶部边缘 0.5 个单位的位置（自身高度的 1/2），并被定位在离父 div 的左侧边缘 1 个单位的位置（自身宽度的 1/2）。

  background-size

  background-size 属性将百分比单元的复杂性提升到一个新的水平

  此属性的百分比值指的是背景定位区域css字体百分比，类似于包含块，但添加了以下 3 个因素：

  这三个值是由 background-origin 给出，具体看 MDN。

  来个例子：

  代码如下：

  <pre class="cm-s-default" style="color:rgb( 89 , 89 , 89 );margin:0px;padding:0px;background:none 0% 0% / auto repeat scroll padding-box border-box rgba( 0 , 0 , 0 , 0 )">

css百分比

.parent {
    background: #eaeaea;
    width: 300px;
    height: 200px;
}

.child {
    background-image: url(https://media.mybj123.com/wp-content/uploads/2021/09/1632706681-f60540cafc9989b.png);
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-color: red;
    width: 50%;
    height: 50%;
}

.parent {
    position: relative;
}

.grandparent {
    position: relative;
}

.grandparent::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: radial-gradient(circle at 1px 1px, #000 2px, transparent 0);
    background-size: 49.5px 49.5px;
}

  在这个例子中:

  父 div 的大小为 6x4

  子 div 的大小为 3x2，没有 padding，没有 border

  这里使用了一个DEV logo(比例为 1:1 )作为子 div 的背景图像，背景大小属性设置为 50% 50%

  其结果是，背景图像被拉伸为 1.5 x 1 的大小。

  background-position

  与 background-size 类似，background-position 属性的百分比也依赖于背景定位区域。

  来个例子：

  代码如下：

  <pre class="cm-s-default" style="color:rgb( 89 , 89 , 89 );margin:0px;padding:0px;background:none 0% 0% / auto repeat scroll padding-box border-box rgba( 0 , 0 , 0 , 0 )">

css百分比

.parent {
    background: #eaeaea;
    width: 300px;
    height: 200px;
}

.child {
    background-image: url(https://d2fltix0v2e0sb.cloudfront.net/dev-rainbow.png);
    background-size: 50% 50%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-color: red;
    width: 50%;
    height: 50%;
}

.parent {
    position: relative;
}

.grandparent {
    position: relative;
}

.grandparent::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: radial-gradient(circle at 1px 1px, #000 2px, transparent 0);
    background-size: 49.5px 49.5px;
}

  在这个例子中:

  在本例中，使用了与前面相同的图像和布局。当我们改变background-position的值时，可以看到一些变化：

  如果没有任何值(默认值为0 0)，背景图像将位于左上角。

  使用 background-position: 0 50%，背景图片被定位在左边中间。

  使用 background-position: 50% 50%css字体百分比，背景图片被定位在中心。

  使用 background-position: 100% 100%，背景图片被定位在右下方。

  注意： background-position: 0 50% 是下面的缩写：

  background-position-x: 0

  background-position-y: 50%

  显然，这个属性的百分比背后有一些计算，而不仅仅是图像的顶部和左侧边缘与孩子的距离。通过一些研究和测试，似乎 background-position 属性在产生一个实际值之前依赖于以下计算。

  offset X = (容器的宽度-图像的宽度) * background-position-x

  offset Y = (容器的高度-图像的高度) * background-position-y

  在这种情况下：

  容器作为子 div

  图像的宽度/高度是 background-size 的结果。

  font-size

  对于 font-size ，百分比值仅指向它的直接父块。

  来个例子：

  代码如下：

  <pre class="cm-s-default" style="color:rgb( 89 , 89 , 89 );margin:0px;padding:0px;background:none 0% 0% / auto repeat scroll padding-box border-box rgba( 0 , 0 , 0 , 0 )">

css百分比

    font-size: 13px
    
        font-size: 26px
        font-size: 50%
        
    

.grandparent {
    position: relative;
    background: #eaeaea;
    width: 200px;
    height: 200px;

    font-size: 13px;
}

.parent {
    background: #aaa;
    width: 100px;
    height: 100px;

    font-size: 26px;
}

.child {
    position: absolute;
    background: red;
    color: #fff;
    width: 50%;
    height: 50%;
    top: 25%;
    left: 25%;

    font-size: 50%;
}

  在这个例子中，我使用与第一个例子相同的布局，字体大小分配如下。

  我们可以清楚地看到，child 的字体大小现在与 grandparent 一样，是 parent 的1/2。

  结语

  以上就为“CSS 各种百分比是基于什么工作的？”的全部内容，希望大家阅读后能有所收获。