CSS 计算中写入的是哪个百分比？

terry 2年前 (2023-09-27) 阅读数 125 #数据结构与算法

0。简介

当我们编写CSS时，我们经常使用责任百分比（%）来实现自对齐。就像我们经常使用的流体布局设计模式一样，所有列宽都以% 来指定。或者比如我们经常遇到的元素水平居中和垂直居中的问题，我们经常使用下面的CSS代码来实现（变点+绝对）：

.wrap {
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

因为你经常使用你肯定知道前两个50 % 表示遮盖的设置是指对象宽高的50%，平移()的50%是指遮盖。毫无疑问，在这简单的三行代码中出现了两个类别。有不同的值，一个与参考框相关，另一个与自身相关。但你认为这些类型的百分比值只存在于 CSS 的世界中吗？一切并不那么简单。下面我列出了不同情况下%值的相关内容，听听我的解释。

1。第一类——定位

一般朋友都知道CSS中有四种定位类型，默认值是static，相对定位是relative，绝对定位是absolute，fixed定位是fixed。虽然每种位置的 % 值的参考对象都不同，但由于它们都具有特定的位置特征，所以我将它们分为一类。下面我讲一下四种不同的位置分类：

static：不用说，位置值没有设置元素，所以位置属性无法有效赋值。像左和右，所以里面没有%值定位功能。
absolute：绝对作为最常用的位置属性之一，给很多初学者挖了无数坑。我相信对于每个人来说，学习一开始都是困难的。不走得太远，完全放置一个元素后，你可以指定一个位置值，例如left。引用是位于父元素中的元素。那么，当然，如果位置值为%，那么与这个%关联的元素就是引用。某物。左右与宽度有关，上下与高度有关。我无需多说。
亲戚：我的朋友一定听说过儿子和父亲的照片，而且一定经常使用。因此，relative设置为自身，因此位置值是相对于宽度和高度的。
fix：这是一个位置特定的值，因为我们知道它对应于一个窗口，所以窗口是自然的参考。

2。第二类——盒子模板

盒子模板中有很多很常见的属性值，大家每天都在使用和看到，它们是：width、height、margin、border、padding、width和非必须的。也就是说，高度是相对于父盒子的。让我们重点关注边距和填充

margin&padding：这两个人很特别。如果设置了%值，它们表示父元素的宽度！！父元素的宽度！！！父元素！！！宽度！！！重要的事情说三遍。如果您不相信我们，我们可以亲自尝试一下。确实很奇怪，但是你真的要记住，开发过程中当你认为这是BUG时不要感到尴尬。我们可以使用这个特殊的 padding 属性来构建不同比例的动画和视频框，例如 16:9 或 4:3。我就是边框。如果您在开发过程中使用 %，请耐心等待。这里要讨论的是边框的宽度，因为边框是一个短字符。事实上，我在骗你。边框宽度当前不允许输入 % 值。目前尚不清楚未来是否可以允许以及由谁来指定。如果输入%值，浏览器将不会渲染它，因此边框没有%值。
边框区域：既然说到边框，就说边框，圆角。通常我们在使用这个属性的时候，一般都会给它赋值4，代表四个角，分别是左上、右上、右下、左下，按顺时针顺序排列。但实际上，边界半径最多可达八。前四个值和后四个值用/分隔。前斜线表示每个角的水平半径，后斜线表示垂直半径。道路的圆角半径。以下是一些示例：

border-radius：top-left|top-right|bottom-right|border-left / top-left|top-right|bottom-right|border-left

3。第三类——背景值

烤箱尺寸：安装背景时经常用到的特征。虽然我们通常会使用容器或者包装器来代替，但是当我们想让背景充满整个盒子时，也会这样写：

background-size:100% 100%;

所以背景尺寸的参考对象，就是盒子本身的宽度和高度。

location-aspect：这个属性类似于relative，也有位置作用，所以指的是第一个盒子。但这个角色却很特别。它并不表示盒子的原始宽度和高度，而是表示原始盒子宽度和高度减去背景图像的宽度和高度得到的残差值。更准确地说，以下两个属性值是等效的：“中点”和“50% 50%”。如果安装后者，背景图片就会在中间，不需要像安装那样改变和调整。这一定是因为好的前辈们在开发这个角色的时候就考虑到了它未来的应用。

4。第四类——transform

translate()：在第一个模块中，我们谈到了这样的属性：translate()。在CSS3中，还有translate3d()。这个属性，大家一定知道什么意思，就是在指定的方向上进行2D的偏移，而它指的就是宽度和高度。 Transform3d() 的第三个属性指定 z 轴上的偏移量。由于 z-index 值是自动的，因此 % 值不是自动的，这意味着百分比值被分配给 translateZ()。没关系。
transform-origin：该属性是元素变换的原点。宽度和高度是一样的，这里就不赘述了。
scale()：控制元素的缩放比例。发送的参数一般是浮点数，表示相对于元素的膨胀或收缩的速率。
zoom：zoom不是transition属性的值，而是一个独立的CSS属性。之所以在transformer模块中讨论它，是因为它具有与scale()相同的属性，其值可以是浮点或%，包括引用对象，这与scale()类似。

5。类别5 - 字体

font：这个属性等于我们的高度，它表示父框中字体的大小。
行高：我们所说的行高也是一个特殊功能。如果赋予它不同类型的值，它就会有不同的特性。如果属性值为非元素数字，则最终结果是该数字与字体大小的乘积。这是设置行高的首选方法，因为字体大小是从祖先元素继承的，通过这种方法设置的值不会导致错误。但如果我们的值是%，那么最终的结果就是给定的百分比值乘以最后计算出的元素的字体大小。
text-indent：该属性用于指定第一行的缩进。我们使用的最长的是2em。第一行包含两个字母。这里的2em指的是字体大小的两倍。按逻辑来说，如果取%的话，应该是与特定字体的大小相匹配的，但是很特别。与 padding 和 margin 一样，如果设置为 %，则指定父元素的宽度。这应该被视为特殊情况。

6。结论

读了一会儿你可能还是一头雾水。为了加深大家的记忆，我根据参考对象的不同类别做一下总结：

与父框相关：

最常见的应该是指父框的属性 Parent (boxed) ，但是有一种特殊情况，指定父框的宽度。这一类只需要分两类来讨论：

与盒子本身相关：

涉及到盒子的属性有很多。所提到的特征通常是自我相关的特征。该类别中的属性值包括：位置相关；盒子模型的边框半径；背景大小；背景空间很特别。请记住，您需要减去背景图像的宽度和高度。可以想到flex布局中flex属性的值；在转换中，translate()、transform-origin、scale() 和缩放属性与我们一直在驱动的转换类似，它们都是不言自明的；行高与字体大小有关，因此它指的是特定的字体大小。