DIV CSS 佈局教程網

網頁制作poluoluo文章簡介：乍看之下, CSS 布局模式簡單明了。盒子，邊框和邊距都是相當簡單的對象， CSS 語法對它們的特性描述並不復雜。

序言

乍看之下, CSS 布局模式簡單明了。盒子，邊框和邊距都是相當簡單的對象， CSS 語法對它們的特性描述並不復雜。

然而, 浏覽器渲染引擎遵循著 CSS 2.1 推薦中所規定的一大堆規則，此外還有一些自己的規則。因此，對設計師而言，在將某個高級技巧添加到自己的技術集之前，需要先了解大量細節問題。

在本文中，我們將對那些控制 HTML 元素的布局的 CSS 屬性進行介紹，這些 CSS 屬性包括 HTML 元素的邊框，邊距和許多其它屬性。本文所涵蓋的范圍還包括上面提到的一些規則。高級的欄式布局以及柵網聚焦技術將在後面的文章中討論，這些文章將更加詳細地對布局，浮動，清除，以及定位進行探討。

變化的組合：CSS 中的邊距，邊框和填充距

在默認情況下，許多 HTML 元素如 div 元素和標題會渲染到占據浏覽器畫布的全部寬度，並且會強制實行末端斷行，因此成串的這種元素的渲染效果在文檔畫布上會處於從上到下的堆疊中。

但是，HTML 元素和其通常的浏覽器樣式並不能滿足開發員想達成的所有用途。把 CSS 與 HTML 合在一起用來“彌合差距”，從而 class 和 id 給標簽添加語義，而樣式表規則可以精確地改變布局和頁面內容外觀——甚至可能通過抵消掉浏覽器默認樣式的大部分效果來實現這一點。

對空白的細致控制是設計者最重要的工具之一——筆者認為它是重中之重。然而，盡管對空白的控制度能給網站設計帶來高產品價值，但在默認的浏覽器樣式表中卻缺乏這種控制，這就意味著設計師會頻繁用到本文所說的邊距,邊框,填充距, 和其它 CSS 布局屬性。

邊距，邊框和填充距的分布如圖1所示。

圖1：一個元素盒中各組成成分的詳細圖示，標有相關CSS屬性。

在對象周圍添加空白：margin-top、margin-right、margin-bottom、margin-left 及邊距屬性

邊距可單獨指定，也可在一條縮寫規則中加以指定。另外縮寫規則還可以對某個對象周圍的各個邊框進行控制。合法的值通常是用 px 或 em 單位指定的（像素或字體高）。而在 print-specific 樣式表單中會相反用 in、cm 或 pt 單位（英寸、厘米或點）。

在所有情況下 %（百分比）值都是合法的，但須謹慎使用；此類值是按照父元素寬度的比例來計算的，漫不經心的賦值會造成意外的後果。這一問題將會在下面對 CSS 盒模型的討論中加以詳述。

除圖像外所有內聯元素都沒有邊距，因而無需邊距值。關於這些元素的列表，請參閱下面的表2.

自動邊距

依據不同的情況，auto 的賦值會指示浏覽器按照自己樣式表中的值來渲染邊距。但是，在將這樣的邊距應用到某個元素上，而該元素的寬度具有意義時，auto 邊距會將所有可用空間渲染成空白。

看看下列規則：

.narrowWaisted {
  width: 16.667em;
  margin: 1em auto 1em auto;
}

…class narrowWaisted 的塊元素會將自身對齊到可用畫布的中心。

…或可將某個適當元素的右邊距設成某個相對較小的值，而左邊距設為 auto 值。

設置完成後，這樣的元素就會接近於右對齊。

負邊距

所有邊距屬性都可以設為 negative。進行這種設置之後，就能以任意程度“抵消”相鄰的邊距。如果將一個足夠大的負邊距應用到一個足夠大的元素上，受其影響的相鄰元素甚至可以被重疊。

例如，看看下面簡單的 div 元素（取自示例文件 negativemargin1.html。）

