css中涉及到的百分比

CSS百分比主要用于定义尺寸、位置、长度等，可以用来指定元素的大小、空间等。

1. 宽度和高度可以用百分比设定：

div {
  width: 50%;  /* 宽度是父元素宽度的50% */
  height: 20%; /* 高度是父元素高度的20% */
}

2. 对于位置属性（如top, right, bottom, left），也可以使用百分比来设定：

div {
  position: absolute;
  top: 10%;    /* 距离顶部10%的位置 */
  left: 20%;   /* 距离左边20%的位置 */
}

3. 在transform: translate()中，也可以使用百分比设定：

div {
  transform: translate(50%, 100%); /* 向右移动自身宽度的50%，向下移动自身高度的100% */
}

4. 在flex布局中，也可以使用百分比设定flex项目的占用空间：

.container {
  display: flex;
}
.item {
  flex: 1; /* 等同于flex: 1 1 0; 表示flex项目将会占据可用空间的1/3 */
}

5. 在background-size属性中，也可以使用百分比设定背景图片的尺寸：

div {
  background-image: url('image.jpg');
  background-size: 50% 100%; /* 背景图片宽度是元素宽度的50%，高度是元素高度的100% */
}

6. 在font属性中，也可以使用百分比设定字体大小：

body {
  font-size: 62.5%; /* 将默认字体大小设置为10px，便于后续使用百分比设置更加精确的字体大小 */
}
h1 {
  font-size: 5em;  /* 相当于5*10px=50px */
}

以上都是CSS百分比的应用场景，具体使用哪种取决于你的设计需求。