W3C規範閱讀隨筆 - CSS 2.1 規範（二）

寫在前面的

        該博客爲我閱讀 CSS 2.1 規範時的隨筆。爲了方便與原規範中的章節對應上，章節信息與相關 W3C 規範中的內容保持一致。如下只記錄了本人認爲對於 CSS 編寫者較爲重要的部分，因此章節信息並不連續。

        Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification 地址爲：https://www.w3.org/TR/2011/REC-CSS2-20110607/。

8 線框模型

        CSS 線框模型（box model）描述爲文檔樹中的元素生成的矩形線框，並根據視覺格式化模型（visual formatting model）進行佈局。

8.1 線框尺寸（dimensions）

8.3 外邊距屬性： 'margin-top'，'margin-right'，'margin-bottom'，'margin-left'和'margin'

margin 屬性容許負值，但可能存在具體實現限制。

'margin-top' 和 'margin-bottom' 這兩個屬性對非替換的行內元素無效。

8.3.1 合併外邊距

CSS 中，兩個或多個線框（可能但並不必定是兄弟）的相鄰的 margin 會被結合成一個 margin。margin 按這種方式結合叫作合併（collapse）。

相鄰的垂直 margin 會合並，除了：

• 根元素線框的 margin 不會合並
• If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.

水平 margin 不會合並

兩個 margin 是相鄰的，當且僅當：

• 都屬於流內塊級線框，處於同一個塊格式上下文
• no line boxes, no clearance, no padding and no border separate them
• both belong to vertically-adjacent box edges, i.e. form one of the following pairs:
  • top margin of a box and top margin of its first in-flow child
  • bottom margin of box and top margin of its next in-flow following sibling
  • bottom margin of a last in-flow child and bottom margin of its parent if the parent has 'auto' computed height
  • top and bottom margins of a box that does not establish a new block formatting context and that has zero computed 'min-height', zero or 'auto' computed 'height', and no in-flow children

合併後的 margin 也能與另外一個 margin 相鄰，只要其 margin 的任意一部分與那個 margin 相鄰就算

注意 相鄰 margin 也能夠由不具備兄弟祖先關係的元素造成

注意 上面的規則代表：

• 浮動的線框與任何其餘線框之間的 margin 不會合並（甚至一個浮動線框與它的流內子級之間也不會）
• 創建新的塊格式化上下文的元素（例如，浮動線框與'overflow'不爲'visable'的元素）的 margin 不會與它們的流內孩子合併
• 絕對定位的線框 margin 不會合並（甚至與它們流內子級也不會）
• 流內塊級元素的 bottom margin 總會與它的下一個流內兄弟的 top margin 合併，除非該兄弟（元素）具備 clearance
• 流內塊級元素的 top margin 會與它的第一個流內塊級子級的 top margin 合併，條件是該元素沒有 top margin 和 top padding，而且其孩子不具備 clearance
• 一個'height'爲'auto'而且'min-height'爲0的流內塊級線框的 bottom margin 會與它的最後一個流內塊級子級的 bottom margin 合併，條件是該盒沒有 bottom padding 和 bottom border，而且其孩子的 bottom margin 沒有與具備 clearance 的 top margin 合併
• 線框自身的 margin 也會合並，條件是 'min-height' 屬性爲0，'height'爲0或'auto'，且不含行框的話，那麼其全部流內孩子的 marign（若是存在的話）都會合並

9 視覺格式化模型

9.1 視覺格式化模型介紹

        視覺格式化模型的做用是，指導用戶代理如何在可視化媒體上處理文檔樹。

        在視覺格式化模型中，每個文檔樹中的元素都會根據線框模型來產生0個或多個線框。這些線框的佈局由如下因素控制：

• 線框的尺寸和類型
• 定位方案（包括普通流、浮動和絕對定位）
• 文檔樹中元素間的關係
• 外部信息（如視口大小，內含圖片的固有尺寸等）