<div id="header"><h1>Lovely header</h1></div>
<div id="content"><p>Overlapping text is entirely unreadable</p></div>

如果用下面的CSS來樣式化

body {background-color:white font-family:Geneva, Arial, Helvetica, sans-serif;}
#header { background-color:yellow }
h1 { color:red; font-size:2em; }

就會產生如圖 2 所示的效果：

圖2：這個簡單示例中的兩個元素。看起來很普通。

有意思的是下面這部分。現在我們要通過下面的規則給位於下邊的元素的頂部添加一個相當大的負邊距：

#content {margin-top:-3em;}

這樣我們就會看到該元素上移了，重疊在標題上，如圖3所示（實際例子參見negativemargins2.html 示例文件）。

圖 3：應用了負邊距之後，下邊的元素上移並重疊在標題上。

合並邊距

兩個相似並相鄰的塊元素都有正邊距時，兩個邊距中只有較大那個才會得以應用。如，試試下面的規則：

p {
  margin: 1em auto 1.5em auto;
}

如果按照字面含義對含有這種樣式規則的文件進行渲染，連續的兩個段落之間的最終邊距應該是 2.5em ，即段落 1(1.5em)的底部邊距與段落 2(1em)的頂部邊距之和。但是，由於合並邊距的應用，它們之間的邊距只有 1.5em。

在塊元素中列表和標題是特例，它們的邊距不會與其它塊元素的邊距相合並。

網頁制作poluoluo文章簡介：乍看之下, CSS 布局模式簡單明了。盒子，邊框和邊距都是相當簡單的對象， CSS 語法對它們的特性描述並不復雜。

示例1

在文本樣式化一文中，F. Scott Fitzgerald 作品的開頭部分的排版是由CSS做成的。本文中的示例用的是同一篇文章，只是對這片文章做了些小改動（主要是在正文周圍加上一個容器元素）。沒有對其文本式樣作改動，只是去掉了該示例中用到的一些布局樣式。

首先，我們將邊距加到所有需要邊距的元素上。

鏈接:

• 只做了最低程度的樣式化處理的示例文件
• 初始樣式表
• body，標題，格言引用，文件容器和段落上的新邊距
• 示例1的樣式表

新規則:

body { margin: 0; }
  #main { margin: 0 auto 0 auto; }
  h1 { margin: 0 0 1em 0; }
  .pullQuote { margin: auto 0 1em 1em; }
  p { margin: 0; }
  .attribution { margin: 0 0 1.5em 0; }

給對象添加邊框 ：邊框屬性

border 縮寫屬性有是有的, 但是只有在給一個元素四邊都加上完整一致的邊框時才能用到它。通過下列屬性的任意有意義的組合,可以給一個元素的四個邊框之一設置粗細（寬度）、樣式和顏色：

• border-width
• border-style
• border-color
• border-top
• border-top-width
• border-top-style
• border-top-color
• border-right
• border-right-width
• border-right-style
• border-right-color
• border-bottom
• border-bottom-width
• border-bottom-style
• border-bottom-color
• border-left
• border-left-width
• border-left-style
• border-left-color

border-width 屬性

這些屬性的作用與人們所預期的一致：它們給一個或多個邊框指定明確的粗細.

border-width 縮寫屬性可支持的屬性值表示法與 margin 縮寫屬性的一樣，只是不支持百分比值。你可以像下面這樣寫規則：

td {
	border-width: 1px 0 0 1px;
}

border-style 屬性

圖 4：八個常見的邊框樣式的運行效果。

border-style 屬性通常接受下列這些值：

dashed

虛線的長度，及它們之間的空白的大小視浏覽器而定.

dotted

點（形狀不定，長寬比為 1）與點之間的空白的大小視浏覽器而定。

double

設置的寬度將分成三段，按照填充－不填充－填充的順序渲染。

groove

會緊貼在邊框內部渲染出 outset，並inset對齊。

inset

邊框會帶有陰影效果，看起來像是把應用了該樣式的元素壓進了畫布。

none

相當於對 -width 屬性賦零值。

outset

