RTY 實踐出真知

根據上下文選擇元素

我們可以定義后代選擇器來創建一些規則，使這些規則在某些文檔結構中起作用，而在另外一些結構中不起作用。

舉例來說，如果您希望只對 h1 元素中的 em 元素應用樣式，可以這樣寫：

h1 em {color:red;}

上面這個規則會把作為 h1 元素后代的 em 元素的文本變為 紅色。其他 em 文本（如段落或塊引用中的 em）則不會被這個規則選中：

<h1>This is a <em>important</em> heading</h1> <p>This is a <em>important</em> paragraph.</p> 

親自試一試

當然，您也可以在 h1 中找到的每個 em 元素上放一個 class 屬性，但是顯然，后代選擇器的效率更高。

語法解釋

在后代選擇器中，規則左邊的選擇器一端包括兩個或多個用空格分隔的選擇器。選擇器之間的空格是一種結合符（combinator）。每個空格結合符可以解釋為“... 在 ... 找到”、“... 作為 ... 的一部分”、“... 作為 ... 的后代”，但是要求必須從右向左讀選擇器。

因此，h1 em 選擇器可以解釋為 “作為 h1 元素后代的任何 em 元素”。如果要從左向右讀選擇器，可以換成以下說法：“包含 em 的所有 h1 會把以下樣式應用到該 em”。

具體應用

后代選擇器的功能極其強大。有了它，可以使 HTML 中不可能實現的任務成為可能。

假設有一個文檔，其中有一個邊欄，還有一個主區。邊欄的背景為藍色，主區的背景為白色，這兩個區都包含鏈接列表。不能把所有鏈接都設置為藍色，因為這樣一來邊欄中的藍色鏈接都無法看到。

解決方法是使用后代選擇器。在這種情況下，可以為包含邊欄的 div 指定值為 sidebar 的 class 屬性，并把主區的 class 屬性值設置為 maincontent。然后編寫以下樣式：

div.sidebar {background:blue;} div.maincontent {background:white;} div.sidebar a:link {color:white;} div.maincontent a:link {color:blue;} 

有關后代選擇器有一個易被忽視的方面，即兩個元素之間的層次間隔可以使無限的。

例如，如果寫作 ul em，這個語法就會選擇從 ul 元素繼承的所有 em 元素，而不論 em 的嵌套層次多深。

因此，ul em 將會選擇以下標記中的所有 em 元素：

<ul>   <li>List item 1     <ol>       <li>List item 1-1</li>       <li>List item 1-2</li>       <li>List item 1-3         <ol>           <li>List item 1-3-1</li>           <li>List item <em>1-3-2</em></li>           <li>List item 1-3-3</li>         </ol>       </li>       <li>List item 1-4</li>     </ol>   </li>   <li>List item 2</li>   <li>List item 3</li> </ul> 

親自試一試

CSS ID 選擇器

在某些方面，ID 選擇器類似于類選擇器，不過也有一些重要差別。

語法

首先，ID 選擇器前面有一個 # 號 - 也稱為棋盤號或井號。

請看下面的規則：

*#intro {font-weight:bold;}

與類選擇器一樣，ID 選擇器中可以忽略通配選擇器。前面的例子也可以寫作：

#intro {font-weight:bold;}

這個選擇器的效果將是一樣的。

第二個區別是 ID 選擇器不引用 class 屬性的值，毫無疑問，它要引用 id 屬性中的值。

以下是一個實際 ID 選擇器的例子：

<p id="intro">This is a paragraph of introduction.</p>

親自試一試

類選擇器還是 ID 選擇器？

在類選擇器這一章中我們曾講解過，可以為任意多個元素指定類。前一章中類名 important 被應用到 p 和 h1 元素，而且它還可以應用到更多元素。

區別 1：只能在文檔中使用一次

與類不同，在一個 HTML 文檔中，ID 選擇器會使用一次，而且僅一次。

區別 2：不能使用 ID 詞列表

不用于類選擇器，ID 選擇器不能結合使用，因為 ID 屬性不允許有以空格分隔的詞列表。

區別 3：ID 能包含更多含義

類似于類，可以獨立于元素來選擇 ID。有些情況下，您知道文檔中會出現某個特定 ID 值，但是并不知道它會出現在哪個元素上，所以您想聲明獨立的 ID 選擇器。例如，您可能知道在一個給定的文檔中會有一個 ID 值為 mostImportant 的元素。您不知道這個最重要的東西是一個段落、一個短語、一個列表項還是一個小節標題。您只知道每個文檔都會有這么一個最重要的內容，它可能在任何元素中，而且只能出現一個。在這種情況下，可以編寫如下規則：