9.1.1 視口（viewport）

        用於連續媒體的用戶代理一般爲用戶提供視口（屏幕上的窗口或其餘觀看區域），用戶經過該視口查閱文檔。當視口的大小變化時，用戶代理能夠改變文檔的佈局。 

1.2 包含塊（containing block）

        不少線框的定位和尺寸的計算，都取決於一個矩形邊界，這個矩形被稱做是包含塊。 通常來講，一個元素生成的線框會做爲它子孫元素的包含塊；咱們稱之爲：一個元素線框爲它的子孫元素建造了包含塊。可見包含塊是一個相對的概念。

        值得注意的是，每一個線框的位置都被它的包含塊所影響，可是它不會被這個包含的塊所限制，它有可能溢出。

9.2 控制線框的生成

        視覺格式化模型的一部分工做就是從文檔元素生成線框。生成的線框擁有不一樣的類型，並會對視覺格式化模型的處理產生影響。生成線框的類型取決於 CSS 的「display」屬性。

9.2.1 塊級元素和塊級線框

        備註：「元素」是源文檔層面的東西，「線框」是視覺格式化模型層面的東西，能夠說「元素」被用戶代理格式化爲「線框」。

塊級元素（block-level elements）

• 被格式化成視覺上的塊的元素

• 「display」屬性的下列值能讓一個元素變成塊級的：「block」，「list-item」和「table」

塊級線框（block-level box）

• 塊級線框參與塊格式化上下文（block formatting context）

• 每一個塊級元素至少生成一個塊級線框，稱爲主塊級線框(principal block-level box)。有些元素，好比「list-item」元素，會生成額外的線框來放置列表項符號，這些額外的線框相對於主塊級線框來放置

塊容器線框（block container box）

• 除了表格線框與替換元素外，一個塊級線框也是塊級容器線框（block container box）

• 一個塊級容器線框要麼只包含塊級線框，要麼創建了行內格式化上下文並所以只包含行內線框（備註：與匿名塊線框有關）

匿名塊線框（anonymous block box）

        備註：爲更容易定義格式化，有時候須要添加額外的線框，這些線框稱爲匿名線框。匿名線框沒法經過瀏覽器中的審查元素功能來查看，也沒法經過 CSS 選擇器來操做，因此匿名線框沒法爲其設置樣式，全部樣式均來自繼承或初始值（initial）。匿名框有兩種，一種是匿名塊線框，一種是匿名行內線框。

        在一個這樣的文檔中：

<div>
    Some text
    <p>More text</p>
</div>

        （假設 div 和 p 均爲「display: block」），div 彷佛既有行內內容也有塊內容。爲了更容易定義格式化，咱們假設「Some text」四周有一個匿名塊線框。

         上例圖片展現了 3 個盒子，其中一個是匿名的。

 

 

水平格式化的「7 大屬性」是：margin-left、border-left、padding-left、width、padding-right、border-right 和 margin-right。這些屬性與塊級線框的水平佈局有關。

這 7 個屬性的值加在一塊兒必須是元素包含塊的寬度，這每每是塊元素的父元素的 width 值。

使用 auto

若是設置 width、margin-left 或 margin-right 中的某個值爲 auto，而餘下兩個屬性指定爲特定的值，那麼設置爲 auto 的屬性會肯定所需的長度，從而使元素線框的寬度等於父元素的 width。

若是全部這 3 個屬性都設置爲非 auto 的某個值——或者，按 CSS 的術語來說，這些格式化屬性過度受限（overconstrained）——此時總會把 margin-right 強制爲 auto。

注意：只是對從左向右讀的語言（如英語）將 margin-right 強制爲 auto。若是是從右向左讀的語言，一切正相反，因此會把 margin-left 強制爲 auto，而不是 marign-right。

2.2 行內級元素和行內盒子

行內級元素（inline-level elements）

