在CSS中，百分比（%）單位通常用于表示相對(duì)于某個(gè)參考值的比例。平時(shí)用的最多可能就是寬高了，做響應(yīng)式設(shè)計(jì)可能會(huì)用到、也比較具有靈活性，在使用時(shí)候要明確其值相對(duì)于哪個(gè)屬性，不然就亂套了。

以下是一些常見的使用百分比單位的CSS屬性，以及它們的基準(zhǔn)值：

1. 寬度（width）和高度（height）

基準(zhǔn)值：元素的父元素的寬度或高度。

描述：將元素的寬度或高度設(shè)置為父元素相應(yīng)尺寸的百分比值。

2. 外邊距（margin）和內(nèi)邊距（padding）

• 基準(zhǔn)值：元素的寬度（對(duì)于左右外邊距和內(nèi)邊距）或高度（對(duì)于上下外邊距和內(nèi)邊距）。但請(qǐng)注意，百分比值的外邊距和內(nèi)邊距是相對(duì)于包含塊的寬度計(jì)算的，而不是元素的寬度或高度。
• 描述：設(shè)置元素邊框與相鄰元素之間的空間或元素邊框與內(nèi)部?jī)?nèi)容之間的空間。

3. 字體大小（font-size）
   

• 基準(zhǔn)值：父元素的字體大小。
• 描述：設(shè)置文本字體的大小。

4. 行高（line-height）
   

• 基準(zhǔn)值：當(dāng)前元素的字體大小。
• 描述：設(shè)置文本行之間的垂直間距。

5. 視窗寬度單位（vw）和視窗高度單位（vh）
   

• 基準(zhǔn)值：視窗（viewport）的寬度或高度。
• 描述：這些單位允許你設(shè)置相對(duì)于瀏覽器視窗的尺寸。例如，1vw 等于視窗寬度的1%，1vh 等于視窗高度的1%。

6. 視窗最小單位（vmin）和視窗最大單位（vmax）
   

• 基準(zhǔn)值：視窗的寬度和高度中的較小值（vmin）或較大值（vmax）。
• 描述：這些單位允許你基于視窗的較小或較大尺寸來(lái)設(shè)置元素的尺寸。

7. 邊框?qū)挾龋╞order-width）
   

• 雖然CSS規(guī)范允許邊框?qū)挾仁褂冒俜直葐挝?，但?shí)際上它通常不會(huì)按預(yù)期工作，因?yàn)榘俜直冗吙驅(qū)挾仁腔诎瑝K的寬度來(lái)計(jì)算的，而不是元素的寬度。因此，在實(shí)際開發(fā)中，邊框?qū)挾群苌偈褂冒俜直葐挝弧?/li>

8. flex-basis、flex-grow 和 flex-shrink（在Flexbox布局中）
   

• 百分比值在這些屬性中的基準(zhǔn)取決于具體的上下文和使用情況。
• 這些屬性用于控制flex容器中的子元素的尺寸和縮放。

9. grid-template-columns、grid-template-rows 等（在Grid布局中）
   

• 百分比值在Grid布局中的基準(zhǔn)也取決于具體的上下文和使用情況。
• 這些屬性用于定義Grid容器的行和列的尺寸。

10. transform: scale()
    

• 百分比值：在scale()函數(shù)中，百分比值用于定義元素的縮放比例。例如，transform: scale(1.5);會(huì)使元素放大到原來(lái)的1.5倍，而transform: scale(50%);則會(huì)使元素縮小到原來(lái)的一半。

11. transform-origin

• 百分比值：在定義transform-origin屬性時(shí)，百分比值用于確定變換的基點(diǎn)相對(duì)于元素本身的位置。例如，transform-origin: 50% 50%;將使變換的基點(diǎn)位于元素的中心。

12. column-width（多列布局）

• 百分比值：在多列布局中，column-width屬性可以使用百分比值來(lái)定義列的最小寬度。這個(gè)百分比值是相對(duì)于包含塊的寬度來(lái)計(jì)算的。

13. column-count（多列布局）

• 雖然column-count屬性本身不接受百分比值，但結(jié)合其他屬性（如column-gap、column-width等）時(shí)，可以間接影響列的布局和尺寸，從而實(shí)現(xiàn)類似百分比的效果。

14. box-shadow（盒子陰影）

• 在定義盒子陰影時(shí)，百分比值可以用于定義陰影的擴(kuò)展半徑（spread-radius）。這個(gè)百分比值是相對(duì)于陰影的大小來(lái)計(jì)算的。但需要注意的是，這種用法相對(duì)少見，因?yàn)殛幱暗拇笮⊥ǔＪ褂霉潭ǖ拈L(zhǎng)度單位（如px）來(lái)定義。

15. border-image-slice（邊框圖片）

• 百分比值：在定義邊框圖片切片時(shí)，百分比值用于確定邊框圖片的各個(gè)部分（上、右、下、左）相對(duì)于原始圖片的尺寸。這些百分比值是相對(duì)于原始圖片的寬度和高度的。

需要注意的是，雖然這些屬性支持百分比單位，但在實(shí)際開發(fā)中，它們的使用頻率和適用場(chǎng)景可能因項(xiàng)目需求和設(shè)計(jì)目標(biāo)而有所不同。因此，在選擇使用百分比單位時(shí)，最好根據(jù)具體情況進(jìn)行權(quán)衡和測(cè)試。