#mostImportant {color:red; background:yellow;}

這個規則會與以下各個元素匹配（這些元素不能在同一個文檔中同時出現，因為它們都有相同的 ID 值）：

<h1 id="mostImportant">This is important!</h1> <em id="mostImportant">This is important!</em> <ul id="mostImportant">This is important!</ul> 

親自試一試：

• 為 id 為 mostImportant 的 h1 元素設定樣式
• 為 id 為 mostImportant 的 em 元素設定樣式
• 為 id 為 mostImportant 的 ul 元素設定樣式

區分大小寫

請注意，類選擇器和 ID 選擇器可能是區分大小寫的。這取決于文檔的語言。HTML 和 XHTML 將類和 ID 值定義為區分大小寫，所以類和 ID 值的大小寫必須與文檔中的相應值匹配。

因此，對于以下的 CSS 和 HTML，元素不會變成粗體：

#intro {font-weight:bold;}  <p id="Intro">This is a paragraph of introduction.</p>

由于字母 i 的大小寫不同，所以選擇器不會匹配上面的元素。

CSS 類選擇器

類選擇器允許以一種獨立于文檔元素的方式來指定樣式。

該選擇器可以單獨使用，也可以與其他元素結合使用。

提示：只有適當地標記文檔后，才能使用這些選擇器，所以使用這兩種選擇器通常需要先做一些構想和計劃。

要應用樣式而不考慮具體設計的元素，最常用的方法就是使用類選擇器。

修改 HTML 代碼

在使用類選擇器之前，需要修改具體的文檔標記，以便類選擇器正常工作。

為了將類選擇器的樣式與元素關聯，必須將 class 指定為一個適當的值。請看下面的 HTML 代碼：

<h1 class="important"> This heading is very important. </h1>  <p class="important"> This paragraph is very important. </p> 

在上面的代碼中，兩個元素的 class 都指定為 important：第一個標題（ h1 元素），第二個段落（p 元素）。

語法

然后我們使用以下語法向這些歸類的元素應用樣式，即類名前有一個點號（.），然后結合通配選擇器：

*.important {color:red;}

如果您只想選擇所有類名相同的元素，可以在類選擇器中忽略通配選擇器，這沒有任何不好的影響：

.important {color:red;}

親自試一試

結合元素選擇器

類選擇器可以結合元素選擇器來使用。

例如，您可能希望只有段落顯示為紅色文本：

p.important {color:red;}

選擇器現在會匹配 class 屬性包含 important 的所有 p 元素，但是其他任何類型的元素都不匹配，不論是否有此 class 屬性。選擇器 p.important 解釋為：“其 class 屬性值為 important 的所有段落”。 因為 h1 元素不是段落，這個規則的選擇器與之不匹配，因此 h1 元素不會變成紅色文本。

如果你確實希望為 h1 元素指定不同的樣式，可以使用選擇器 h1.important：

p.important {color:red;} h1.important {color:blue;} 

親自試一試

CSS 多類選擇器

在上一節中，我們處理了 class 值中包含一個詞的情況。在 HTML 中，一個 class 值中可能包含一個詞列表，各個詞之間用空格分隔。例如，如果希望將一個特定的元素同時標記為重要（important）和警告（warning），就可以寫作：

<p class="important warning"> This paragraph is a very important warning. </p> 

這兩個詞的順序無關緊要，寫成 warning important 也可以。

我們假設 class 為 important 的所有元素都是粗體，而 class 為 warning 的所有元素為斜體，class 中同時包含 important 和 warning 的所有元素還有一個銀色的背景 。就可以寫作：

.important {font-weight:bold;} .warning {font-weight:italic;} .important.warning {background:silver;} 

親自試一試

通過把兩個類選擇器鏈接在一起，僅可以選擇同時包含這些類名的元素（類名的順序不限）。

如果一個多類選擇器包含類名列表中沒有的一個類名，匹配就會失敗。請看下面的規則：

.important.urgent {background:silver;}

不出所料，這個選擇器將只匹配 class 屬性中包含詞 important 和 urgent 的 p 元素。因此，如果一個 p 元素的 class 屬性中只有詞 important 和 warning，將不能匹配。不過，它能匹配以下元素：