邊框會帶有陰影效果，看起來像是把應用了該樣式的元素擠壓出容器之中。

ridge

會緊貼在邊框內部渲染出 inset，並與 outset 對齊。

solid

邊框表現為一條沒有斷點也沒有陰影的線。

應用border-style 縮寫屬性時，一次至多可寫四個值，其形式與 margin 縮寫形式一樣。

邊框的淡化（而不是省略邊框）處理是由 -color 屬性進行的。

border-color 屬性

最後，我們可以對任何一個邊框設置任意顏色，這種操作可以通過單獨對上面所列出的屬性進行設置來完成，也可以通過 border-color 縮寫屬性來完成。對於在縮寫屬性中給出的值少於四個時會產生的效果，詳見 margin 縮寫屬性說明。

像 background-color 一樣，border-color 可以取 transparent。這一點在對付要求組合一致但不要求邊框使用一致的邊緣情況時會很有用。

詳述邊框縮寫屬性和它的四個近親

和各種 -width、-style 和 -color 屬性不同，你可以用這五個屬性來定義某個對象的四側邊框的三個特征，或每次定義任一邊框的三個特征。合法的 border（等等）縮寫值包含所有或任一應用於此邊框的寬度，樣式和顏色屬性；唯一的限制是你必須要麼一次只提交某個元素的一側邊框，要麼四側邊框全部提交。

看看下列 border 規則:

#borderShorthandExample {
	border: 2px outset rgb(160,0,0);
	padding: .857em;
	background-color: rgb(255,224,224);
}

應用了上面規則的元素會產生與此處相同的效果。

如果在 border 縮寫規則中省略某個值時，渲染出來的元素就會表現出對應的默認效果；

• 邊框寬度視浏覽器而定。
• 邊框樣式將是 solid。
• 邊框顏色將與該元素所應用的 color一致。

創建線條: 五個… 而不是一個邊框縮寫屬性的基本原理

這裡所說的“rules”是指劃過某個布局的線條，而不是要遵從的指令。這樣的線條可以增強一個元素與它旁邊的空白的對比度，在許多情況下，它們有助於制作一個布局中的立體感效果。inset 和 outset 邊框樣式就是這種效果的例子。

對一個元素的四邊都加上邊框可以得到相同的效果，而這種在布局上劃出精確界定的線條的技能可以使設計者對細節有相當大的控制權。

網頁制作poluoluo文章簡介：乍看之下, CSS 布局模式簡單明了。盒子，邊框和邊距都是相當簡單的對象， CSS 語法對它們的特性描述並不復雜。

…為什麼要這麼多屬性?它們只是邊框而已，不是嗎?

如果一個布局的創建要求設計師具備高超的技藝，這就需要對邊緣情況進行處理；這個問題已在早先討論邊距時提出了。

因為網站設計方式的緣故，你會遇到許多這樣的情況，同一 HTML 文檔中的某個元素與其它元素結構屬性相似，卻要求有不同的外觀。在這些情況下，對大多數元素編寫寫一種規則，而對每個邊緣情況編寫附加規則就會非常有用。這就是auto和inherit值存在的原因：將默認樣式作為邊緣情況處理。

對邊框來說，邊緣情況很可能要求對某個元素某側的邊框的某個屬性進行改變¬——如果某個人明智地選擇遵從 KISS 法則，最好堅持只改變需要變動的細枝末梢。

示例2

文件中的某些部分需要以規則和邊框的形式進行修飾。

鏈接：

• 在 title 的尾部添加規則，並給格言引用添加邊框
• 示例2的樣式表

新規則：

h1 { border-bottom: 1px solid rgb(153,153,153); }
.pullQuote { border: 1px solid rgb(153,153,153); }

只有邊距是不夠的：填充距屬性

你可能會遇到背景顏色處於次要地位或帶有需要在內容和邊距之間留出縫隙的強調色的元素。你也可能遇到需要在邊框和靠近邊框的文本之間留出空隙的情況。

