CSS 屬性賦值

zhictory發表於2017-08-28
CSS賦值

原文：https://zhictory.github.io/bl…

文件樹上的每個元素的 CSS 屬性值會涉及到以下四種值：

  1. Specified values 指定值
  2. Computed values 計算值
  3. Used values 應用值
  4. Actual values 實際值

實際值應該就是我們平時看到的最終值，關於最終值的計算，文件是這麼說明的：

The final value of a property is the result of a four-step calculation: the value is determined through specification (the “specified value”), then resolved into a value that is used for inheritance (the “computed value”), then converted into an absolute value if necessary (the “used value”), and finally transformed according to the limitations of the local environment (the “actual value”).

屬性的最終值是4步計算的結果：值通過指定來確定（specified value），接著處理得到一個用於繼承的值（computed value），然後如果有必要的話轉化為一個絕對值（used value），最後根據本地環境限制進行轉換（actual value）。

我按自己的理解做了個實驗來檢視這四個值，其中為了證明 computed value 是用於繼承的，將字型設為奇怪的 16.00005px。

<style>
body {
  font-size: 16.00005px;
}
h1 {
  font-size: 10em;
  /* specified value(10em) */
  /* -> computed value(160.0005px)(inherit) */
  /* -> used value(160.0005px) */
  /* -> actual value(160px) */
  em {
    font-size: 50%;
    /* specified value(50%)  */
    /* -> computed value(80.0002px)(inherit)  */
    /* -> used value(80.0002px)  */
    /* -> actual value(80.0002px) */
  }
}
</style>
<body>
  <h1>A <em>large</em> heading</h1>
</body>

如程式碼所示列出了計算的過程，其中要注意兩點：

  • 一般情況下，分不清是用 computed value 還是用 actual value 來繼承，但這個例子中從 em 的 font-size 的 computed value 是 80.0002 可得出是用 h1 的 computed value 來繼承的。
  • 一般情況下，分不清最終值是 used value 還是 actual value，但這個例子中從 h1 的 font-size 就看到這兩個值的不同了。

參考：屬性賦值的文件

相關文章