子曰：學好百分值，考試考百分

首先是確定CSS 中的percentage 都可以應用在CSS 中的哪些屬性，以及這些屬性的值如何進行計算的，參考CSS 參考手冊進行統計。

定位（Positioning）

1. top
   用百分比來定義距離頂部的偏移量。百分比參照包含塊的高度。可以為負值。
2. right
   用百分比來定義距離右邊的偏移量。百分比參照包含塊的寬度。可以為負值。
3. bottom
   用百分比來定義距離底部的偏移量。百分比參照包含塊的高度。可以為負值。
4. left
   用百分比來定義距離左邊的偏移量。百分比參照包含塊的寬度。可以為負值。

尺寸與補白（Dimension）

1. width
   用百分比來定義寬度。百分比參照包含塊寬度。不允許負值。
2. min-width
   用百分比來定義最小寬度。不允許負值。
3. max-width
   用百分比來定義最大寬度。不允許負值。
4. height
   用百分比來定義高度。百分比參照包含塊高度。不允許負值。
5. min-height
   用百分比來定義最小高度。不允許負值。
6. max-height
   用百分比來定義最大高度。不允許負值
7. margin
   用百分比來定義外補白。水平（默認）書寫模式下，參照其包含塊的width進行計算，其它情況參照height，可以為負值。
8. padding
   用百分比來定義內補白。水平（默認）書寫模式下，參照其包含塊的width進行計算，其它情況參照height，不允許負值。

背景與邊框（Backgrounds and Borders）

1. border-radius
   用百分比定義圓形半徑或橢圓的半長軸，半短軸。水平方向百分比參照元素寬度（非內容寬度），垂直方向參照元素高度。不允許負值。
2. border-image-width
   用百分比指定圖像邊框的厚度。參照圖像邊框區域的大小（包含border和padding）進行換算。不允許負值。
3. background-position
   用百分比指定背景圖像在元素中出現的位置。可以為負值。參考容器尺寸減去背景圖尺寸進行換算。
4. background-size
   當屬性值為百分比時，參照背景圖像的background-origin區域大小進行換算（而不是包含塊大小）。

字體（Font）

1. font-size
   
   用百分比指定文字大小。其百分比取值是基於父對象中字體的尺寸。不允許負值。

文本（Text）

1. word-spacing
   用百分比指定單詞間隔。可以為負值。（CSS3）。
2. text-indent
   用百分比指定文本的縮進。可以為負值。
3. vertical-align
   把當前盒提升（正值）或者降低（負值）這個距離，百分比相對line-height計算。當值為0%時等同於baseline。
4. line-height
   用百分比指定行高，其百分比基於文本的font-size進行換算。不允許負值。
5. text-size-adjust
   用百分比來指定文本大小在設備尺寸不同的情況下如何調整。

伸縮盒（Flexible Box）（新）

1. flex-basis
   用百分比來定義寬度。不允許負值。

變換（Transform）

1. transform-origin
   用百分比指定坐標值。可以為負值。
2. perspective-origin
   用百分比指定透視點坐標值，相對於元素寬度。可以為負值。

總結

1. 定位中的top、right、bottom、left 值為百分比時，都是參考包含塊同方向的width 或height 進行計算值
2. 尺寸與補白中的height、*-height、width、*-width 值為百分比時，也是參考包含塊同方向的width 或height 進行計算值
3. 而尺寸與補白中的padding、margin，則是水平（默認）書寫模式下，參照其包含塊的width進行計算，也就是說同書寫的方向相同。（大概是由於padding 是同內容相關的，同時沒有 繼承性，在同一書寫方向上便於計算值）
4. 字體中的font-size則是基於父對象中字體的尺寸（大該是由於font-size 有繼承性）
5. 文本中的text-indent 也是基於包含塊的width 進行計算的，（推測是同書寫方向相同，經驗證確實是，當設置writing-mode 為vertical-lr 時，是基於包含塊的height 進行計算的）
6. 文本中的line-height 基於font-size 進行計算，而vertical-align 則是基於line-height 進行計算的。

7. 背景與邊框中的background-position 則是基於容器尺寸減去背景圖尺寸進行換算（是這麽理解的，因為值為50% 時，使得圖像居中，也就是）

   `background-position` = （容器尺寸-背景尺寸）/2

8. 背景與邊框中的background-size 則是基於background-origin區域大小（很容易將一個圖進行放大或縮小，下面兩個圖，分別是設置為50% 和33.3333% 的效果）
   
   

9. 變換中的transform-origin 值為百分比時，橫坐標參考元素的寬度，縱坐標參考元素的高度

一日一練-CSS CSS中percentage百分值的使用