css屬性的繼承、初識值、計算值、當前值、應用值

pkhope 發布于2019-08-29 13:19 / 1530人閱讀

摘要：計算屬性的計算值通常包括將相對值轉換成絕對值如單位或百分比。返回的解析值可能是計算值或應用值。最后，計算布局尺寸比如或百分數換算為像素值，結果即應用值。繼承當元素的一個繼承屬性沒有指定值時，則取父元素的同屬性的計算值。

css屬性

我覺得大部分學習前端的人應該都沒有按照教科書一般的來學習css，可能是類似搭積木一樣，需要什么拿什么，所以可能最對一些基本的概念沒有很好的理解，這里列出的是一些css屬性的關鍵概念：

css屬性初始值

css屬性計算值

css屬性應用值

css屬性當前值

css屬性繼承

大部分css屬性都可以有這個值：inherit 繼承父級值：initial 初始值，
inherit 繼承父級值

對于可繼承屬性而言，直接繼承父級的屬性，直接父級元素沒有設置的話會一級級往上繼承，如果都沒有就是默認值；

對于非繼承屬性而已，這個還是要慎用，當然也可以用，可以繼承父級元素的屬性，但是父級元素可能沒有這個屬性，所以避免這種情況考慮使用initial初始值比較合理

初始值

在每個CSS屬性定義的概述中已經給出的初始值針對不同的繼承或非繼承屬性有著不同的含義.

對于繼承屬性, 初始值只能被用于沒有指定值的根元素上【因為不是根元素都會繼承其他的父元素指定值】.

對于非繼承屬性 ,初始值可以被用于任意沒有指定值的元素上.

在CSS3中允許作者使用 initial 關鍵詞明確的設定初始值.

計算值

一個CSS屬性的計算值 (computed value) 通過以下方式從指定的值計算而來：

處理特殊的值 inherit 和 initial，以及
進行計算，以達到屬性摘要中“計算值”行中描述的值。
計算屬性的"計算值"通常包括將相對值轉換成絕對值(如 em 單位或百分比)。

例如，如一個元素的屬性值為 font-size:16px 和 padding-top:2em, 則 padding-top 的計算值為 32px (字體大小的2倍).

然而，有些屬性的百分比值會轉換成百分比的計算值(這些元素的百分比相對于需要布局后才能知道的值，如 width, margin-right, text-indent, 和 top)。另外，line-height 屬性值如是沒有單位的數字，則該值就是其計算值。這些計算值中的相對值會在應用值確定后轉換成絕對值。

計算值的最主要用處是繼承 , 包括 inherit 關鍵字。

getComputedStyle() DOM API 返回的解析值, 可能是計算值或應用值。

應用值

CSS 屬性的應用值（used value）是完成所有計算后最終使用的值，可以由 window.getComputedStyle 獲取。尺寸 (例如 width, line-height) 單位為像素, 簡寫屬性 (例如 background) 與組成屬性相符 (例如 background-color，display) 與 position 、float相符，每個 CSS 屬性都有值。

詳情

計算出CSS屬性的最終值有三個步驟。首先，指定值specified value 取自樣式層疊 (選取樣式表里權重最高的規則), 繼承 (如果屬性可以繼承則取父元素的值)，或者默認值。然后，按規范算出計算值computed value (例如， span 指定 position: absolute 后display 變為 block)。最后，計算布局(尺寸比如 auto 或百分數換算為像素值 )，結果即應用值used value。這些步驟是在內部完成的，腳本只能使用 window.getComputedStyle 獲得最終的應用值。

舉例

沒有明確的寬度。指定的寬度: auto (默認). 計算的寬度: auto. 應用的寬度: 998px (舉例而言)。
明確的寬度: 50%. 指定的寬度: 50%. 計算的寬度: 50%. 應用的寬度: 447px
明確的寬度: inherit. 指定的寬度: 50%. 計算的寬度: 50%. 應用的寬度: 221px .

與計算值的區別

CSS 2.0 只定義了計算值 computed value 作為屬性計算的最后一步。 CSS 2.1 引進了定義明顯不同的的應用值，這樣當父元素的計算值為百分數時子元素可以顯式地繼承其高寬。對于不依賴于布局的 CSS 屬性 (例如 display, font-size, line-height)計算值與應用值一樣，否則就會不一樣 (引自 CSS 2.1 Changes: Specified, computed, and actual values):

