CSS中其實有很多專業術語，瞭解這些術語，有助於加強對css背後的機制的理解。
1. Continuous media & Paged media
css樣式可以讓我們隨心所欲的在各種電子產品上顯示我們所要表達的東西，諸如在screen，在print，在projection上，等等。但是由於顯示終端不同，我們需要根據顯示終端來調整css樣式，而css本身也對屬性的使用範圍作了一個限定。
通常，一個css屬性可以在A,B,C等多種media（screen,print,projection等都屬於media）上使用，但不可以在D,E,F等多種media上使用，這就有了media groups這個概念。一個media group包含多種media，且css屬性會根據它的定義適用於某個media group中的所有media。
css按照劃分角度的不同定義瞭如下media group。
- continuous media 或者paged media
- visual media 或者audio media 或者speech media 或者tactile media
- grid media 或者bitmap media
- interactive media或者static media
- all
對於continuous media 和paged media，詳細分類如下：
2. root 元素
沒有父元素的素為root element，在html檔案中html標籤產生的dom元素即為root element。
3. specified value
一般指開發人員為具體的屬性所設定的值。但是如果開發人員沒有指定呢，那麼specified value按以下順序來確定。其中1的優先順序最高。
- 作者為具體的屬性所設定的值。
- 否則， 若該屬性具有繼承性且該元素不為root 元素，則該屬性的specified value和computed value都為父元素的Computed value。
- 否則，使用該屬性的initial value(每個屬性都有一個initial value)
ps： 若作者沒有為該屬性指定值，而該屬性具有繼承性且該元素為root 元素，則specified value為屬性的initial value
舉個例子
html程式碼如下
<body>
<div>
I'm content in div
<em>I'm content in em</em>
</div>
</body>複製程式碼不設定任何樣式
瀏覽器顯示為
可以看到，div裡的字型大小和em裡的字型大小相同
設定css樣式
div{
font-size: 30px;
}複製程式碼瀏覽器顯示為
對比上面截圖，明顯看到div裡的字型和em裡的字型都明顯變大，且字型大小都相同。
可是我並沒有設定em的字型，這是為什麼呢？
這就是繼承的魅力！
由於font-size屬性具有繼承性，em元素又不為root元素，因此em元素的font-size會繼承父元素div的font-size，它的font-size同樣為30px。
4. computed value
當開發人員為屬性設定值時，該值可能是絕對值，它們不是相對其他值而言的，例如”red”,”2px”,為圖片路徑指定的絕對url地址；也可能是相對值，它們是相對其他值而言的，如””2em”,”2ex”，為圖片路徑指定了相對url地址。
對於絕對值，該值無需再經過計算即為computed value。
對於相對值，該值必須經過計算。例如，單位為相對單位（如em,ex）的值必須與合適的font size相乘得到一個以px結尾的值或其他絕對的值；類似於"../img/test.png"的url必須基於當前css檔案或html檔案得到一個絕對地址（如：D:/img/test.png），這些相對值經過計算得到的結果為computed value。
5. used value
由於元素的某些屬性值需要依賴其他元素的屬性值才能確定，而這個被依賴元素的屬性值只有在rendering tree被渲染到canvas時才能確定，因此在rendering tree被渲染到canvas的過程中，某些屬性值會由computed value轉變到used value。
例如，如果某元素width的屬性值為百分比，那麼只有知道父元素的width，才能確認該元素的width。
當然，如果元素的屬性值不需要依賴其他元素的屬性值，那麼屬性的used value就等於computed value。
6. actual value
理論上used value可以直接使用，但是在一個指定的環境裡也許不能使用used value。
例如，有的瀏覽器只能渲染具有整數pixel的border width，那就必須對used value近似取值 (FF15.01和chrome25採用四捨五入；IE8是取整，直接去掉小數)，近似值即為actual value。
例如元素的font size可能需要基於font-size-adjust屬性進行調整，調整後的值即為actual value。
7. user agent
它實質上是一段程式。只要該程式能夠解析一篇使用文件語言編寫的文件，並且依據w3c標準給該文件應用上樣式。該程式可能會顯示出文件（如網頁），或列印文件（如印表機），亦或將文件轉換為其他格式。
8. canvas
供rendering tree渲染的一塊空間，理論上它是無限大的，但是rendering tree在渲染時只會渲染到canvas的一塊有限區域中。
9. viewport
一個視窗或螢幕上的可視部分。
10. initial containing block
一個containing block，包裹著root元素所產生的box。
對於continuous media, initial containing block由viewport(看第27條)建立，擁有和viewport一樣的大小尺寸，且被定為在canvas的起始點。
對於paged media，document文件會被分成幾個離散的page，每個page產生一個page box,每個page box由page area和margin area組成，第一個page area的邊緣所建立的矩形為該document的initial containing block。
ps: 印表機會將 page box轉為真正的 sheet。如一個 page box轉為一個 sheet，這對應列印模式 single-sided printing；兩個 page boxes轉為同一個 sheet的正反面，這對應列印模式 double-sided printing
11. containing block
通常，box在進行尺寸計算或是定位時都需要一個參考物，這個參考物就是containing block。某個box在產生之後，它會充當子box的containing block，我們將這個行為說成“該box為它的子box建立了containing block”。我們常說的"某個box的containing block"，指的是包圍該box的containing block，不是指該box所建立的containing block。
12. positioned元素（定位元素）
position屬性值不為static 的dom元素為positioned元素。
13. absolute positioned元素（絕對定位元素）
position屬性值為absolute或fixed的dom元素為absolute positioned元素。
14. stack level
在css中，每個box的位置都由一個三維空間來表示。如下圖：
其中Z 維度的值可由z-index屬性來設定，但只有positioned element才能設定z-index。每個box都屬於一個stacking context。
對於positioned元素而言，它的z-index值即為它在該stacking context中的stack level；
對於非positioned元素而言，它在該stacking context中的stack level為0。
在將渲染樹渲染到canvas的過程中，同一個stacking context中，產生出該stacking context的元素的背景及該stacking context中stack level為最小負值的元素最先渲染到canvas上。stack level越高的元素會越靠近使用者，stack level越低的元素越容易被stack level高的元素遮蓋，詳細圖如下：
15. replaced元素
如果某個元素的content屬性的值不在css規定的範圍內，例如該元素的content為一張圖片，一個document文件或其它的，則該元素為replaced 元素。
replaced元素通常會有一個固定的尺寸，包括固定的寬度，固定的高度，固定的寬高比例，例如圖片；但是若替代物為document文件，則沒有固定尺寸。
16. line box
將inline-level box排成一行的box，不由任何DOM元素產生，是CSS標準為了管理inline-level box而設定的一種box。
17. baseline
baseline實際上是一條看不見的線，它是css標準用來排列文字的一個標準線。
通常，在inline-level box中會有一條baseline，該box中的文字在該box中的垂直位置是根據font樣式以及inline-level box的baseline而定的。
每種font樣式會規定baseline處於文字上的哪個位置。如下圖：
最外面的藍框表示inline-level box，裡面的文字為box的內容。中間的那根藍線代表baseline，文字有多少部分處於baseline的上方以及有多少部分處於baseline的下方是由font樣式決定的。通常我們會把處於baseline上方的文字長度稱為height above baseline，下方的稱為depth below baseline。
18. inline box
由display為inline的非replaced元素產生且box的內容參與父元素建立的inline formatting context
19. inline-level box
由display為inline，inline-block，inline-table的dom元素產生，這些box會參與到一個inline formatting context中
20. 非 inline box 的 inline-level box
在inline-level box中，有些box是以一個整體參與父元素建立inline formatting context，而非box中的每個文字。諸如：replaced的inline-level box， display為inline-block / inline-table的dom元素產生的box，這些box就屬於非inline box的inline-level box
21. block-level box
由display為block，list-item，table的非replaced的dom元素（這種元素也叫block-level元素）產生，這些box均參與到一個block formatting context中
22. block container box
由display為block，list-item，inline-block，table-cell，table-caption 的非replaced的dom元素產生。該box只能包含block-level box或是建立一個inline formatting context且只能包含inline-level box
23. block box
既是block-level box也是block container box的box為block box，對比第21和22可得知，display為block，list-item的非replaced的dom元素產生的box為block box
24. 邊緣（outer edge）
outer edge實際上就是margin edge，如果box的margin寬度為0，那麼margin edge就等同於border edge
25. positioned box（定位box）
由position屬性值不為static 的dom元素產生。相應的，該dom元素也稱之為positioned元素
26. absolute positioned box（絕對定位box）
由position屬性值為absolute或fixed的dom元素產生。相應的，該dom元素也稱之為絕對定位元素
27. viewport
由user agent提供的一個可視區域。對於continuous media，HTML 文件最終會被渲染到canvas(畫布)上，畫布會通過viewport呈現給使用者。使用者能看到畫布上多少內容取決於viewport有多大。當viewport的大小小於畫布的內容，瀏覽器就會啟動scroll 機制以便使用者可看到canvas上所有內容。
28. root box
root元素(參考第2條)產生的box
29. 圖片候選字串（image candidate string）
格式為： [image_url] [integer]w 或[image_url] [integer]x，其中image_url為圖片的url地址，integer為一個有效的大於0的整數，w為可渲染的點陣圖寬度描述符號（也可稱為物理畫素寬度描述符號），x為密度描述符號。
下圖為一個螢幕寬度為320px（這個px指css pixel），裝置畫素比為2的手機，若將圖片的寬度設為100vw，那麼該圖片在該手機上可渲染的的點陣圖寬度為320*2 = 640w
30.media_condition（媒介條件）
單個media_condition諸如“screen”“speech”等媒介名稱，或是max-width,min-width等
單個media_condition之間可用and, or，not來連線成一個複合的media_condition
31.物理畫素
顯示器上最小的物理顯示單元，每個畫素都有自己的顏色值及亮度值
32.裝置獨立畫素
也叫密度無關畫素，可以認為是計算機系統的一個點，這個點代表一個可以由程式使用的虛擬畫素（諸如常用的css畫素），然後由相關係統轉換為物理畫素。
33. 裝置畫素比（device pixel ratio）
裝置畫素比是物理畫素與裝置獨立畫素的比值。若裝置寬高為375×667，可以理解為裝置獨立畫素(或css畫素)。 dpr為2，根據上面的計算公式，其物理畫素就應該為750×1334。
34. 圖片源集合（image source set）
一個有序集合，每項包含圖片源地址和圖片源尺寸大小
術語太多，未完待續。。。