在如此種種情況下，padding、padding-top、padding-right、padding-bottom 和 padding-left 屬性就可以大顯身手。這些屬性用於在元素和其內容的邊距或邊框之間插入負間距。邊距，邊框和填充距之間關系的明確圖解請參見上面的圖1。

這些屬性的運作方式與邊距屬性完全相同，除了以下例外：

• 對填充距屬性來說，auto 值並不起作用。
• 負填充距值是不合法的。
• 填充距不會合並。
• 邊距值不是用於內聯元素的，而填充距值才是。

示例3

應當在之前已經添加了邊框的元素上添加間隙。

鏈接：

• 在之前添加到標題和格言引用的邊框和文本之間插入空隙
• 示例3的樣式表

新規則:

body { padding: 0; }
  h1 { padding: .5em 0 .5em 0; }
  .pullQuote { padding: .5em; }

對元素的寬度和高度進行處理

通常大部分元素的尺寸可以被更改。這種性質已在前面討論 auto 邊距時說明過了。

用來控制元素尺寸的CSS屬性包括 width、height、min-width、max-width、min-height 和 max-height。這些屬性可通過 overflow 屬性與元素內容的尺寸相分離（或連接）。

此外還有 clip 屬性，用於將元素的一部分隱藏於其邊距中。但由於並不常用，所以在本文中就不詳述了。

寬度和高度基礎

通常，人們可以預見 width 和 height 的效果。但是，使用時也有些地方需要注意。

• width 和 height 不能用於 inline 元素… 在特定情況下一些元素（如span、strong 和 em）會無視 width 和 height 的值。這些元素的清單將在後面對元素類型進行探討時列出。
• …盡管圖像是內聯元素,但它們是可以指定 width 和 height的。 CSS 2.1 推薦將圖像看做“被替代”元素，這意味著浏覽器會把它們當作含有靜態尺寸對待。因此，這些尺寸 可以被任意更改。
• 只有 width 和 height 屬性可以影響一個元素的功能性尺寸。 因此，常有這種情況出現：一個元素太小（常常是太窄）而不能像預期的那樣裝下它的內容，從而引起冒出。下面論及的 CSS 盒模型將會牽扯到這一問題。
• 微軟 Internet Explorer（IE）的渲染漏洞，使得明確指定一些元素的 width 或 height 屬性/值組成為必要。 IE 的渲染引擎的一些缺陷只能以強力解決掉（參見詞匯表）。人們已了解了很大一部分缺陷，並准備要在 IE 8 中把它們消除掉，但在 IE 8 在 IE 安裝基礎中取代其前輩之前，這個問題將是無法回避的測試用例。PositionIsEverything.net 和 CSS-Discuss Wiki 提供了大量有關於這個問題和其解決技巧的信息。
• 有時取整算法會導致浏覽器間不合規格的布局差異，這些浏覽器是通過 LCD、LED 或 CRT（type="screen"）顯示媒體來展示內容的。 screen 媒體類型最終會要求所有單位換算為像素度量單位，而浏覽器間的像素度量單位會各不相同。

min-width、max-width、min-height、和max-height

有時，你會遇到這種情況：你需要對一個元素的大小進行約束——通常是為了保證一個大小為比例值的列能夠保持在一個易於閱讀的寬度上。各種 min- 和 max- 屬性正是作用於此。與 width 和 height 情況一樣，通常這些屬性的使用效果是可以預見的。

但是以筆者的經驗來看，這些屬性的用途有限（盡管替他一些作者持異議）。像以前簡單的 width 和 height 一樣，它們也受到取整誤差的困擾，這種誤差很能會導致完全意外的後果。 更重要的是，IE 6 完全不支持它們。到2008年七月為止，IE 6 在市場上仍占有很大份額。

網頁制作poluoluo文章簡介：乍看之下, CSS 布局模式簡單明了。盒子，邊框和邊距都是相當簡單的對象， CSS 語法對它們的特性描述並不復雜。

示例4

auto 邊距是放在頁面容器的左側和右側的。現在為了使這些邊距值有意義，我們來為其設置 width。此外，還要給格言引用設置一個 float 值，使它也獲得寬度。

