CSS3 視覺化的格式模型

2022-09-14 00:21:19 字數 2155 閱讀 3268

在這個模型裡,文件樹上的每乙個元素都會生成零個,乙個或者多個盒子(根據盒子模型),這些盒子的布局由以下內容決定:

本章和下一章定義的屬性同樣適用於連續類**(continuous media)和頁面類**(paged media)。當然,對於頁面類**來說,margin屬性有些不一樣。

視覺化格式模型沒有指定關於格式化的所有內容(例如:字母間距的演算法)。對於本規範中沒有涉及到的那些格式化問題,各使用者**可能會有不同的表現行為。

當使用者請求乙個文件以後,對於連續類的**,使用者**會為使用者提供乙個視口(乙個視窗或者螢幕上的一塊可視區域)。當調整視口大小的時候,使用者**可能會相應的改變文件的布局。

當視口的尺寸小於用於顯示文件的畫布尺寸時,使用者**應該提供一種滾動機制。對於每乙個畫布起碼要有乙個視口,但是使用者**也可以渲染多個畫布(例如:為同乙個文件提供不同的檢視)

在 css2.1中,很多盒子的位置和尺寸是由乙個相關聯的矩形盒子的邊界計算出來。這個盒子被稱為包含塊。一般情況下,這些生成的盒子會成為這個包含塊的後代。我們稱這個盒子為這些後代建立了包含塊。

每乙個盒子會根據它的包含塊得到乙個位置,但是並不會侷限於這個包含塊中;它還可以溢位(overflow)

包含塊的尺寸具體是如何計算的,將在下一章中討論。

下面的部分描述css2.1中生成的盒型別.盒型別在一定程度上會影響到盒子在視覺化格式模型中的行文。

塊級元素(block-level elements)是指那些在視覺上被格式化成塊狀的元素(例如:段落元素)。display屬性為『block』,『list-item『,』table『會讓乙個元素成為塊級元素。

參與到塊級格式化上下文(block formatting context)的盒子被稱為塊級盒塊級元素會生成乙個主要塊級盒(principal block-level box),這個主要塊級盒包含後代元素生成的盒以及生成的內容,它也是可以使用定位方案(positioning scheme)的盒。有些塊級元素除了生成主塊級盒外,還會生成一些額外的盒子,例如dispaly屬性為list-item的元素,會生成額外的盒來存放專案符號,這些額外的盒子會根據主盒來定位。

除了table box(在下一章會詳細說明)和可替換元素,乙個塊級盒常常也是乙個塊級容器盒子。塊級容器盒要麼只包含塊級盒,要麼生成乙個行內格式化上下文從而只包含行內盒。這裡的塊級盒的概念用於描述元素與它的父元素以及兄弟元素之間的表現。而塊級容器盒的概念用於描述元素跟它後代元素之間的影響。塊級容器盒也不一定都是塊級盒,例如不可替換的行內塊,不可替換的**單元,他們都是塊級容器,但是卻不是塊級盒。同時是塊級盒和塊級容器盒的被稱為塊盒

有時候塊級盒塊級容器盒塊盒被簡稱為塊。

有如下的文件片段:

<

div>

some text

<

p>

more text

div>

其中div和p元素的display屬性為block。div元素內部既包含行級內容也包含塊級內容。為了更容易的定義這種格式化,我們假設在行級內容外包裹著乙個匿名塊盒。

也就是說:如果乙個塊級容器盒(就像上面例子中的div)的內部有乙個塊級盒(例子中的p),我們會強行讓塊級容器盒只包含塊級盒。

注:就像上文中提到的,我們在提到塊級容器盒的時候,關注的是它和它的子元素之間的影響,這裡的div是文件片段中的根元素,它沒有父元素和兄弟元素,所以我們只考慮它作為塊級容器盒時的表現。而講到p元素時,我們主要關心它與父元素以及它的兄弟元素行級內容之間的關係,所以我們只將它當作塊級盒。

而當乙個內聯盒包含乙個流內的塊級盒時,

內聯級元素在源文件中不會形成新的塊狀內容,這些內容會被分配到多行上(例如,段落標籤內的em元素以及內聯)。display屬性的inline,inline-table, inline-block值會使元素成為乙個內聯元素。內聯元素生成內聯級盒,這個內聯級盒

CSS視覺化格式模型

在css中,一切都是框。div h1 或 p 元素常常被稱為塊級元素,意味著這些元素顯示為一塊內容,呈現出的是乙個個塊框。與之相反,span 和 strong 等元素稱為行內元素,這是因為它們的內容會被顯示在一行中,呈現出的是乙個個行內框。視覺化格式模型解釋的就是,怎樣把這些框,按照一定規則擺放在頁...

精通CSS chapter3(視覺化格式模型)

3.1盒模型 當兩個或者更多垂直外邊距相遇時,他們將形成乙個外邊距,這個外邊距的高度等於兩個發生疊加的外邊距的高度中的最大者。如果沒有外邊距疊加,後續所有段落之間的空間將是相鄰外邊和底外邊距的和,這意味著段落之間的空間是頁面頂部的兩倍,這樣就不太好看了 3.2定位概述 p,h1,div等元素成為塊級...

精通CSS 第2章 視覺化格式模型

第2章 為樣式找到應用目標 選擇器 常用選擇器 1 類選擇器 2 後代選擇器 第三章 視覺化格式模型 3個最重要的css概念是浮動 定位 盒模型,這些概念控制在頁面上安排和顯示元素的方式 3.1 盒模型概述 外邊距疊加 外邊距 當二個或更多垂直外邊距相遇時,它們將形成乙個外邊距。這個外邊距的高度等於...