CSS基本術語

時間 2019-11-16

標籤 css 基本術語欄目 CSS 简体版

原文原文鏈接

2019/5/9更新：更新了block-level box的解釋css

-----------------------------------------------------------------------------------------html

CSS中其實有不少專業術語，瞭解這些術語，有助於增強對css背後的機制的理解。
chrome

1. Continuous media & Paged media

css樣式可讓咱們爲所欲爲的在各類電子產品上顯示咱們所要表達的東西，諸如在screen，在print，在projection上，等等。可是因爲顯示終端不一樣，咱們須要根據顯示終端來調整css樣式，而css自己也對屬性的使用範圍做了一個限定。canvas

一般，一個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。
bash

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，詳細分類以下：dom

2. root 元素

沒有父元素的素爲root element，在html文件中html標籤產生的dom元素即爲root element。ide

3. specified value

通常指開發人員爲具體的屬性所設定的值。可是若是開發人員沒有指定呢，那麼specified value按如下順序來肯定。其中1的優先級最高。字體

做者爲具體的屬性所設定的值。
不然，若該屬性具備繼承性且該元素不爲root 元素，則該屬性的specified value和computed value都爲父元素的Computed value。
不然，使用該屬性的initial value(每一個屬性都有一個initial value)

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

舉個栗子

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，flex的非replaced的dom元素（這種元素也叫block-level元素）產生，這些box均參與到一個block formatting context中。不過，display爲flex的dom元素同時也是flex container box，而其餘幾位則是block container box。

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上全部內容。