<p class="important urgent warning"> This paragraph is a very important and urgent warning. </p> 

親自試一試

重要事項：在 IE7 之前的版本中，不同平臺的 Internet Explorer 都不能正確地處理多類選擇器。

CSS 元素選擇器

最常見的 CSS 選擇器是元素選擇器。換句話說，文檔的元素就是最基本的選擇器。

如果設置 HTML 的樣式，選擇器通常將是某個 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

html {color:black;} h1 {color:blue;} h2 {color:silver;} 

親自試一試

可以將某個樣式從一個元素切換到另一個元素。

假設您決定將上面的段落文本（而不是 h1 元素）設置為灰色。只需要把 h1 選擇器該為 p：

html {color:black;} p {color:gray;} h2 {color:silver;} 

親自試一試

類型選擇器

在 W3C 標準中，元素選擇器又稱為類型選擇器（type selector）。

“類型選擇器匹配文檔語言元素類型的名稱。類型選擇器匹配文檔樹中該元素類型的每一個實例。”

下面的規則匹配文檔樹中所有 h1 元素：

h1 {font-family: sans-serif;}

因此，我們也可以為 XML 文檔中的元素設置樣式：

XML 文檔：

<?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="note.css"?> <note> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don't forget the meeting!</body> </note> 

CSS 文檔：

note   {   font-family:Verdana, Arial;   margin-left:30px;   }  to   {   font-size:28px;   display: block;   }  from   {   font-size:28px;   display: block;   }  heading   {   color: red;   font-size:60px;   display: block;   }  body   {   color: blue;   font-size:35px;   display: block;   } 

查看效果

通過上面的例子，您可以看到，CSS 元素選擇器（類型選擇器）可以設置 XML 文檔中元素的樣式。

如果您需要更多關于為 XML 文檔添加樣式的知識，請訪問 w3school 的 XML 教程。

選擇器分組

假設希望 h2 元素和段落都有灰色。為達到這個目的，最容易的做法是使用以下聲明：

h2, p {color:gray;}

將 h2 和 p 選擇器放在規則左邊，然后用逗號分隔，就定義了一個規則。其右邊的樣式（color:gray;）將應用到這兩個選擇器所引用的元素。逗號告訴瀏覽器，規則中包含兩個不同的選擇器。如果沒有這個逗號，那么規則的含義將完全不同。參見后代選擇器。

可以將任意多個選擇器分組在一起，對此沒有任何限制。

例如，如果您想把很多元素顯示為灰色，可以使用類似如下的規則：

body, h2, p, table, th, td, pre, strong, em {color:gray;}

提示：通過分組，創作者可以將某些類型的樣式“壓縮”在一起，這樣就可以得到更簡潔的樣式表。

以下的兩組規則能得到同樣的結果，不過可以很清楚地看出哪一個寫起來更容易：

/* no grouping */ h1 {color:blue;} h2 {color:blue;} h3 {color:blue;} h4 {color:blue;} h5 {color:blue;} h6 {color:blue;}  /* grouping */ h1, h2, h3, h4, h5, h6 {color:blue;} 

親自試一試

分組提供了一些有意思的選擇。例如，下例中的所有規則分組都是等價的，每個組只是展示了對選擇器和聲明分組的不同方法：

/* group 1 */ h1 {color:silver; background:white;} h2 {color:silver; background:gray;} h3 {color:white; background:gray;} h4 {color:silver; background:white;} b {color:gray; background:white;}  /* group 2 */ h1, h2, h4 {color:silver;} h2, h3 {background:gray;} h1, h4, b {background:white;} h3 {color:white;} b {color:gray;}  /* group 3 */ h1, h4 {color:silver; background:white;} h2 {color:silver;} h3 {color:white;} h2, h3 {background:gray;} b {color:gray; background:white;} 

親自試一試：

• group 1
• group 2
• group 3

請注意，group 3 中使用了“聲明分組”。稍后我們會為您介紹“聲明分組”。

通配符選擇器

CSS2 引入了一種新的簡單選擇器 - 通配選擇器（universal selector），顯示為一個星號（*）。該選擇器可以與任何元素匹配，就像是一個通配符。

例如，下面的規則可以使文檔中的每個元素都為紅色：

* {color:red;}

親自試一試