實際值

一個CSS屬性的實際值（actual value）是應用值（used value）被應用后的近似值。例如，一個用戶代理可能只能渲染一個整數像素值的邊框（實際值），并且該值可能被強制近似于邊框的計算寬度值。

繼承與非繼承

每個 CSS 屬性定義的概述都指出了這個屬性是默認繼承的 ("Inherited: Yes") 還是默認不繼承的 ("Inherited: no")。這決定了當你沒有為元素的屬性指定值時該如何計算值。

繼承
當元素的一個繼承屬性（inherited property ）沒有指定值時，則取父元素的同屬性的計算值 computed value 。只有文檔根元素取該屬性的概述中給定的初始值（initial value）（這里的意思應該是在該屬性本身的定義中的默認值）。以下是繼承的一些屬性

azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing

非繼承
當元素的一個非繼承屬性 (在Mozilla code 里有時稱之為 reset property ) 沒有指定值時，則取屬性的初始值initial value （該值在該屬性的概述里被指定）。
以下列出均為非繼承

display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

參考：http://www.w3.org/TR/CSS21/pr...
https://developer.mozilla.org...
http://www.cnphp.info/css-sty...

GPU云服務器云服務器獲取CSS屬性值 js會的屬性值 php獲取表的屬性值獲取屬性值

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112521.html

初識DOM

摘要：標識，就是將頁面解析為一個文檔。標識，就是中表示各個對象之間的關系。的標準由于的標準規范是由組織起草并定義的，所以對的定義是目前最權威的解釋。兄弟關系具有相同父級元素的兩個或幾個元素之間的兄弟關系。是返回值，表示定位元素的集合，是一個集合。如何使用JavaScript script元素元素元素用于在HTML頁面中嵌入或引入JavaScript腳本代碼。該元素默認被定義在元素中。t...

史占廣 2019-08-29 16:31 評論0 收藏0
初識DOM

摘要：標識，就是將頁面解析為一個文檔。標識，就是中表示各個對象之間的關系。的標準由于的標準規范是由組織起草并定義的，所以對的定義是目前最權威的解釋。兄弟關系具有相同父級元素的兩個或幾個元素之間的兄弟關系。是返回值，表示定位元素的集合，是一個集合。如何使用JavaScript script元素元素元素用于在HTML頁面中嵌入或引入JavaScript腳本代碼。該元素默認被定義在元素中。t...

qpal 2019-08-02 16:31 評論0 收藏0
初識DOM

摘要：標識，就是將頁面解析為一個文檔。標識，就是中表示各個對象之間的關系。的標準由于的標準規范是由組織起草并定義的，所以對的定義是目前最權威的解釋。兄弟關系具有相同父級元素的兩個或幾個元素之間的兄弟關系。是返回值，表示定位元素的集合，是一個集合。如何使用JavaScript script元素元素元素用于在HTML頁面中嵌入或引入JavaScript腳本代碼。該元素默認被定義在元素中。t...

Coding01 2019-08-23 11:31 評論0 收藏0
前端菜鳥筆記 Day-3 CSS基礎

摘要：派生選擇器依據元素的位置關系來定義樣式。稱其為上下文選擇器，稱其為派生選擇器。在現在布局中，選擇器常常用于建立派生選擇器。和一樣，也可被用作派生選擇器。文章大綱來源：【Day 3】HTML復習 + CSS基礎初識CSS 入門CSS 初識CSS 層疊樣式表（Cascading Style Sheets），即前端常說的CSS。內容引用：CSS 簡介樣式解決了什么問題？ HTML...

mingzhong 2019-08-30 15:55 評論0 收藏0
前端菜鳥筆記 Day-3 CSS基礎

摘要：派生選擇器依據元素的位置關系來定義樣式。稱其為上下文選擇器，稱其為派生選擇器。在現在布局中，選擇器常常用于建立派生選擇器。和一樣，也可被用作派生選擇器。文章大綱來源：【Day 3】HTML復習 + CSS基礎初識CSS 入門CSS 初識CSS 層疊樣式表（Cascading Style Sheets），即前端常說的CSS。內容引用：CSS 簡介樣式解決了什么問題？ HTML...

DangoSky 2019-08-02 14:12 評論0 收藏0