在CSS中，百分比（%）单位通常用于表示相对于某个参考值的比例。平时用的最多可能就是宽高了，做响应式设计可能会用到、也比较具有灵活性，在使用时候要明确其值相对于哪个属性，不然就乱套了。
以下是一些常见的使用百分比单位的CSS属性，以及它们的基准值：
基准值：元素的父元素的宽度或高度。
描述：将元素的宽度或高度设置为父元素相应尺寸的百分比值。
-
基准值：元素的宽度（对于左右外边距和内边距）或高度（对于上下外边距和内边距）。但请注意，百分比值的外边距和内边距是相对于包含块的宽度计算的，而不是元素的宽度或高度。
-
描述：设置元素边框与相邻元素之间的空间或元素边框与内部内容之间的空间。
字体大小（font-size）
-
基准值：父元素的字体大小。
-
描述：设置文本字体的大小。
行高（line-height）
-
基准值：当前元素的字体大小。
-
描述：设置文本行之间的垂直间距。
视窗宽度单位（vw）和视窗高度单位（vh）
-
基准值：视窗（viewport）的宽度或高度。
-
描述：这些单位允许你设置相对于浏览器视窗的尺寸。例如，1vw 等于视窗宽度的1%，1vh 等于视窗高度的1%。
视窗最小单位（vmin）和视窗最大单位（vmax）
-
基准值：视窗的宽度和高度中的较小值（vmin）或较大值（vmax）。
-
描述：这些单位允许你基于视窗的较小或较大尺寸来设置元素的尺寸。
边框宽度（border-width）
-
虽然CSS规范允许边框宽度使用百分比单位，但实际上它通常不会按预期工作，因为百分比边框宽度是基于包含块的宽度来计算的，而不是元素的宽度。因此，在实际开发中，边框宽度很少使用百分比单位。
flex-basis、flex-grow 和 flex-shrink（在Flexbox布局中）
-
百分比值在这些属性中的基准取决于具体的上下文和使用情况。
-
这些属性用于控制flex容器中的子元素的尺寸和缩放。
grid-template-columns、grid-template-rows 等（在Grid布局中）
-
百分比值在Grid布局中的基准也取决于具体的上下文和使用情况。
-
这些属性用于定义Grid容器的行和列的尺寸。
transform: scale()
- 百分比值：在scale()函数中，百分比值用于定义元素的缩放比例。例如，transform: scale(1.5);会使元素放大到原来的1.5倍，而transform: scale(50%);则会使元素缩小到原来的一半。
- 百分比值：在定义transform-origin属性时，百分比值用于确定变换的基点相对于元素本身的位置。例如，transform-origin: 50% 50%;将使变换的基点位于元素的中心。
- 百分比值：在多列布局中，column-width属性可以使用百分比值来定义列的最小宽度。这个百分比值是相对于包含块的宽度来计算的。
- 虽然column-count属性本身不接受百分比值，但结合其他属性（如column-gap、column-width等）时，可以间接影响列的布局和尺寸，从而实现类似百分比的效果。
- 在定义盒子阴影时，百分比值可以用于定义阴影的扩展半径（spread-radius）。这个百分比值是相对于阴影的大小来计算的。但需要注意的是，这种用法相对少见，因为阴影的大小通常使用固定的长度单位（如px）来定义。
- 百分比值：在定义边框图片切片时，百分比值用于确定边框图片的各个部分（上、右、下、左）相对于原始图片的尺寸。这些百分比值是相对于原始图片的宽度和高度的。
需要注意的是，虽然这些属性支持百分比单位，但在实际开发中，它们的使用频率和适用场景可能因项目需求和设计目标而有所不同。因此，在选择使用百分比单位时，最好根据具体情况进行权衡和测试。