鏈接：

• 改變文檔容器和格言引用的寬度
• 示例4的樣式表

新規則：

#main { width: 42em; }
.pullQuote { width: 14em; }

溢出：是對內容進行限制，還是給它自由

設定元素的 width 或 height 時，有時會需要考慮在該元素的內容占據的空間超過了嚴格意義上可獲得的空間時，我們期望得到什麼樣的效果。在那些既有用戶生成內容，又有嚴格布局規范的網站上尤其需要注意這一點。

overflow 屬性和它的四個有效值——visible、hidden、auto 和 scroll ——可用於處理這種情況。圖 5 展示了將這幾個屬性值應用到一個內容超出其邊界框的元素上所產生的效果。

圖 5: CSS overflow 屬性的效果。

四種溢出屬性值的效果

visible （默認）

在不影響相鄰元素的 flow 或邊距的同時，顯示超出元素可用空間的內容。因此，某個元素的內容將與其相鄰元素的內容相沖突。在後面的教程中，會對避免這種情況的技巧，以及在 IE 中因渲染問題而產生的特殊情況進行討論。

hidden

超出該元素的界限的所有內容將被隱藏而不可見。

auto

跟用 hidden 值時一樣，元素的尺寸會受到限制，但是會創建一個滾動條，使訪問者可以獲得溢出的內容。

scroll

即使在不必要的情況下，也會在元素上添加垂直和水平滾動條。

CSS 盒模型：將一切組合起來

既然我們已經講完了基本的布局屬性，接下來我們就來看看浏覽器是如何按照一個元素的 CSS 屬性來渲染它的寬度的——以及避免你的元素從布局中溢出。有些效果非常好，而另一些似乎毫無道理可言。麻煩的是有兩種布局算法需要考慮：在 CSS 2.1 推薦中，由萬維網聯盟（W3C）所指定的模型，和較早版本的 IE 中所用的模型。

為你的布局選擇適當的單位

對於文本來說，元素的大小可以用比例單位 % 或 em，或者像 px 這樣的靜態單位來設置。需要考慮的還有浏覽器畫布的大小永遠是靜態值，如果不用客戶端 script 代碼，是不可能恢復這個尺寸或調整窗口大小的——這種情況對於可訪問性，可用性和媒體便攜性的要求來說很不合適。

元素大小調整的重要規則：混用比例單位和靜態單位時應慎重，或者干脆不要混用

默認的 width 和 height 值是 auto，這在標准英語中意即“使用所有可用空間”的指令 。對塊元素來說其效果是，計算出的 width 占完了所有可用空間。對 height 來說，默認情況下元素會擴展來容納它們的所有內容。

改變 width 和 height 值時，必須小心確保元素的內容（帶有邊距，邊框和填充距）與你所指定的寬度相適應。為了實現這一點，最簡單的辦法就是進行下列步驟：

1. 在普通的顯示器和/或字號條件下，考慮布局可用的最大寬度。到本文撰寫時為止,這個數值一般是大約 800 或 1024 像素。你的網站受眾越廣，越應選這些值中較小的值。
2. 為你的整個文檔創建一個容器元素，該元素的寬度在第一步所得寬度之內。
3. 為第二步所創建的容器元素中的元素設置布局屬性時，采用與該容器元素相同的單位類型。

為布局選擇適當的單位類型：優缺點

單位 優點 缺點 em

• 最適合於創建精確的二維布局柵格
• 用在與文檔容器有關的方面時，會使布局跟據正文大小而擴展或收縮
• 可以使元素大小的計算值變得很容易估計

• 分數單元可能會由於浏覽器之間的細微差異而擴張或縮小
• 為了達到最佳效果，文檔中所有 font-size 和 line-height 值都應當設為明確而可預計的值

百分比

• 最適用於完全彈性布局
• 對於創建等寬欄之類的對象來說這是最簡單的辦法

• 為了避免內容冒出，可能會需要創建額外的容器元素
• 可能會導致元素過寬或過窄
• 其效果高度依賴於環境（參見下面的盒模型部分）