這個聲明等價于列出了文檔中所有元素的一個分組選擇器。利用通配選擇器，只需敲一次鍵（僅一個星號）就能使文檔中所有元素的 color 屬性值指定為 red。

聲明分組

我們既可以對選擇器進行分組，也可以對聲明分組。

假設您希望所有 h1 元素都有紅色背景，并使用 28 像素高的 Verdana 字體顯示為藍色文本，可以寫以下樣式：

h1 {font: 28px Verdana;} h1 {color: blue;} h1 {background: red;} 

但是上面這種做法的效率并不高。尤其是當我們為一個有多個樣式的元素創建這樣一個列表時會很麻煩。相反，我們可以將聲明分組在一起：

h1 {font: 28px Verdana; color: white; background: black;}

這與前面的 3 行樣式表的效果完全相同。

注意，對聲明分組，一定要在各個聲明的最后使用分號，這很重要。瀏覽器會忽略樣式表中的空白符。只要加了分號，就可以毫無顧忌地采用以下格式建立樣式：

h1 {   font: 28px Verdana;   color: blue;   background: red;   } 

親自試一試

怎么樣，上面這種寫法的可讀性是不是更強。

不過，如果忽略了第二個分號，用戶代理就會把這個樣式表解釋如下：

h1 {   font: 28px Verdana;   color: blue background: red;   } 

親自試一試

因為 background 對 color 來說不是一個合法值，而且由于只能為 color 指定一個關鍵字，所以用戶代理會完全忽略這個 color 聲明（包括 background: black 部分）。這樣 h1 標題只會顯示為藍色，而沒有紅色背景，不過更有可能根本得不到藍色的 h1。相反，這些標題只會顯示為默認顏色（通常是黑色），而且根本沒有背景色。font: 28px Verdana 聲明仍能正常發揮作用，因為它確實正確地以一個分號結尾。

與選擇器分組一樣，聲明分組也是一種便利的方法，可以縮短樣式表，使之更清晰，也更易維護。

提示：在規則的最后一個聲明后也加上分號是一個好習慣。在向規則增加另一個聲明時，就不必擔心忘記再插入一個分號。

結合選擇器和聲明的分組

我們可以在一個規則中結合選擇器分組和聲明分組，就可以使用很少的語句定義相對復雜的樣式。

下面的規則為所有標題指定了一種復雜的樣式：

h1, h2, h3, h4, h5, h6 {   color:gray;   background: white;   padding: 10px;   border: 1px solid black;   font-family: Verdana;   } 

親自試一試

上面這條規則將所有標題的樣式定義為帶有白色背景的灰色文本，其內邊距是 10 像素，并帶有 1 像素的實心邊框，文本字體是 Verdana。

CSS 浮動

請看下圖，當把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：

再請看下圖，當框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。

如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。

如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”：

CSS float 屬性

在 CSS 中，我們通過 float 屬性實現元素的浮動。

如需更多有關 float 屬性的知識，請訪問參考手冊：CSS float 屬性。

行框和清理

浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。

因此，創建浮動框可以使文本圍繞圖像：

要想阻止行框圍繞浮動框，需要對該框應用 clear 屬性。clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應該挨著浮動框。

為了實現這種效果，在被清理的元素的上外邊距上添加足夠的空間，使元素的頂邊緣垂直下降到浮動框下面：

這是一個有用的工具，它讓周圍的元素為浮動元素留出空間。

讓我們更詳細地看看浮動和清理。假設希望讓一個圖片浮動到文本塊的左邊，并且希望這幅圖片和文本包含在另一個具有背景顏色和邊框的元素中。您可能編寫下面的代碼：

.news {   background-color: gray;   border: solid 1px black;   }  .news img {   float: left;   }  .news p {   float: right;   }  <div class="news"> <img src="news-pic.jpg" /> <p>some text</p> </div> 

這種情況下，出現了一個問題。因為浮動元素脫離了文檔流，所以包圍圖片和文本的 div 不占據空間。

如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個元素中的某個地方應用 clear：

不幸的是出現了一個新的問題，由于沒有現有的元素可以應用清理，所以我們只能添加一個空元素并且清理它。

.news {   background-color: gray;   border: solid 1px black;   }  .news img {   float: left;   }  .news p {   float: right;   }  .clear {   clear: both;   }  <div class="news"> <img src="news-pic.jpg" /> <p>some text</p> <div class="clear"></div> </div> 

這樣可以實現我們希望的效果，但是需要添加多余的代碼。常常有元素可以應用 clear，但是有時候不得不為了進行布局而添加無意義的標記。

