標籤：

CSS基本術語解釋

03-03

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的優先順序最高。

  1. 作者為具體的屬性所設定的值。

  2. 否則， 若該屬性具有繼承性且該元素不為root 元素，則該屬性的specified value和computed value都為父元素的Computed value。

  3. 否則，使用該屬性的initial value(每個屬性都有一個initial value)

ps： 若作者沒有為該屬性指定值，而該屬性具有繼承性且該元素為root 元素，則specified value為屬性的initial value

舉個栗子

html代碼如下

<body><div> Im content in div <em>Im 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. 設備像素比（device pixel ratio）

每個css 像素寬所對應的屏幕物理像素的個數。若一個設備的dpr為2，說明該設備1*1的css像素對應2*2個物理像素

32. 圖片源集合（image source set）

一個有序集合，每項包含圖片源地址和圖片源尺寸大小

術語太多，未完待續。。。

（轉載請先徵得本人同意）


推薦閱讀：

TAG:CSS | 專業術語 |