• 當元素的 CSS 屬性 display 爲 inline、inline-block 或 inline-table 時，稱它爲行內級元素

• 視覺上它將內容與其它行內級元素排列爲多行。典型的如段落內容，有文本或圖片，都是行內級元素

行內級線框（inline-level boxes）

• 行內級元素生成行內級線框

• 參與行內格式化上下文（inline formatting context）

• 行內級盒子分爲行內盒子和原子行內級盒子

行內線框（inline boxes）

• 參與生成行內格式化上下文的行內級盒子稱爲行內盒子

• 全部 display:inline 的非替換元素生成的盒是行內盒子

原子行內級線框（atomic inline-level boxes）

• 不參與生成行內格式化上下文的行內級盒稱爲原子行內級盒子

• 這些盒子由可替換行內元素，或 display 值爲 inline-block 或 inline-table

9.4 普通流（Normal flow）

        普通流中的線框不屬於塊格式化上下文就是屬於行內格式化上下文。塊級線框參與塊格式化上下文。行內線框參與行內格式化上下文。

9.4.1 塊級格式化上下文

        知足以下任意條件的元素均將在其內部創建塊級格式化上下文：

• 浮動 (元素的 float 不爲 none)
• 絕對定位 (元素的 position 爲 absolute 或 fixed)
• 行內塊 (元素的 display: inline-block)
• 表格單元格 (元素的 display: table-cell，HTML 表格單元格默認屬性)
• 表格標題 (元素的 display: table-caption, HTML 表格標題默認屬性)
• overflow 的值不爲 visible 的塊級線框

        在塊級格式化上下文中，從包含塊的頂部開始，線框一個接一個地垂直排列。兩個兄弟線框之間的垂直距離由「margin」屬性決定。塊級格式化上下文中相鄰塊級線框之間的垂直方向會發生邊界坍塌。

9.4.2 行內格式化上下文

        在行內格式化上下文中，線框是從包含塊的頂部一個挨一個水平放置的。這些線框之間的水平外邊距，邊距和內邊距都有效。線框可能會以不一樣的方式垂直對其，以它們的底部或者頂部對其，或者以它們的底部或者頂部對其，或者以它們裏面的文本的基線對齊。

9.4.3 相對定位

        當一個線框根據普通流或者浮動擺放好後，它可能會相對於該位置移動，稱之爲相對定位。若是相對定位致使具備'overflow:auto'或'overflow:scroll'的盒溢出了的話，UA必須讓用戶可以訪問這部份內容（在其偏移位置），此時，滾動條的建立可能會影響佈局。

        相對定位的盒保持它在常規流中的大小，包括換行和空格都會原樣保留。

9.5 浮動

        一個浮動線框會向左或向右移動，直到其外邊界捱到包含塊邊界或者另外一個浮動盒的外邊界。若是存在行框，浮動線框的上外（邊界）會與當前行框的上（邊界）對齊。

行佈局

匿名文本

匿名文本（anonymous text）是指全部爲包含在行內元素中的字符串。

em 框

em 框在字體中定義，也稱爲字符框（character box）。實際的字形可能必其它 em 框更高或更矮。在 CSS 中，font-size 的值肯定了各個 em 框的高度。

內容區

在非替換元素中，內容區可能有兩種，CSS 2.1 規範容許用戶代理選擇其中任意一種。內容區域能夠是元素中各字符的 em 框串在一塊兒構成的框，也能夠是由元素中字符字形描述的框。在替換元素中，內容區就是元素的固有高度再加上可能有的外邊框、邊框或內邊距。

行間距

行間距（leading）是 font-size 值和 line-height 值之差。這個差實際上要分爲兩半，分別應用到內容區的頂部和底部。行間距只應用於非替換元素。

行內框

這個框經過向內容區增長行間距來描述。對於非替換元素，元素行內框的高度恰好等於 line-height 的值。對於替換元素，元素行內框的高度則剛好等於內容區的高度，由於行間距不該用到替換元素。