不過我們還有另一種辦法，那就是對容器 div 進行浮動：

.news {   background-color: gray;   border: solid 1px black;   float: left;   }  .news img {   float: left;   }  .news p {   float: right;   }  <div class="news"> <img src="news-pic.jpg" /> <p>some text</p> </div> 

這樣會得到我們希望的效果。不幸的是，下一個元素會受到這個浮動元素的影響。為了解決這個問題，有些人選擇對布局中的所有東西進行浮動，然后使用適當的有意義的元素（常常是站點的頁腳）對這些浮動進行清理。這有助于減少或消除不必要的標記。

事實上，W3School 站點上的所有頁面都采用了這種技術，如果您打開我們使用 CSS 文件，您會看到我們對頁腳的 div 進行了清理，而頁腳上面的三個 div 都向左浮動。

CSS clear 屬性

我們剛才詳細討論了 CSS 清理的工作原理和 clear 屬性應用方法。如果您希望學習更多有關 clear 屬性的知識，請訪問參考手冊：CSS clear 屬性。

浮動和清理 實例

float 屬性的簡單應用

使圖像浮動于一個段落的右側。

將帶有邊框和邊界的圖像浮動于段落的右側

使圖像浮動于段落的右側。向圖像添加邊框和邊界。

帶標題的圖像浮動于右側

使帶有標題的圖像浮動于右側

使段落的首字母浮動于左側

使段落的首字母浮動于左側，并向這個字母添加樣式。

創建水平菜單

使用具有一欄超鏈接的浮動來創建水平菜單。

創建無表格的首頁

使用浮動來創建擁有頁眉、頁腳、左側目錄和主體內容的首頁。

清除元素的側面

本例演示如何使用清除元素側面的浮動元素。

CSS 相對定位

相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現在它所在的位置上。然后，可以通過設置垂直或水平位置，讓這個元素“相對于”它的起點進行移動。

如果將 top 設置為 20px，那么框將在原位置頂部下面 20 像素的地方。如果 left 設置為 30 像素，那么會在元素左邊創建 30 像素的空間，也就是將元素向右移動。

#box_relative {   position: relative;   left: 30px;   top: 20px; } 

如下圖所示：

注意，在使用相對定位時，無論是否進行移動，元素仍然占據原來的空間。因此，移動元素會導致它覆蓋其它框。

CSS 相對定位實例

定位：相對定位

本例演示如何相對于一個元素的正常位置來對其定位。

CSS 絕對定位

絕對定位使元素的位置與文檔流無關，因此不占據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。

普通流中其它元素的布局就像絕對定位的元素不存在一樣：

#box_relative {   position: absolute;   left: 30px;   top: 20px; } 

如下圖所示：

絕對定位的元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊。

對于定位的主要問題是要記住每種定位的意義。所以，現在讓我們復習一下學過的知識吧：相對定位是“相對于”元素在文檔中的初始位置，而絕對定位是“相對于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相對于”最初的包含塊。

注釋：根據用戶代理的不同，最初的包含塊可能是畫布或 HTML 元素。

提示：因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設置 z-index 屬性來控制這些框的堆放次序。

CSS 絕對定位實例

定位：絕對定位

本例演示如何使用絕對值來對元素進行定位。

CSS 定位和浮動

CSS 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。

定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應該出現的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。顯然，這個功能非常強大，也很讓人吃驚。要知道，用戶代理對 CSS2 中定位的支持遠勝于對其它方面的支持，對此不應感到奇怪。

另一方面，CSS1 中首次提出了浮動，它以 Netscape 在 Web 發展初期增加的一個功能為基礎。浮動不完全是定位，不過，它當然也不是正常流布局。我們會在后面的章節中明確浮動的含義。

一切皆為框

div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即“塊框”。與之相反，span 和 strong 等元素稱為“行內元素”，這是因為它們的內容顯示在行中，即“行內框”。

您可以使用 display 屬性改變生成的框的類型。這意味著，通過將 display 屬性設置為 block，可以讓行內元素（比如 <a> 元素）表現得像塊級元素一樣。還可以通過把 display 設置為 none，讓生成的元素根本沒有框。這樣的話，該框及其所有內容就不再顯示，不占用文檔中的空間。

