CSS 屬性賦值

_ang 發(fā)布于2019-08-29 13:14 / 3285人閱讀

摘要：我按自己的理解做了個(gè)實(shí)驗(yàn)來(lái)查看這四個(gè)值，其中為了證明是用于繼承的，將字體設(shè)為奇怪的。一般情況下，分不清最終值是還是，但這個(gè)例子中從的就看到這兩個(gè)值的不同了。參考屬性賦值的文檔

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

文檔樹(shù)上的每個(gè)元素的 CSS 屬性值會(huì)涉及到以下四種值：

Specified values 指定值

Computed values 計(jì)算值

Used values 應(yīng)用值

Actual values 實(shí)際值

實(shí)際值應(yīng)該就是我們平時(shí)看到的最終值，關(guān)于最終值的計(jì)算，文檔是這么說(shuō)明的：

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步計(jì)算的結(jié)果：值通過(guò)指定來(lái)確定（specified value），接著處理得到一個(gè)用于繼承的值（computed value），然后如果有必要的話轉(zhuǎn)化為一個(gè)絕對(duì)值（used  value），最后根據(jù)本地環(huán)境限制進(jìn)行轉(zhuǎn)換（actual value）。

我按自己的理解做了個(gè)實(shí)驗(yàn)來(lái)查看這四個(gè)值，其中為了證明 computed value 是用于繼承的，將字體設(shè)為奇怪的 16.00005px。



  A large heading

如代碼所示列出了計(jì)算的過(guò)程，其中要注意兩點(diǎn)：

一般情況下，分不清是用 computed value 還是用 actual value 來(lái)繼承，但這個(gè)例子中從 em 的 font-size 的 computed value 是 80.0002 可得出是用 h1 的 computed value 來(lái)繼承的。

一般情況下，分不清最終值是 used value 還是 actual value，但這個(gè)例子中從 h1 的 font-size 就看到這兩個(gè)值的不同了。

參考：屬性賦值的文檔

GPU云服務(wù)器云服務(wù)器屬性賦值 js 已有屬性賦值 css屬性訪問(wèn)CSS屬性

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112465.html

相關(guān)文章

前端之CSS

摘要：不管你是滾動(dòng)頁(yè)面還是背景設(shè)置的元素，它都會(huì)保持在相同的位置。當(dāng)滾動(dòng)元素時(shí)，背景會(huì)隨之滾動(dòng)。目錄一.css三種引用方式 1.行間式 2.內(nèi)聯(lián)式 3.外聯(lián)式 4.三種方式的優(yōu)先級(jí) 二.樣式與長(zhǎng)度顏色 1.基本樣式 2.長(zhǎng)度...

raise_yang 2019-04-23 13:22 評(píng)論0 收藏0
由一個(gè)“bug”到鮮為人知的jQuery.cssHooks

摘要：干想了半天，認(rèn)為可能還是本身的寫法問(wèn)題。對(duì)象提供了一種通過(guò)定義函數(shù)來(lái)獲取或設(shè)置特定值的方法。簡(jiǎn)單來(lái)說(shuō)，給我們暴露了一個(gè)鉤子，我們可以自己定義方法比如，來(lái)實(shí)現(xiàn)針對(duì)某個(gè)屬性的特定行為。寫在最前本次分享一下在一次jQuery賦值樣式失效的結(jié)果中來(lái)分析背后原因的過(guò)程。在翻jQuery源碼的過(guò)程中，感覺(jué)真是還不能說(shuō)自己只是會(huì)用jQuery，我好像連會(huì)用都達(dá)不到（逃歡迎關(guān)注我的博客，不定期更...

ernest.wang 2019-08-26 11:44 評(píng)論0 收藏0
由一個(gè)“bug”到鮮為人知的jQuery.cssHooks

摘要：干想了半天，認(rèn)為可能還是本身的寫法問(wèn)題。對(duì)象提供了一種通過(guò)定義函數(shù)來(lái)獲取或設(shè)置特定值的方法。簡(jiǎn)單來(lái)說(shuō)，給我們暴露了一個(gè)鉤子，我們可以自己定義方法比如，來(lái)實(shí)現(xiàn)針對(duì)某個(gè)屬性的特定行為。寫在最前本次分享一下在一次jQuery賦值樣式失效的結(jié)果中來(lái)分析背后原因的過(guò)程。在翻jQuery源碼的過(guò)程中，感覺(jué)真是還不能說(shuō)自己只是會(huì)用jQuery，我好像連會(huì)用都達(dá)不到（逃歡迎關(guān)注我的博客，不定期更...

malakashi 2019-08-30 15:46 評(píng)論0 收藏0
CSS變量（自定義屬性）使用指南 — SitePoint

摘要：預(yù)處理器可以讓你設(shè)置變量，并且在函數(shù)循環(huán)和數(shù)學(xué)操作等中使用。不同之處在于變量是運(yùn)行在瀏覽器中的動(dòng)態(tài)屬性，而預(yù)處理器變量會(huì)被編譯成普通的代碼。變量提供了更多可能性但這并不是說(shuō)你需要在二者之間選擇其一你可以同時(shí)使用變量和預(yù)處理器變量的強(qiáng)大功能。 CSS預(yù)處理器，如Sass和Less，使得CSS代碼易于組織和維護(hù)。通過(guò)提供變量、混合、循環(huán)等特性，使得CSS具有動(dòng)態(tài)編寫的能力，從而減少重復(fù)性工...

light 2019-08-02 16:14 評(píng)論0 收藏0
CSS變量（自定義屬性）使用指南 — SitePoint

摘要：預(yù)處理器可以讓你設(shè)置變量，并且在函數(shù)循環(huán)和數(shù)學(xué)操作等中使用。不同之處在于變量是運(yùn)行在瀏覽器中的動(dòng)態(tài)屬性，而預(yù)處理器變量會(huì)被編譯成普通的代碼。變量提供了更多可能性但這并不是說(shuō)你需要在二者之間選擇其一你可以同時(shí)使用變量和預(yù)處理器變量的強(qiáng)大功能。 CSS預(yù)處理器，如Sass和Less，使得CSS代碼易于組織和維護(hù)。通過(guò)提供變量、混合、循環(huán)等特性，使得CSS具有動(dòng)態(tài)編寫的能力，從而減少重復(fù)性工...

yankeys 2019-08-29 18:43 評(píng)論0 收藏0