px

• 可以提供最高的布局控制權
• 可以消除大多數因浏覽器差異而造成的變化

• 最不能滿足可訪問性和跨媒體支持要求s
• 最容易受到內容冒出的影響

表格 1: 設置布局屬性時，百分比，em 和像素單位的優缺點

盒模型組件

盒模型實際上只是一系列指令，用來定義元素的種種布局規范如何相互作用。盒模型涵蓋的組件有：

1. 文檔畫布
2. 邊距
3. 邊框
4. 填充距
5. 元素的寬度和高度
6. 子元素屬性

上面的最後一項依次包含了其它5項。但是為簡明起見，這一部分將集中討論簡單的父元素－子元素關系，多級盒模型交互作用將保留到後面詳談頁面布局的文章中再做深入討論。

網頁制作poluoluo文章簡介：乍看之下, CSS 布局模式簡單明了。盒子，邊框和邊距都是相當簡單的對象， CSS 語法對它們的特性描述並不復雜。

W3C 的盒模型：一切都是附加的

基本規則就是一個元素的寬度或高度計算值等於：

margin + border + padding + (width|height)

在許多情況下，width 和/或 height 都設置的是其默認的 auto 值，這就是說為頁面內容預備的畫布區域等於：

available_canvas ? margin ? padding ? border

在這樣的等式中，available_canvas 本身是一個離散值（如果是自動計算的話）, 用它來減去邊距，邊框和填充距。 這個數字對元素的寬度極為重要，設計者的計算錯誤將會導致在浏覽器窗口上出現水平滾動條這種讓人頭疼的結果。另外，浏覽器通常會將元素置於浏覽器畫布的左邊，但它可能會溢出浏覽器窗口的右邊，除非有其它命令來限定。

看看下面的樣式表規則:

#myLayoutColumn {
  width: 50em;
  margin: 1.5em auto 1.5em auto;
  border: .1em;
  padding: .9em;
}

如前面在討論邊距屬性時說過的那樣，#myLayoutColumn 會將自身對齊到其容器元素的中心，無論其容器是 body，還是由開發團隊做出的其它東西。

另外，如果“嚴格模式”的激活（通過一個適當的 !DOCTYPE 聲明）應用了 W3C 的盒模型的話，也可估算出非邊距 al寬度是：

0.1em + .9em + 50em + .9em + .1em = 52em

在 screen 媒體上，浏覽器會采用此值，將所有屬性值分別取整為最接近的像素值，並按照這些值來進行最終效果渲染。

W3C 盒模型中的百分比邊距和填充距

使用 W3C 盒模型時，百分比的邊距和填充距是相對於其包含元素的 width 計算值來計算的。例如，如果為一個包含在 800 像素寬的元素中的元素指定 margin: 20%，該元素周圍的邊距就是每邊 160 像素（800 的 20% 是 160）。

如果對這個元素指定 padding: 5%，它的內容寬度計算值就是400像素:

20% + 5% + 5% + 20% = 50%
0.50 × 800 = 400
800 ? 400 = 400

對文件流進行處理

由於後面的教程要討論多欄式布局的制作，本文下面將介紹三個 CSS 屬性：display、float 和 clear。

元素類型和顯示屬性

除 html、body 和 table 部分之外，在 HTML 4.01 推薦中與主要內容有關的所有元素都有一種相關聯的類型：內聯或塊。每種類型以不同方式決定了默認布局表現：

inline

• 緊接在內聯元素前/後的文本和圖片與內聯元素的內容渲染為同一基准線。但如果該文本或圖片過長，它們就會與包含元素的邊緣相重疊，在這種情況下，內嵌內容就會跑到一條新基准線上面，而該基准線位於之前的那條基線的下面。
• 內聯元素中，文本行的布置會視需要（或允許）而帶有軟換行符，除非用 white-space 屬性修改了這種方式。
• 樣式表規則中可應用於這些元素的 margin、width、height 和 float 屬性被忽略。（除了 img 和 object）
• 內聯元素只能容納文本或其它內聯元素。

block