但是在一種情況下，即使沒有進行顯式定義，也會創建塊級元素。這種情況發生在把一些文本添加到一個塊級元素（比如 div）的開頭。即使沒有把這些文本定義為段落，它也會被當作段落對待：

<div> some text <p>Some more text.</p> </div> 

在這種情況下，這個框稱為無名塊框，因為它不與專門定義的元素相關聯。

塊級元素的文本行也會發生類似的情況。假設有一個包含三行文本的段落。每行文本形成一個無名框。無法直接對無名塊或行框應用樣式，因為沒有可以應用樣式的地方（注意，行框和行內框是兩個概念）。但是，這有助于理解在屏幕上看到的所有東西都形成某種框。

CSS 定位機制

CSS 有三種基本的定位機制：普通流、浮動和絕對定位。

除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。

塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。

行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設置行高可以增加這個框的高度。

在下面的章節，我們會為您詳細講解相對定位、絕對定位和浮動。

CSS position 屬性

通過使用 position 屬性，我們可以選擇 4 種不同類型的定位，這會影響元素框生成的方式。

position 屬性值的含義：

static

元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創建一個或多個行框，置于其父元素中。

relative

元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。

absolute

元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

fixed

元素框的表現類似于將 position 設置為 absolute，不過其包含塊是視窗本身。

提示：相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。

實例

定位：相對定位

本例演示如何相對于一個元素的正常位置來對其定位。

定位：絕對定位

本例演示如何使用絕對值來對元素進行定位。

定位：固定定位

本例演示如何相對于瀏覽器窗口來對元素進行定位。

使用固定值設置圖像的上邊緣

本例演示如何使用固定值設置圖像的上邊緣。

使用百分比設置圖像的上邊緣

本例演示如何使用百分比值設置圖像的上邊緣。

使用像素值設置圖像的底部邊緣

本例演示如何使用像素值設置圖像的底部邊緣。

使用百分比設置圖像的底部邊緣

本例演示如何使用百分比值設置圖像的底部邊緣。

使用固定值設置圖像的左邊緣

本例演示如何使用固定值設置圖像的左邊緣。

使用百分比設置圖像的左邊緣

本例演示如何使用百分比值設置圖像的左邊緣。

使用固定值設置圖像的右邊緣

本例演示如何使用固定值設置圖像的右邊緣。

使用百分比設置圖像的右邊緣

本例演示如何使用百分比值設置圖像的右邊緣。

如何使用滾動條來顯示元素內溢出的內容

本例演示當元素內容太大而超出規定區域時，如何設置溢出屬性來規定相應的動作。

如何隱藏溢出元素中溢出的內容

本例演示在元素中的內容太大以至于無法適應指定的區域時，如何設置 overflow 屬性來隱藏其內容。

如何設置瀏覽器來自動地處理溢出

本例演示如何設置瀏覽器來自動地處理溢出。

設置元素的形狀

本例演示如何設置元素的形狀。此元素被剪裁到這個形狀內，并顯示出來。

垂直排列圖象

本例演示如何在文本中垂直排列圖象。

Z-index

Z-index可被用于將在一個元素放置于另一元素之后。

Z-index

上面的例子中的元素已經更改了Z-index。

CSS 定位屬性

CSS 定位屬性允許你對元素進行定位。

CSS margin 屬性

設置外邊距的最簡單的方法就是使用 margin 屬性。

margin 屬性接受任何長度單位，可以是像素、英寸、毫米或 em。

margin 可以設置為 auto。更常見的做法是為外邊距設置長度值。下面的聲明在 h1 元素的各個邊上設置了 1/4 英寸寬的空白：

h1 {margin : 0.25in;}

下面的例子為 h1 元素的四個邊分別定義了不同的外邊距，所使用的長度單位是像素 (px)：

h1 {margin : 10px 0px 15px 5px;}

與內邊距的設置相同，這些值的順序是從上外邊距 (top) 開始圍著元素順時針旋轉的：

margin: top right bottom left

另外，還可以為 margin 設置一個百分比數值：

p {margin : 10%;}

百分數是相對于父元素的 width 計算的。上面這個例子為 p 元素設置的外邊距是其父元素的 width 的 10%。

margin 的默認值是 0，所以如果沒有為 margin 聲明一個值，就不會出現外邊距。但是，在實際中，瀏覽器對許多元素已經提供了預定的樣式，外邊距也不例外。例如，在支持 CSS 的瀏覽器中，外邊距會在每個段落元素的上面和下面生成“空行”。因此，如果沒有為 p 元素聲明外邊距，瀏覽器可能會自己應用一個外邊距。當然，只要你特別作了聲明，就會覆蓋默認樣式。

