資訊專欄INFORMATION COLUMN
摘要：表示用戶代理的默認值。但在某些情況下這個值非常有用。這是結合形成文檔后所得到的值。開發者指定值種用戶代理默認值不可更改具有中劃線的值表示被層疊規則覆蓋即被權重大的給覆蓋了樣式。
CSS值的來源
首先,我們知道CSS雖然語法簡單，但也不是瞎寫的，其屬性和值都是官方定義好了的,確切的說是瀏覽器廠商定義好的。
這些給定的值無外乎來源以下情況：
inherit 表示從祖先元素繼承得到值。每個屬性都有。
initial 表示用戶代理的默認值。每個屬性都有。
瀏覽器專有的值，通常有-ms-，-webkit-等前綴，也有一些值并無前綴。
瀏覽器共有的值，雖然共有，但各瀏覽器在實現上不一定相同。
因此可以肯定css兼容問題多來源于瀏覽器廠商實現css渲染的不一致和進化程度不一造成。
CSS規范中的值最終呈現給用戶的值經過了4步: 首先指定的值 (the "specified value"), 然后是通過了繼承的值 (the "computed value"), 然后轉化為使用值 (the "used value"), 最后是因為瀏覽器本身限制原因而得到的實際值 (the "actual value").
即 指定值-->計算值-->使用值-->實際值
Specified value指定值有3種可能，一是用戶代理的默認值即initial，一是美工寫在程序里的值，一是顯示指定繼承的值即inherit.
通常，inherit和initial都不必顯示指定。但在某些情況下這2個值非常有用。
computed value這是在還沒形成文檔前,渲染引擎解析css文件，通過層疊規則繼承關系計算出來的值。
used value這是css結合html形成文檔后所得到的值。
理解計算值和使用值的區別就在于 瀏覽器是先分別解析HTML和CSS文件，然后再把它們融合起來。具體可參看這2張圖。
webkit渲染流程
Geoko渲染流程
則是最后瀏覽器可用的值，比如說所有瀏覽器都不能處理小數點后7位，因此會被縮小精度。
這4個值源于規范，其他瀏覽器實現可能并不按此4步流程工作,但目前主流瀏覽器都是按此流程
Chrome開發者注意 層疊不同于繼承。層疊是對單個css屬性而言，繼承則是對元素而言。層疊常常伴隨著權重問題。
指定值(3種)
用戶代理默認值(不可更改)
具有中劃線的值 表示被層疊規則覆蓋,即被權重大的給覆蓋了樣式。
點擊4可以跳轉到相應的 節點和樣式視圖。4之下的部分表示從哪個元素繼承了樣式，通常從這里就可以看到元素的祖先DOM鏈.·
灰色部分可以更改,表示規則不可用且在運行時計算。
例子:我現在指定h1的高度如下
查看computed value可以看到chrome保留小數點后4位:
查看使用值(在這個盒子中看的原因是有盒子代表形成了文檔即對應前面的used value)
最后實際值在這(直接在頁面上看):
可以看到如果有padding,padding會在形成文檔之后在顯示到瀏覽器上時加到視覺上的寬高里去。當然如果有box-sizing屬性的指定則又不一樣，但可以得知這是發生在最后一步的。
參考w3c css2.2 value
google chrome devtools eidt style
前端必讀：瀏覽器內部工作原理
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116422.html
摘要：計算屬性的計算值通常包括將相對值轉換成絕對值如單位或百分比。返回的解析值可能是計算值或應用值。最后，計算布局尺寸比如或百分數換算為像素值，結果即應用值。繼承當元素的一個繼承屬性沒有指定值時，則取父元素的同屬性的計算值。 css屬性 我覺得大部分學習前端的人應該都沒有按照教科書一般的來學習css，可能是類似搭積木一樣，需要什么拿什么，所以可能最對一些基本的概念沒有很好的理解，這里列出的是...
摘要：和這樣的預處理器，讓我們的代碼保持良好的結構和可維護性。這是否意味著變量已經無關緊要了呢那可未必，主要是因為，變量與預處理器中的變量其實是不同的東西。而你是無法對預處理器中的變量做上面這些操作的。 本文翻譯自：https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 轉載請注明出處：葡萄城官網，葡萄城...
摘要：變量，或者用它的官方稱謂，叫作自定義屬性，已經可用，并且有非常棒的瀏覽器支持，而也正在取得進展。這是否意味著變量已經無關緊要了呢那可未必，主要是因為，變量與預處理器中的變量其實是不同的東西。 轉載請注明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。 Sass和Less這樣的預處理器，讓我們的CSS代碼保持良好的結構和可維護性。像變量、混合(mixin...
摘要：中的繼承實際上是父級元素對子元素的影響。如果使用的屬性為繼承屬性，則將其視為，否則則視為。張載名言警句人若志趣不遠，心不在焉，雖學不成。張載效果如下代碼在我中，大家可以隨時查看。 作者：陳大魚頭 github： KRISACHAN 繼承 繼承（英語：inheritance） 是面向對象軟件技術當中的一個概念。在 CSS 中與 層疊（英語：Cascade） 一起描述了如何設置樣...
閱讀 1474·2019-08-30 15:55
閱讀 1177·2019-08-30 15:52
閱讀 1296·2019-08-29 13:53
閱讀 1472·2019-08-29 11:19
閱讀 2976·2019-08-26 13:29
閱讀 536·2019-08-26 11:33
閱讀 2597·2019-08-23 17:20
閱讀 1028·2019-08-23 14:14