• 這些元素將在其容器中渲染為離散塊。
• 這些元素的前後將總是渲染有斷行點，除非將 float 值設為 left 或 right。
• 如果嵌套塊元素之間沒有任何內容，它們之間的斷行點通常會被合並。
• 寬度為 auto（默認）的塊元素會一直擴展，直到占滿所有可獲得的寬度。

display 屬性有三個常用的值¬——block、inline 和 none——其中兩個是指對應的元素類型。改變元素的 display 值可以使內聯元素的表現方式像塊元素那樣，也可以使塊元素的表現方式像內聯元素那樣，還可以改變文件的渲染效果，使之看起來就像元素（和它的所有內容）根本不存在一樣。

網頁制作poluoluo文章簡介：乍看之下, CSS 布局模式簡單明了。盒子，邊框和邊距都是相當簡單的對象， CSS 語法對它們的特性描述並不復雜。

一般來說,了解默認情況下哪些元素與哪些類型相對應是很關鍵的，其關系簡列於表2中:

元素 類型 子類型 說明 a inline special   abbr inline phrase   acronym inline phrase   address block   一般與p的行為方式類似 blockquote block   在!DOCTYPE聲明為Strict時，必須包含至少一個塊元素 body     封裝了整個文檔畫布；一般會有 10px 的邊距（在 IE, Firefox 和 Safari中）或是填充距（在Opera中），像素大小視所用的 screen 媒體而定 cite inline phrase   div block     em inline phrase   fieldset block   默認情況下一般按照 border: 1px black; 渲染 form block     h1 … h6 block heading   input inline formctrl   img inline special   label inline formctrl   li block   文檔類型定義中沒有指明該元素的類型，但該元素可包含塊元素和內聯元素；完成版的 CSS2.1 推薦為列表項留出了 display 值 ol block list   p block   只能包含內聯元素；一般會渲染有頂邊距和底邊距 span inline special   strong inline phrase   table block     ul block list  

表2: 常用 HTML 元素和它們的類型。只有具有相同子類型的相鄰塊元素之間的邊距才會合並。

示例5

只是為了做個演示，將標題中的 “Prologue” 注釋掉怎麼樣？

鏈接:

• 從標題中移除不相干的部分
• 示例5的樣式表

新規則:

.sectionNote { display: none; }

使元素環繞於其它元素周圍: 浮動屬性

本段左邊放了一張照片。當然你們都會看到後面的文本自然地環繞於其周圍，盡管有人得先停止琢磨為什麼著名的科幻小說家要在他的貓身上綁塊兒熏肉——即使今天是他的慢調生活日。我們可以用 HTML 屬性來指定你所看見的布局表現，但在這個例子中該效果是由 CSS 完成的。

可以猜到，這個戲法是由 float: left; 這一屬性/值組完成的。在後面的文章中將會介紹運用浮動這個好點子，但有必要在這裡談談它的基礎。float: right 是極有用的屬性/值組。如果你要取消一個引用了 float 的 class 賦值，你可以指定 float: none。

float 屬性有一些用法說明：

• 只有將 float 值應用於帶有顯式 width 的塊元素時，它才起作用。
• 可以將float、clear 和 margin 屬性一起用在樣式表中，來在布局中創建欄。
• 讓一個浮動元素延伸到其容器的底部比較難，但也不是不可能。這樣做的常用方法被稱作偽列布局。

示例6

之前已經談過了在格言引用上賦 float 值的問題。那麼完成之後，我們就可以來看看效果。我們可以添加一些背景顏色使它與主要內容區別開來。

鏈接：

• 將格言引用浮動至右邊距處
• 示例6樣式表

新規則:

.pullQuote { float: right;
background-color: rgb(204,204,204); }

強制使元素處於其前一個浮動元素之下:清除屬性

像 float 屬性一樣，可指定 clear 屬性為 left、right 或 none 三者之一。清除屬性也支持 both 值。

float 屬性指令其它元素的內容如何環繞浮動元素，clear 屬性則規定了元素如何環繞其相鄰元素¬——在許多實例中，是規定不要浮動。