值復制

還記得嗎？我們曾經在前兩節中提到過值復制。下面我們為您講解如何使用值復制。

有時，我們會輸入一些重復的值：

p {margin: 0.5em 1em 0.5em 1em;}

通過值復制，您可以不必重復地鍵入這對數字。上面的規則與下面的規則是等價的：

p {margin: 0.5em 1em;}

這兩個值可以取代前面 4 個值。這是如何做到的呢？CSS 定義了一些規則，允許為外邊距指定少于 4 個值。規則如下：

• 如果缺少左外邊距的值，則使用右外邊距的值。
• 如果缺少下外邊距的值，則使用上外邊距的值。
• 如果缺少右外邊距的值，則使用上外邊距的值。

下圖提供了更直觀的方法來了解這一點：

換句話說，如果為外邊距指定了 3 個值，則第 4 個值（即左外邊距）會從第 2 個值（右外邊距）復制得到。如果給定了兩個值，第 4 個值會從第 2 個值復制得到，第 3 個值（下外邊距）會從第 1 個值（上外邊距）復制得到。最后一個情況，如果只給定一個值，那么其他 3 個外邊距都由這個值（上外邊距）復制得到。

利用這個簡單的機制，您只需指定必要的值，而不必全部都應用 4 個值，例如：

h1 {margin: 0.25em 1em 0.5em;}	/* 等價于 0.25em 1em 0.5em 1em */ h2 {margin: 0.5em 1em;}		/* 等價于 0.5em 1em 0.5em 1em */ p {margin: 1px;}			/* 等價于 1px 1px 1px 1px */ 

這種辦法有一個小缺點，您最后肯定會遇到這個問題。假設希望把 p 元素的上外邊距和左外邊距設置為 20 像素，下外邊距和右外邊距設置為 30 像素。在這種情況下，必須寫作：

p {margin: 20px 30px 30px 20px;}

這樣才能得到您想要的結果。遺憾的是，在這種情況下，所需值的個數沒有辦法更少了。

再來看另外一個例子。如果希望除了左外邊距以外所有其他外邊距都是 auto（左外邊距是 20px）：

p {margin: auto auto auto 20px;}

同樣的，這樣才能得到你想要的效果。問題在于，鍵入這些 auto 有些麻煩。如果您只是希望控制元素單邊上的外邊距，請使用單邊外邊距屬性。

單邊外邊距屬性

您可以使用單邊外邊距屬性為元素單邊上的外邊距設置值。假設您希望把 p 元素的左外邊距設置為 20px。不必使用 margin（需要鍵入很多 auto），而是可以采用以下方法：

p {margin-left: 20px;}

您可以使用下列任何一個屬性來只設置相應上的外邊距，而不會直接影響所有其他外邊距：

• margin-top
• margin-right
• margin-bottom
• margin-left

一個規則中可以使用多個這種單邊屬性，例如：

h2 {   margin-top: 20px;   margin-right: 30px;   margin-bottom: 30px;   margin-left: 20px;   } 

當然，對于這種情況，使用 margin 可能更容易一些：

p {margin: 20px 30px 30px 20px;}

不論使用單邊屬性還是使用 margin，得到的結果都一樣。一般來說，如果希望為多個邊設置外邊距，使用 margin 會更容易一些。不過，從文檔顯示的角度看，實際上使用哪種方法都不重要，所以應該選擇對自己來說更容易的一種方法。

提示和注釋

提示：Netscape 和 IE 對 body 標簽定義的默認邊距（margin）值是 8px。而 Opera 不是這樣。相反地，Opera 將內部填充（padding）的默認值定義為 8px，因此如果希望對整個網站的邊緣部分進行調整，并將之正確顯示于 Opera 中，那么必須對 body 的 padding 進行自定義。

CSS 外邊距實例：

設置文本的左外邊距

本例演示如何設置文本的左外邊距。

設置文本的右外邊距

本例演示如何設置文本的右外邊距。

設置文本的上外邊距

本例演示如何設置文本的上外邊距。

設置文本的下外邊距

本例演示如何設置文本的下外邊距。

所有的外邊距屬性在一個聲明中。

本例演示如何將所有的外邊距屬性設置于一個聲明中。

CSS 外邊距屬性