成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css屬性的繼承、初識(shí)值、計(jì)算值、當(dāng)前值、應(yīng)用值

pkhope / 1542人閱讀

摘要：計(jì)算屬性的計(jì)算值通常包括將相對(duì)值轉(zhuǎn)換成絕對(duì)值如單位或百分比。返回的解析值可能是計(jì)算值或應(yīng)用值。最后，計(jì)算布局尺寸比如或百分?jǐn)?shù)換算為像素值，結(jié)果即應(yīng)用值。繼承當(dāng)元素的一個(gè)繼承屬性沒有指定值時(shí)，則取父元素的同屬性的計(jì)算值。

css屬性

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

css屬性初始值

css屬性計(jì)算值

css屬性應(yīng)用值

css屬性當(dāng)前值

css屬性繼承

大部分css屬性都可以有這個(gè)值：inherit 繼承父級(jí)值 ：initial 初始值，
inherit 繼承父級(jí)值

對(duì)于可繼承屬性而言，直接繼承父級(jí)的屬性，直接父級(jí)元素沒有設(shè)置的話會(huì)一級(jí)級(jí)往上繼承，如果都沒有就是默認(rèn)值；

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

初始值

在 每個(gè)CSS屬性 定義的概述中已經(jīng)給出的 初始值 針對(duì)不同的 繼承或非繼承屬性 有著不同的含義.

對(duì)于繼承屬性, 初始值 只能 被用于沒有指定值的根元素上【因?yàn)椴皇歉囟紩?huì)繼承其他的父元素指定值】.

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

在CSS3中允許作者使用 initial 關(guān)鍵詞明確的設(shè)定初始值.

計(jì)算值

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

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

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

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

計(jì)算值的最主要用處是 繼承 , 包括 inherit 關(guān)鍵字。

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

應(yīng)用值

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

詳情

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

舉例

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

與計(jì)算值的區(qū)別

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

實(shí)際值

一個(gè)CSS屬性的實(shí)際值（actual value）是應(yīng)用值（used value）被應(yīng)用后的近似值。例如，一個(gè)用戶代理可能只能渲染一個(gè)整數(shù)像素值的邊框（實(shí)際值），并且該值可能被強(qiáng)制近似于邊框的計(jì)算寬度值。

繼承與非繼承

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

繼承
當(dāng)元素的一個(gè) 繼承屬性 （inherited property ）沒有指定值時(shí)，則取父元素的同屬性的 計(jì)算值 computed value 。只有文檔根元素取該屬性的概述中給定的初始值（initial value）（這里的意思應(yīng)該是在該屬性本身的定義中的默認(rèn)值）。以下是繼承的一些屬性

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

非繼承
當(dāng)元素的一個(gè) 非繼承屬性 (在Mozilla code 里有時(shí)稱之為 reset property ) 沒有指定值時(shí)，則取屬性的 初始值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...

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

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

相關(guān)文章

  • 初識(shí)DOM

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

    史占廣 評(píng)論0 收藏0

  • 初識(shí)DOM

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

    qpal 評(píng)論0 收藏0

  • 初識(shí)DOM

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

    Coding01 評(píng)論0 收藏0

  • 前端菜鳥筆記 Day-3 CSS基礎(chǔ)

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

    mingzhong 評(píng)論0 收藏0

  • 前端菜鳥筆記 Day-3 CSS基礎(chǔ)

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

    DangoSky 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<