總結CSS中各個屬性使用百分比（%）基準值
作者：cqhly
雖然這些屬性支持百分比單位，但在實際開發中，它們的使用頻率和適用場景可能因項目需求和設計目標而有所不同。因此，在選擇使用百分比單位時，最好根據具體情況進行權衡和測試。
在CSS中，百分比（%）單位通常用于表示相對于某個參考值的比例。平時用的最多可能就是寬高了，做響應式設計可能會用到、也比較具有靈活性，在使用時候要明確其值相對于哪個屬性，不然就亂套了。
以下是一些常見的使用百分比單位的CSS屬性，以及它們的基準值：
- 寬度（width）和高度（height）
基準值：元素的父元素的寬度或高度。
描述：將元素的寬度或高度設置為父元素相應尺寸的百分比值。
- 外邊距（margin）和內邊距（padding）
- 基準值：元素的寬度（對于左右外邊距和內邊距）或高度（對于上下外邊距和內邊距）。但請注意，百分比值的外邊距和內邊距是相對于包含塊的寬度計算的，而不是元素的寬度或高度。
- 描述：設置元素邊框與相鄰元素之間的空間或元素邊框與內部內容之間的空間。
- 字體大小（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屬性時，百分比值用于確定變換的基點相對于元素本身的位置。例如，transform-origin: 50% 50%;將使變換的基點位于元素的中心。
- column-width（多列布局）
- 百分比值：在多列布局中，column-width屬性可以使用百分比值來定義列的最小寬度。這個百分比值是相對于包含塊的寬度來計算的。
- column-count（多列布局）
- 雖然column-count屬性本身不接受百分比值，但結合其他屬性（如column-gap、column-width等）時，可以間接影響列的布局和尺寸，從而實現類似百分比的效果。
- box-shadow（盒子陰影）
- 在定義盒子陰影時，百分比值可以用于定義陰影的擴展半徑（spread-radius）。這個百分比值是相對于陰影的大小來計算的。但需要注意的是，這種用法相對少見，因為陰影的大小通常使用固定的長度單位（如px）來定義。
- border-image-slice（邊框圖片）
- 百分比值：在定義邊框圖片切片時，百分比值用于確定邊框圖片的各個部分（上、右、下、左）相對于原始圖片的尺寸。這些百分比值是相對于原始圖片的寬度和高度的。
需要注意的是，雖然這些屬性支持百分比單位，但在實際開發中，它們的使用頻率和適用場景可能因項目需求和設計目標而有所不同。因此，在選擇使用百分比單位時，最好根據具體情況進行權衡和測試。
責任編輯：武曉燕
來源：
海燕技術棧