圖 6 顯示了 clear: left; 的表現；此布局中兩個原來連在一起的元素被指定了相同的 height 值，而 float 值分別設為 left 和 right：

圖 6：因為高度相當，clear:left 使底部盒子清除了兩列的浮動。

前一示例中 #cLeftWidget 的默認環繞會將它置於希臘語文本下面¬——即，#fLeftWidget 和 #fRightWidget 之間 。

想想看，如果這一組元素中前一個元素比其右對齊的同僚短，會出現什麼效果？如圖7所示：

圖 7: 當右列比左列長時，clear:left 不會清除兩列，所以必須用 clear:both。

在前一個例子中，後續元素的 clear 值設為 left 是為了表明一個觀點：因為兩個 float 的元素等高，clear 的元素會被推到兩者下面。但是，第二個例子證明為了從高度不等的 float 元素取得相同的結果，必須用到 clear: both;。

這裡對 clear 屬性的探討可看做其效果的簡單介紹，後面的文章會更深入地對該屬性的用途和技巧進行討論。

總結

由於渲染引擎的種種差異，對全面涵蓋傳統的定義基礎的需要，對浏覽器窗口大小預計的無能為力，對 Web 文檔的布局都充滿了困難和限制。但是，一般的 CSS 支持水平已經可以輕易地使 Web 文檔在浏覽器上得到滿意的效果。

延伸閱讀

• Bergevin, Holly, and Gallant, John. 2006. Explorer exposed. Position Is Everything. http://positioniseverything.net/explorer.html (accessed 1 July 2008).
• Bos, Bert, et al. 2007. Cascading style sheets level 2 revision 1 (CSS 2.1) specification. World Wide Web Consortium. http://www.w3.org/TR/2007/CR-CSS21-20070719 etc. (accessed 30 June 2008).
• Raggett, Dave, et. al. 1999. HTML 4.01 specification. World Wide Web Consortium. http://www.w3.org/TR/1999/REC-html401-19991224 etc. (accessed 30 June 2008).
• Raymond, Eric, and Steele, Guy, eds. 2003. Brute force. The Jargon File (Version 4.4.7). http://www.catb.org/jargon/html/B/brute-force.html (accessed 30 June 2008).
• Scalzi, John. 2006. Clearly you people thought I was kidding. Whatever. http://www.scalzi.com/whatever/004457.html (accessed 30 June 2008).

練習題

1. 縮寫的 margin 值或單個邊距屬性如 margin-top 分別適用於什麼情況？
2. 什麼時候縮寫的 margin、padding 和 border-width 屬性要寫出全部四個值，這些值是按什麼順序作用於元素的四邊的？
3. I如果你想在一個文檔裡所有標題的文本下都畫一條線，你該使用那種屬性？
4. 為了使一個元素看起來像一個界面按鈕，你會用那種 border-style 值？
5. 判斷： 默認情況下，在元素周圍添加邊框會不會也在這個元素的內容周圍添加縫隙？ 如果創建的元素跟它的容器不一樣寬，你需要設置那組屬性/值以確保元素在其容器內水平居中？
6. 判斷： 如果將一個容器元素置於 body 中，給它的 width 設一個大於 100% 的值，文檔畫布的表現會不會變？
7. 如果圖片對包含元素來說過大，你會用哪種屬性/值來保證你的頁面不會溢出，為什麼？
8. 給 a（鏈接）元素的 display 值設為 block，並給它設一個合理的高度和寬度，在 screen 顯示媒體上這個鏈接的鼠標經過行為是如何變化的？
9. 通常情況下，塊元素會擴張來填滿其容器的寬度（除了邊距，邊框和填充距）。默認情況下，如果該元素前面有一個 float 的元素，該元素的行為是確實發生了變化，還是只是看起來發生了變化？
10. 如果想要給某個元素應用一個 float 值，在那個元素上你還需要設定什麼屬性？
11. 如果你想絕對保證一個元素總會擴展而填滿其容器的寬度，你該設置哪組屬性/值？