CSS 屬性賦值

時間 2019-12-13

標籤 css 屬性賦值欄目 CSS 简体版

原文原文鏈接

原文： https://zhictory.github.io/cs...

文檔樹上的每一個元素的 CSS 屬性值會涉及到如下四種值：css

Specified values 指定值
Computed values 計算值
Used values 應用值
Actual values 實際值

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

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。git

<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>

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

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

參考：屬性賦值的文檔字體

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。