行框

這是包含該行中出現的行內框的最高點和最低點的最小框。換句話說，行框上邊的界要位於最高行內框的上邊界，而行框的底邊要放在最低行內框的下邊界。

 

非替換元素的內邊距、邊框和外邊距對行內元素或其它生成的框沒有垂直效果，也就是說，它們不會影響元素行內框的高度。

9.8 比較常規流，浮動與絕對定位

 

 

10 視覺格式化模型細節

10.1 「包含塊」的定義

        有時元素線框的位置和大小相對於某個特定矩形進行計算，這個矩形稱爲該元素的包含塊。元素包含塊的定義以下：

1. 包含根元素的包含塊是一個稱爲初始包含塊（initial containing block）的矩形。對於連續媒體，它的尺寸取自視口的尺寸，而且被固定在畫布開始的位置；對於分頁媒體，它是頁面區域（page area）。初始包含塊的「direction」屬性與根元素的相同。
2. 對於其餘元素，若是該元素的「position」屬性爲「relative」或「static」，則包含塊是由其最近的塊容器祖先框的內容邊界造成的。
3. 若是一個元素的「position」屬性爲「fixed」，它的包含塊由視口（在連續媒體中）或者頁面區域（在分頁媒體中）建立。
4. 若是元素的「position」屬性爲「absolute」，它的包含塊由最近的「position」爲「absolute」、「relative」或「fixed」的祖先元素建立。

 

 

 

 

 

 

 

浮動

浮動元素的包含塊是其最近的塊級祖先元素。浮動元素會生成一個塊級框，而不論這個元素自己是什麼。

 

 

12 內容生成，自動編碼和列表

CSS 2.1 中，內容能夠經過兩種機制生成：

• 「content」屬性，結合 :before 和 :after 僞元素
• 具備值爲「list-item」的「display」屬性的元素

12.1 :before 與 :after 僞元素

:before 和 :after 僞元素指定了位於元素的文檔樹內容以前和以後的內容的位置。「content」屬性，結合這些僞元素，指定了插入什麼（內容）

12.2 「content」屬性

Value	normal | none | [<string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
Initial	normal
Applies to	:before 和 :after 僞元素
Inherited	none
Percentages	N/A
Media	all
Computed	對於元素，計算值爲「normal」。對於 :before 和 :after，若是指定值爲「normal」，計算值就是「none」。不然，對於 URI 值，（計算值）就是絕對 URI；對於 attr() 值，就是產生的字符串；對於其它關鍵字，就與指定值相同。

 

該屬性配合 :before 和 :after 僞元素來在文檔中生成內容。值含義以下：

none

不生成該僞元素

normal

對於 :before 和 :after 僞元素計算值爲 「none」

uri

該值是一個 URI，指定一個外部資源（例如一張圖片）。

counter

計數器能夠經過兩個函數來指定：「counter()」或者「counters()」。前者有兩中形式：「counter(name)」或者「counter(name, style)」。

open-quote 和 close-quote

這些值會根據「quotes」屬性替換爲合適的字符串

attr(X)

該函數返回一個字符串，爲該選擇器的對象（subject）的 X 屬性的值。該字符串不會被 CSS 處理器解析。若是該選擇器的對象沒有 X 屬性，就返回一個空字符串。屬性名的大小敏感性取決於文檔語言。

13 分頁媒體

        在 CSS 術語中，分頁媒體（paged medium）是把文檔表示處理爲一系列離散「頁面」的媒體。這與屏幕媒體有所不一樣，屏幕媒體是一種連續媒體（continuous medium）：文檔表示爲一個可滾動的「頁面」。

15 字體

當一個字體名中有一個或多個空格（如 New York），或者若是字體名包括 # 或 $ 之類的符號，才須要在 font-family 聲明中加引號。