當同一個 Html 元素被不止一個樣式定義時，會使用哪個樣式呢？
一般而言，所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。
浏覽器缺省設置
外部樣式表
內部樣式表（位於 <head> 標簽內部）
內聯樣式（在 Html 元素內部）
因此，內聯樣式（在 Html 元素內部）擁有最高的優先權，這意味著它將優先於以下的樣式聲明：<head> 標簽中的樣式聲明，外部樣式表中的樣式聲明，或者浏覽器中的樣式聲明（缺省值）。
CSS 語法
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。
selector {declaration1; declaration2; ... declarationN }
選擇器通常是您需要改變樣式的 Html 元素。
每條聲明由一個屬性和一個值組成。
屬性（property）是您希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。
selector {property: value}
下面這行代碼的作用是將 h1 元素內的文字顏色定義為紅色，同時將字體大小設置為 14 像素。
在這個例子中，h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值。
h1 {color:red; font-size:14px;}
下面的示意圖為您展示了上面這段代碼的結構：
提示：請使用花括號來包圍聲明。
值的不同寫法和單位
除了英文單詞 red，我們還可以使用十六進制的顏色值 #ff0000：
p { color: #ff0000; }
為了節約字節，我們可以使用 CSS 的縮寫形式：
p { color: #f00; }
我們還可以通過兩種方法使用 RGB 值：
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }
請注意，當使用 RGB 百分比時，即使當值為 0 時也要寫百分比符號。但是在其他的情況下就不需要這麼做了。比如說，當尺寸為 0 像素時，0 之後不需要使用 px 單位，因為 0 就是 0，無論單位是什麼。
記得寫引號
提示：如果值為若干單詞，則要給值加引號：
p {font-family: "sans serif";}
多重聲明：
提示：如果要定義不止一個聲明，則需要用分號將每個聲明分開。下面的例子展示出如何定義一個紅色文字的居中段落。最後一條規則是不需要加分號的，因為分號在英語中是一個分隔符號，不是結束符號。然而，大多數有經驗的設計師會在每條聲明的末尾都加上分號，這麼的好處是，當你從現有的規則中增減聲明時，會盡可能的減少出錯的可能性。就像這樣：
p {text-align:center; color:red;}
你應該在每行只描述一個屬性，這樣可以增強樣式定義的可讀性，就像這樣：
p {
text-align: center;
color: black;
font-family: arial;
}
空格和大小寫
大多數樣式表包含不止一條規則，而大多數規則包含不止一個聲明。多重聲明和空格的使用使得樣式表更容易被編輯：
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
是否包含空格不會影響 CSS 在浏覽器的工作效果，同樣，與 XHTML 不同，CSS 對大小寫不敏感。不過存在一個例外：如果涉及到與 Html 文檔一起工作的話，class 和 id 名稱對大小寫是敏感的。
選擇器的分組
你可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。在下面的例子中，我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。
h1,h2,h3,h4,h5,h6 {
color: green;
}
繼承及其問題
根據 CSS，子元素從父元素繼承屬性。但是它並不總是按此方式工作。看看下面這條規則：
body {
font-family: Verdana, sans-serif;
}
根據上面這條規則，站點的 body 元素將使用 Verdana 字體（假如訪問者的系統中存在該字體的話）。
通過 CSS 繼承，子元素將繼承最高級元素（在本例中是 body）所擁有的屬性（這些子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的規則，所有 body 的子元素都應該顯示 Verdana 字體，子元素的子元素也一樣。並且在大部分的現代浏覽器中，也確實是這樣的。
但是在那個浏覽器大戰的血腥年代裡，這種情況就未必會發生，那時候對標准的支持並不是企業的優先選擇。比方說，Netscape 4 就不支持繼承，它不僅忽略繼承，而且也忽略應用於 body 元素的規則。IE/Windows 直到 IE6 還存在相關的問題，在表格內的字體樣式會被忽略。我們又該如何是好呢？
友善地對待Netscape 4
幸運地是，你可以通過使用我們稱為 "Be Kind to Netscape 4" 的冗余法則來處理舊式浏覽器無法理解繼承的問題。
body {
font-family: Verdana, sans-serif;
}
p, td, ul, ol, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
4.0 浏覽器無法理解繼承，不過他們可以理解組選擇器。這麼做雖然會浪費一些用戶的帶寬，但是如果需要對 Netscape 4 用戶進行支持，就不得不這麼做。
繼承是一個詛咒嗎？
如果你不希望 "Verdana, sans-serif" 字體被所有的子元素繼承，又該怎麼做呢？比方說，你希望段落的字體是 Times。沒問題。創建一個針對 p 的特殊規則，這樣它就會擺脫父元素的規則：
body {
font-family: Verdana, sans-serif;
}
td, ul, ol, ul, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
p {
font-family: Times, "Times New Roman", serif;
}
派生選擇器
通過依據元素在其位置的上下文關系來定義樣式，你可以使標記更加簡潔。
在 CSS1 中，通過這種方式來應用規則的選擇器被稱為上下文選擇器 (contextual selectors)，這是由於它們依賴於上下文關系來應用或者避免某項規則。在 CSS2 中，它們稱為派生選擇器，但是無論你如何稱呼它們，它們的作用都是相同的。
派生選擇器允許你根據文檔的上下文關系來確定某個標簽的樣式。通過合理地使用派生選擇器，我們可以使 Html 代碼變得更加整潔。
比方說，你希望列表中的 strong 元素變為斜體字，而不是通常的粗體字，可以這樣定義一個派生選擇器：
li strong {
font-style: italic;
font-weight: normal;
}
請注意標記為 <strong> 的藍色代碼的上下文關系：
<p><strong>我是粗體字，不是斜體字，因為我不在列表當中，所以這個規則對我不起作用</strong></p>
<ol>
<li><strong>我是斜體字。這是因為 strong 元素位於 li 元素內。</strong></li>
<li>我是正常的字體。</li>
</ol>
在上面的例子中，只有 li 元素中的 strong 元素的樣式為斜體字，無需為 strong 元素定義特別的 class 或 id，代碼更加簡潔。
再看看下面的 CSS 規則：
strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}
下面是它施加影響的 Html：
<p>The strongly emphasized Word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized Word in this subhead is<strong>blue</strong>.</h2>
id 選擇器
id 選擇器可以為標有特定 id 的 Html 元素指定特定的樣式。
id 選擇器以 "#" 來定義。
下面的兩個 id 選擇器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：
#red {color:red;}
#green {color:green;}
下面的 Html 代碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。
<p id="red">這個段落是紅色。</p>
<p id="green">這個段落是綠色。</p>
注意：id 屬性只能在每個 HTML 文檔中出現一次。想知道原因嗎，請參閱 XHtml:網站重構。
id 選擇器和派生選擇器
在現代布局中，id 選擇器常常用於建立派生選擇器。
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
上面的樣式只會應用於出現在 id 是 sidebar 的元素內的段落。這個元素很可能是 div 或者是表格單元，盡管它也可能是一個表格或者其他塊級元素。它甚至可以是一個內聯元素，比如 <em></em> 或者 <span></span>，不過這樣的用法是非法的，因為不可以在內聯元素 <span> 中嵌入 <p> （如果你忘記了原因，請參閱 XHtml:網站重構）。
一個選擇器，多種用法
即使被標注為 sidebar 的元素只能在文檔中出現一次，這個 id 選擇器作為派生選擇器也可以被使用很多次：
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}
在這裡，與頁面中的其他 p 元素明顯不同的是，sidebar 內的 p 元素得到了特殊的處理，同時，與頁面中其他所有 h2 元素明顯不同的是，sidebar 中的 h2 元素也得到了不同的特殊處理。
單獨的選擇器
id 選擇器即使不被用來創建派生選擇器，它也可以獨立發揮作用：
#sidebar {
border: 1px dotted #000;
padding: 10px;
}
根據這條規則，id 為 sidebar 的元素將擁有一個像素寬的黑色點狀邊框，同時其周圍會有 10 個像素寬的內邊距（padding，內部空白）。老版本的 Windows/IE 浏覽器可能會忽略這條規則，除非你特別地定義這個選擇器所屬的元素：
div#sidebar {
border: 1px dotted #000;
padding: 10px;
}
在 CSS 中，類選擇器以一個點號顯示：
.center {text-align: center}
在上面的例子中，所有擁有 center 類的 Html 元素均為居中。
在下面的 Html 代碼中，h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選擇器中的規則。
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
注意：類名的第一個字符不能使用數字！它無法在 Mozilla 或 Firefox 中起作用。
和 id 一樣，class 也可被用作派生選擇器：
.fancy td {
color: #f60;
background: #666;
}
在上面這個例子中，類名為 fancy 的更大的元素內部的表格單元都會以灰色背景顯示橙色文字。（名為 fancy 的更大的元素可能是一個表格或者一個 div）
元素也可以基於它們的類而被選擇：
td.fancy {
color: #f60;
background: #666;
}
在上面的例子中，類名為 fancy 的表格單元將是帶有灰色背景的橙色。
<td class="fancy">
你可以將類 fancy 分配給任何一個表格元素任意多的次數。那些以 fancy 標注的單元格都會是帶有灰色背景的橙色。那些沒有被分配名為 fancy 的類的單元格不會受這條規則的影響。還有一點值得注意，class 為 fancy 的段落也不會是帶有灰色背景的橙色，當然，任何其他被標注為 fancy 的元素也不會受這條規則的影響。這都是由於我們書寫這條規則的方式，這個效果被限制於被標注為 fancy 的表格單元（即使用 td 元素來選擇 fancy 類）。
CSS 屬性選擇器
CSS 類選擇器
CSS 創建
對帶有指定屬性的 Html 元素設置樣式。
可以為擁有指定屬性的 Html 元素設置樣式，而不僅限於 class 和 id 屬性。
注釋：Internet Explorer 7 （以及更高版本）在規定了 !DOCTYPE 的情況下支持屬性選擇器。IE6 及更低的版本不支持屬性選擇器。
屬性選擇器
下面的例子為帶有 title 屬性的所有元素設置樣式：
[title]
{
color:red;
}
親自試一試
屬性和值選擇器
下面的例子為 title="W3School" 的所有元素設置樣式：
[title=W3School]
{
border:5px solid blue;
}
親自試一試
屬性和值選擇器 - 多個值
下面的例子為包含指定值的 title 屬性的所有元素設置樣式。適用於由空格分隔的屬性值：
[title~=hello] { color:red; }
親自試一試
下面的例子為帶有包含指定值的 lang 屬性的所有元素設置樣式。適用於由連字符分隔的屬性值：
[lang=en] { color:red; }
親自試一試
設置表單的樣式
屬性選擇器在為不帶有 class 或 id 的表單設置樣式時特別有用：
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
親自試一試
CSS 選擇器參考手冊
選擇器
描述
[attribute]
用於選取帶有指定屬性的元素。
[attribute=value]
用於選取帶有指定屬性和值的元素。
[attribute~=value]
用於選取屬性值中包含指定詞匯的元素。
[attribute=value]
用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value]
匹配屬性值以指定值開頭的每個元素。
[attribute$=value]
匹配屬性值以指定值結尾的每個元素。
[attribute*=value]
匹配屬性值中包含指定值的每個元素。如何創建 CSS
CSS 屬性選擇器
CSS 背景
如何插入樣式表
當讀到一個樣式表時，浏覽器會根據它來格式化 Html 文檔。插入樣式表的方法有三種：
外部樣式表
當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標簽鏈接到樣式表。<link> 標簽在（文檔的）頭部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.CSS" />
</head>
浏覽器會從文件 mystyle.CSS 中讀到樣式聲明，並根據它來格式文檔。
外部樣式表可以在任何文本編輯器中進行編輯。文件不能包含任何的 Html 標簽。樣式表應該以 .CSS 擴展名進行保存。下面是一個樣式表文件的例子：
hr {color: sIEnna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
不要在屬性值與單位之間留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它僅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中卻無法正常工作。
內部樣式表
當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用 <style> 標簽在文檔頭部定義內部樣式表，就像這樣:
<head>
<style type="text/CSS">
hr {color: sIEnna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
內聯樣式
由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時。
要使用內聯樣式，你需要在相關的標簽內使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距：
<p style="color: sIEnna; margin-left: 20px">
This is a paragraph
</p>
多重樣式
如果某些屬性在不同的樣式表中被同樣的選擇器定義，那麼屬性值將從更具體的樣式表中被繼承過來。
例如，外部樣式表擁有針對 h3 選擇器的三個屬性：
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
而內部樣式表擁有針對 h3 選擇器的兩個屬性：
h3 {
text-align: right;
font-size: 20pt;
}
假如擁有內部樣式表的這個頁面同時與外部樣式表鏈接，那麼 h3 得到的樣式是：
color: red;
text-align: right;
font-size: 20pt;
即顏色屬性將被繼承於外部樣式表，而文字排列（text-alignment）和字體尺寸（font-size）會被內部樣式表中的規則取代。
CSS 背景
CSS 創建
CSS 文本
CSS 允許應用純色作為背景，也允許使用背景圖像創建相當復雜的效果。
CSS 在這方面的能力遠遠在 Html 之上。
背景色
可以使用 background-color 屬性為元素設置背景色。這個屬性接受任何合法的顏色值。
這條規則把元素的背景設置為灰色：
p {background-color: gray;}
如果您希望背景色從元素中的文本向外少有延伸，只需增加一些內邊距：
p {background-color: gray; padding: 20px;}
如需查看本例的效果，可以親自試一試！
可以為所有元素設置背景色，這包括 body 一直到 em 和 a 等行內元素。
background-color 不能繼承，其默認值是 transparent。transparent 有“透明”之意。也就是說，如果一個元素沒有指定背景色，那麼背景就是透明的，這樣其祖先元素的背景才能可見。
背景圖像
要把圖像放入背景，需要使用 background-image 屬性。background-image
屬性的默認值是 none，表示背景上沒有放置任何圖像。
如果需要設置一個背景圖像，必須為這個屬性設置一個 URL 值：
body {background-image: url(/i/eg_bg_04.gif);}
大多數背景都應用到 body 元素，不過並不僅限於此。
下面例子為一個段落應用了一個背景，而不會對文檔的其他部分應用背景：
p.flower {background-image: url(/i/eg_bg_03.gif);}
您甚至可以為行內元素設置背景圖像，下面的例子為一個鏈接設置了背景圖像：
a.radio {background-image: url(/i/eg_bg_07.gif);}
如需查看上述例子的效果，可以親自試一試！
理論上講，甚至可以向 textareas 和 select 等替換元素的背景應用圖像，不過並不是所有用戶代理都能很好地處理這種情況。
另外還要補充一點，background-image 也不能繼承。事實上，所有背景屬性都不能繼承。
背景重復
如果需要在頁面上對背景圖像進行平鋪，可以使用 background-repeat
屬性。
屬性值 repeat 導致圖像在水平垂直方向上都平鋪，就像以往背景圖像的通常做法一樣。repeat-x 和 repeat-y 分別導致圖像只在水平或垂直方向上重復，no-repeat 則不允許圖像在任何方向上平鋪。
默認地，背景圖像將從一個元素的左上角開始。請看下面的例子：
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
如需查看上例的效果，可以親自試一試。
背景定位
可以利用 background-position 屬性改變圖像在背景中的位置。
下面的例子在 body 元素中將一個背景圖像居中放置：
body
{
background-image:url("/i/eg_bg_03.gif");
background-repeat:no-repeat;
background-position:center;
}
為 background-position 屬性提供值有很多方法。首先，可以使用一些關鍵字：top、bottom、left、right 和 center。通常，這些關鍵字會成對出現，不過也不總是這樣。還可以使用長度值，如 100px 或 5cm，最後也可以使用百分數值。不同類型的值對於背景圖像的放置稍有差異。
關鍵字
圖像放置關鍵字最容易理解，其作用如其名稱所表明的。例如，top right 使圖像放置在元素內邊距區的右上角。
根據規范，位置關鍵字可以按任何順序出現，只要保證不超過兩個關鍵字 - 一個對應水平方向，另一個對象垂直方向。
如果只出現一個關鍵字，則認為另一個關鍵字是 center。
所以，如果希望每個段落的中部上方出現一個圖像，只需聲明如下：
p
{
background-image:url("bgimg.gif");
background-repeat:no-repeat;
background-position:top;
}
下面是等價的位置關鍵字：
單一關鍵字
等價的關鍵字
center
center center
top
top center 或 center top
bottom
bottom center 或 center bottom
right
right center 或 center right
left
left center 或 center left百分數值
百分數值的表現方式更為復雜。假設你希望用百分數值將圖像在其元素中居中，這很容易：
body
{
background-image:url("/i/eg_bg_03.gif");
background-repeat:no-repeat;
background-position:50% 50%;
}
這會導致圖像適當放置，其中心與其元素的中心對齊。換句話說，百分數值同時應用於元素和圖像。也就是說，圖像中描述為 50% 50% 的點（中心點）與元素中描述為 50% 50% 的點（中心點）對齊。
如果圖像位於 0% 0%，其左上角將放在元素內邊距區的左上角。如果圖像位置是 100% 100%，會使圖像的右下角放在右邊距的右下角。
因此，如果你想把一個圖像放在水平方向 2/3、垂直方向 1/3 處，可以這樣聲明：
body
{
background-image:url("/i/eg_bg_03.gif");
background-repeat:no-repeat;
background-position:66% 33%;
}
如果只提供一個百分數值，所提供的這個值將用作水平值，垂直值將假設為 50%。這一點與關鍵字類似。
background-position 的默認值是 0% 0%，在功能上相當於 top left。這就解釋了背景圖像為什麼總是從元素內邊距區的左上角開始平鋪，除非您設置了不同的位置值。
長度值
長度值解釋的是元素內邊距區左上角的偏移。偏移點是圖像的左上角。
比如，如果設置值為 50px 100px，圖像的左上角將在元素內邊距區左上角向右 50 像素、向下 100 像素的位置上：
body
{
background-image:url("/i/eg_bg_03.gif");
background-repeat:no-repeat;
background-position:50px 100px;
}
注意，這一點與百分數值不同，因為偏移只是從一個左上角到另一個左上角。也就是說，圖像的左上角與 background-position 聲明中的指定的點對齊。
背景關聯
如果文檔比較長，那麼當文檔向下滾動時，背景圖像也會隨之滾動。當文檔滾動到超過圖像的位置時，圖像就會消失。
您可以通過 background-attachment
屬性防止這種滾動。通過這個屬性，可以聲明圖像相對於可視區是固定的（fixed），因此不會受到滾動的影響：
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
如需查看上例的效果，可以親自試一試。
background-attachment 屬性的默認值是 scroll，也就是說，在默認的情況下，背景會隨文檔滾動。
CSS 背景實例
設置背景顏色本例演示如何為元素設置背景顏色。設置文本的背景顏色本例顏色如何設置部分文本的背景顏色。將圖像設置為背景本例演示如何將圖像設置為背景。將圖像設置為背景 2本例演示如何為多個元素同時設置背景圖像。如何重復背景圖像本例演示如何重復背景圖像。如何在垂直方向重復背景圖像本例演示如何垂直地重復背景圖像。如何在水平方向重復背景圖像本例演示如何水平地重復背景圖像。如何僅顯示一次背景圖像本例演示如何僅顯示一次背景圖像。如何放置背景圖像本例演示如何在頁面上放置背景圖像。如何使用%來定位背景圖像本例演示如何使用百分比來在頁面上定位背景圖像。如何使用像素來定位背景圖像本例演示如何使用像素來在頁面上定位背景圖像。如何設置固定的背景圖像本例演示如何設置固定的背景圖像。圖像不會隨著頁面的其他部分滾動。所有背景屬性在一個聲明之中本例演示如何使用簡寫屬性來將所有背景屬性設置在一個聲明之中。
CSS 背景屬性
屬性
描述
background
簡寫屬性，作用是將背景屬性設置在一個聲明中。
background-attachment
背景圖像是否固定或者隨著頁面的其余部分滾動。
background-color
設置元素的背景顏色。
background-image
把圖像設置為背景。
background-position
設置背景圖像的起始位置。
background-repeat
設置背景圖像是否及如何重復。CSS 文本
CSS 背景
CSS 字體
CSS 文本屬性可定義文本的外觀。
通過文本屬性，您可以改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進行縮進，等等。
縮進文本
把 Web 頁面上的段落的第一行縮進，這是一種最常用的文本格式化效果。
CSS 提供了 text-indent 屬性，該屬性可以方便地實現文本縮進。
通過使用 text-indent 屬性，所有元素的第一行都可以縮進一個給定的長度，甚至該長度可以是負值。
這個屬性最常見的用途是將段落的首行縮進，下面的規則會使所有段落的首行縮進 5 em：
p {text-indent: 5em;}
注意：一般來說，可以為所有塊級元素應用 text-indent，但無法將該屬性應用於行內元素，圖像之類的替換元素上也無法應用 text-indent 屬性。不過，如果一個塊級元素（比如段落）的首行中有一個圖像，它會隨該行的其余文本移動。
提示：如果想把一個行內元素的第一行“縮進”，可以用左內邊距或外邊距創造這種效果。
使用負值
text-indent 還可以設置為負值。利用這種技術，可以實現很多有趣的效果，比如“懸掛縮進”，即第一行懸掛在元素中余下部分的左邊：
p {text-indent: -5em;}
不過在為 text-indent 設置負值時要當心，如果對一個段落設置了負值，那麼首行的某些文本可能會超出浏覽器窗口的左邊界。為了避免出現這種顯示問題，建議針對負縮進再設置一個外邊距或一些內邊距：
p {text-indent: -5em; padding-left: 5em;}
使用百分比值
text-indent 可以使用所有長度單位，包括百分比值。
百分數要相對於縮進元素父元素的寬度。換句話說，如果將縮進值設置為 20%，所影響元素的第一行會縮進其父元素寬度的 20%。
在下例中，縮進值是父元素的 20%，即 100 個像素：
div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>
繼承
text-indent 屬性可以繼承，請考慮如下標記：
div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>
以上標記中的段落也會縮進 50 像素，這是因為這個段落繼承了 id 為 inner 的 div 元素的縮進值。
水平對齊
text-align 是一個基本的屬性，它會影響一個元素中的文本行互相之間的對齊方式。它的前
3 個值相當直接，不過第 4 個和第 5 個則略有些復雜。
值 left、right 和 center 會導致元素中的文本分別左對齊、右對齊和居中。
西方語言都是從左向右讀，所有 text-align 的默認值是 left。文本在左邊界對齊，右邊界呈鋸齒狀（稱為“從左到右”文本）。對於希伯來語和阿拉伯語之類的的語言，text-align 則默認為 right，因為這些語言從右向左讀。不出所料，center 會使每個文本行在元素中居中。
提示：將塊級元素或表元素居中，要通過在這些元素上適當地設置左、右外邊距來實現。
text-align:center 與 <CENTER>
您可能會認為 text-align:center 與 <CENTER> 元素的作用一樣，但實際上二者大不相同。
<CENTER> 不僅影響文本，還會把整個元素居中。text-align 不會控制元素的對齊，而只影響內部內容。元素本身不會從一段移到另一端，只是其中的文本受影響。
justify
最後一個水平對齊屬性是 justify。
在兩端對齊文本中，文本行的左右兩端都放在父元素的內邊界上。然後，調整單詞和字母間的間隔，使各行的長度恰好相等。您也許已經注意到了，兩端對齊文本在打印領域很常見。
需要注意的是，要由用戶代理（而不是 CSS）來確定兩端對齊文本如何拉伸，以填滿父元素左右邊界之間的空間。如需了解詳情，請參閱 CSS
text-align 屬性參考頁。
字間隔
Word-spacing 屬性可以改變字（單詞）之間的標准間隔。其默認值
normal 與設置值為 0 是一樣的。
word-spacing 屬性接受一個正長度值或負長度值。如果提供一個正長度值，那麼字之間的間隔就會增加。為 Word-spacing 設置一個負值，會把它拉近：
p.spread {Word-spacing: 30px;}
p.tight {Word-spacing: -0.5em;}
<p class="spread">
This is a paragraph. The spaces between Words will be increased.
</p>
<p class="tight">
This is a paragraph. The spaces between Words will be decreased.
</p>
實例 TIY ：增加或減少單詞間距（字間隔）
注釋：如需深入理解 CSS 對“字”（Word）的定義，請訪問 CSS
Word-spacing 屬性參考頁。
字母間隔
letter-spacing 屬性與 Word-spacing 的區別在於，字母間隔修改的是字符或字母之間的間隔。
與 Word-spacing 屬性一樣，letter-spacing 屬性的可取值包括所有長度。默認關鍵字是 normal（這與 letter-spacing:0 相同）。輸入的長度值會使字母之間的間隔增加或減少指定的量：
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>
實例 TIY ：規定字符間距（字母間隔）
字符轉換
text-transform 屬性處理文本的大小寫。這個屬性有 4 個值：
none
uppercase
lowercase
capitalize
默認值 none 對文本不做任何改動，將使用源文檔中的原有大小寫。顧名思義，uppercase 和 lowercase 將文本轉換為全大寫和全小寫字符。最後，capitalize 只對每個單詞的首字母大寫。
作為一個屬性，text-transform 可能無關緊要，不過如果您突然決定把所有 h1 元素變為大寫，這個屬性就很有用。不必單獨地修改所有 h1 元素的內容，只需使用 text-transform 為你完成這個修改：
h1 {text-transform: uppercase}
使用 text-transform 有兩方面的好處。首先，只需寫一個簡單的規則來完成這個修改，而無需修改 h1 元素本身。其次，如果您以後決定將所有大小寫再切換為原來的大小寫，可以更容易地完成修改。
實例 TIY ：控制文本中字母的大小寫
文本裝飾
接下來，我們討論 text-decoration 屬性，這是一個很有意思的屬性，它提供了很多非常有趣的行為。
text-decoration 有 5 個值：
none
underline
overline
line-through
blink
不出所料，underline 會對元素加下劃線，就像 HTML 中的 U 元素一樣。overline 的作用恰好相反，會在文本的頂端畫一個上劃線。值 line-through 則在文本中間畫一個貫穿線，等價於 Html 中的 S 和 strike 元素。blink 會讓文本閃爍，類似於 Netscape 支持的頗招非議的 blink 標記。
none 值會關閉原本應用到一個元素上的所有裝飾。通常，無裝飾的文本是默認外觀，但也不總是這樣。例如，鏈接默認地會有下劃線。如果您希望去掉超鏈接的下劃線，可以使用以下 CSS 來做到這一點：
a {text-decoration: none;}
注意：如果顯式地用這樣一個規則去掉鏈接的下劃線，那麼錨與正常文本之間在視覺上的唯一差別就是顏色（至少默認是這樣的，不過也不能完全保證其顏色肯定有區別）。
還可以在一個規則中結合多種裝飾。如果希望所有超鏈接既有下劃線，又有上劃線，則規則如下：
a:link a:visited {text-decoration: underline overline;}
不過要注意的是，如果兩個不同的裝飾都與同一元素匹配，勝出規則的值會完全取代另一個值。請考慮以下的規則：
h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}
對於給定的規則，所有 class 為 stricken 的 h2 元素都只有一個貫穿線裝飾，而沒有下劃線和上劃線，因為text-decoration 值會替換而不是累積起來。
處理空白符
white-space 屬性會影響到用戶代理對源文檔中的空格、換行和 tab
字符的處理。
通過使用該屬性，可以影響浏覽器處理字之間和文本行之間的空白符的方式。從某種程度上講，默認的 XHtml 處理已經完成了空白符處理：它會把所有空白符合並為一個空格。所以給定以下標記，它在 Web 浏覽器中顯示時，各個字之間只會顯示一個空格，同時忽略元素中的換行：
<p>This paragraph has many
spaces in it.</p>
可以用以下聲明顯式地設置這種默認行為：
p {white-space: normal;}
上面的規則告訴浏覽器按照平常的做法去處理：丟掉多余的空白符。如果給定這個值，換行字符（回車）會轉換為空格，一行中多個空格的序列也會轉換為一個空格。
實例 TIY ：white-space: normal
值 pre
不過，如果將 white-space 設置為 pre，受這個屬性影響的元素中，空白符的處理就有所不同，其行為就像 XHtml 的 pre 元素一樣；空白符不會被忽略。
如果 white-space 屬性的值為 pre，浏覽器將會注意額外的空格，甚至回車。在這個方面，而且僅在這個方面，任何元素都可以相當於一個 pre 元素。
實例 TIY ：white-space: pre
注意：經測試，IE 7 以及更早版本的浏覽器不支持該值，因此請使用非 IE 的浏覽器來查看上面的實例。
值 nowrap
與之相對的值是 nowrap，它會防止元素中的文本換行，除非使用了一個 br 元素。在 CSS 中使用 nowrap 非常類似於 Html 4 中用 <td nowrap> 將一個表單元格設置為不能換行，不過 white-space 值可以應用到任何元素。
實例 TIY ：white-space: nowrap
值 pre-wrap 和 pre-line
CSS2.1 引入了值 pre-wrap 和 pre-line，這在以前版本的 CSS 中是沒有的。這些值的作用是允許創作人員更好地控制空白符處理。
如果元素的 white-space 設置為 pre-wrap，那麼該元素中的文本會保留空白符序列，但是文本行會正常地換行。如果設置為這個值，源文本中的行分隔符以及生成的行分隔符也會保留。pre-line 與 pre-wrap 相反，會像正常文本中一樣合並空白符序列，但保留換行符。
實例 TIY ：white-space: pre-wrap
實例 TIY ：white-space: pre-line
注意：我們在 IE7 和 Firefox2.0 浏覽器中測試了上面的兩個實例，但是結果是，值 pre-wrap 和 pre-line 都沒有得到很好的支持。
總結
下面的表格總結了 white-space 屬性的行為：
值
空白符
換行符
自動換行
pre-line
合並
保留
允許
normal
合並
忽略
允許
nowrap
合並
忽略
不允許
pre
保留
保留
不允許
pre-wrap
保留
保留
允許文本方向
如果您閱讀的是英文書籍，就會從左到右、從上到下地閱讀，這就是英文的流方向。不過，並不是所有語言都如此。我們知道古漢語就是從右到左來閱讀的，當然還包括希伯來語和阿拉伯語等等。CSS2 引入了一個屬性來描述其方向性。
direction 屬性影響塊級元素中文本的書寫方向、表中列布局的方向、內容水平填充其元素框的方向、以及兩端對齊元素中最後一行的為止。
注釋：對於行內元素，只有當 unicode-bidi
屬性設置為 embed 或 bidi-override 時才會應用 direction 屬性。
direction 屬性有兩個值：ltr 和 rtl。大多數情況下，默認值是 ltr，顯示從左到右的文本。如果顯示從右到左的文本，應使用值 rtl。
CSS 文本實例：
設置文本顏色本例演示如何設置文本的顏色。設置文本的背景顏色本例顏色如何設置部分文本的背景顏色。規定字符間距本例演示如何增加或減少字符間距。使用百分比設置行間距本例演示如何使用百分比值來設置段落中的行間距。使用像素值設置行間距本例演示如何使用像素值來設置段落中的行間距。使用數值來設置行間距本例演示如何使用一個數值來設置段落中的行間距。對齊文本本例演示如何對齊文本。修飾文本本例演示如何向文本添加修飾。縮進文本本例演示如何縮進文本首行。控制文本中的字母本例演示如何控制文本中的字母。在元素中禁止文本折行本例演示如何禁止在元素中的文本折行。增加單詞間距本例演示如何增加段落中單詞間的距離。
CSS 文本屬性
屬性
描述
color
設置文本顏色
direction
設置文本方向。
line-height
設置行高。
letter-spacing
設置字符間距。
text-align
對齊元素中的文本。
text-decoration
向文本添加修飾。
text-indent
縮進元素中文本的首行。
text-shadow
設置文本陰影。CSS2 包含該屬性，但是 CSS2.1 沒有保留該屬性。
text-transform
控制元素中的字母。
unicode-bidi
設置文本方向。
white-space
設置元素中空白的處理方式。
Word-spacing
設置字間距。CSS 字體
CSS 文本
CSS 列表
CSS 字體屬性定義文本的字體系列、大小、加粗、風格（如斜體）和變形（如小型大寫字母）。
CSS 字體系列
在 CSS 中，有兩種不同類型的字體系列名稱：
通用字體系列 - 擁有相似外觀的字體系統組合（比如 "Serif" 或 "Monospace"）
特定字體系列 - 具體的字體系列（比如 "Times" 或 "CourIEr"）
除了各種特定的字體系列外，CSS 定義了 5 種通用字體系列：
Serif 字體
Sans-serif 字體
Monospace 字體
Cursive 字體
Fantasy 字體
如果需要了解更多有關字體系列的知識，請閱讀 CSS 字體系列。
指定字體系列
使用 font-family 屬性 定義文本的字體系列。
使用通用字體系列
如果你希望文檔使用一種 sans-serif 字體，但是你並不關心是哪一種字體，以下就是一個合適的聲明：
body {font-family: sans-serif;}
親自試一試
這樣用戶代理就會從 sans-serif 字體系列中選擇一個字體（如 Helvetica），並將其應用到 body 元素。因為有繼承，這種字體選擇還將應用到 body 元素中包含的所有元素，除非有一種更特定的選擇器將其覆蓋。
指定字體系列
除了使用通用的字體系列，您還可以通過 font-family 屬性設置更具體的字體。
下面的例子為所有 h1 元素設置了 Georgia 字體：
h1 {font-family: Georgia;}
親自試一試
這樣的規則同時會產生另外一個問題，如果用戶代理上沒有安裝 Georgia 字體，就只能使用用戶代理的默認字體來顯示 h1 元素。
我們可以通過結合特定字體名和通用字體系列來解決這個問題：
h1 {font-family: Georgia, serif;}
親自試一試
如果讀者沒有安裝 Georgia，但安裝了 Times 字體（serif 字體系列中的一種字體），用戶代理就可能對 h1 元素使用 Times。盡管 Times 與 Georgia 並不完全匹配，但至少足夠接近。
因此，我們建議在所有 font-family 規則中都提供一個通用字體系列。這樣就提供了一條後路，在用戶代理無法提供與規則匹配的特定字體時，就可以選擇一個候選字體。
如果您對字體非常熟悉，也可以為給定的元素指定一系列類似的字體。要做到這一點，需要把這些字體按照優先順序排列，然後用逗號進行連接：
p {font-family: Times, TimesNR, "New Century Schoolbook",
Georgia, "New York", serif;}
親自試一試
根據這個列表，用戶代理會按所列的順序查找這些字體。如果列出的所有字體都不可用，就會簡單地選擇一種可用的 serif 字體。
使用引號
您也許已經注意到了，上面的例子中使用了單引號。只有當字體名中有一個或多個空格（比如 New York），或者如果字體名包括 # 或 $ 之類的符號，才需要在 font-family 聲明中加引號。
單引號或雙引號都可以接受。但是，如果把一個 font-family 屬性放在 Html 的 style 屬性中，則需要使用該屬性本身未使用的那種引號：
<p style="font-family: Times, TimesNR, "New Century Schoolbook", Georgia,
"New York", serif;">...</p>
親自試一試
字體風格
font-style 屬性最常用於規定斜體文本。
該屬性有三個值：
normal - 文本正常顯示
italic - 文本斜體顯示
oblique - 文本傾斜顯示
實例
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
親自試一試
italic 和 oblique 的區別
font-style 非常簡單：用於在 normal 文本、italic 文本和 oblique 文本之間選擇。唯一有點復雜的是明確 italic 文本和 oblique 文本之間的差別。
斜體（italic）是一種簡單的字體風格，對每個字母的結構有一些小改動，來反映變化的外觀。與此不同，傾斜（oblique）文本則是正常豎直文本的一個傾斜版本。
通常情況下，italic 和 oblique 文本在 web 浏覽器中看上去完全一樣。
字體變形
font-variant 屬性可以設定小型大寫字母。
小型大寫字母不是一般的大寫字母，也不是小寫字母，這種字母采用不同大小的大寫字母。
實例
p {font-variant:small-caps;}
親自試一試
字體加粗
font-weight 屬性設置文本的粗細。
使用 bold 關鍵字可以將文本設置為粗體。
關鍵字 100 ~ 900 為字體指定了 9 級加粗度。如果一個字體內置了這些加粗級別，那麼這些數字就直接映射到預定義的級別，100 對應最細的字體變形，900 對應最粗的字體變形。數字 400 等價於 normal，而 700 等價於 bold。
如果將元素的加粗設置為 bolder，浏覽器會設置比所繼承值更粗的一個字體加粗。與此相反，關鍵詞 lighter 會導致浏覽器將加粗度下移而不是上移。
實例
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
親自試一試
字體大小
font-size 屬性設置文本的大小。
有能力管理文本的大小在 web 設計領域很重要。但是，您不應當通過調整文本大小使段落看上去像標題，或者使標題看上去像段落。
請始終使用正確的 Html 標題，比如使用 <h1> - <h6> 來標記標題，使用 <p> 來標記段落。
font-size 值可以是絕對或相對值。
絕對值：
將文本設置為指定的大小
不允許用戶在所有浏覽器中改變文本大小（不利於可用性）
絕對大小在確定了輸出的物理尺寸時很有用
相對大小：
相對於周圍的元素來設置大小
允許用戶在浏覽器改變文本大小
注意：如果您沒有規定字體大小，普通文本（比如段落）的默認大小是 16 像素 (16px=1em)。
使用像素來設置字體大小
通過像素設置文本大小，可以對文本大小進行完全控制：
實例
h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}
親自試一試
在 Firefox, Chrome, and Safari 中，可以重新調整以上例子的文本大小，但是在 Internet Explorer 中不行。
雖然可以通過浏覽器的縮放工具調整文本大小，但是這實際上是對整個頁面的調整，而不僅限於文本。
使用 em 來設置字體大小
如果要避免在 Internet Explorer 中無法調整文本的問題，許多開發者使用 em 單位代替 pixels。
W3C 推薦使用 em 尺寸單位。
1em 等於當前的字體尺寸。如果一個元素的 font-size 為 16 像素，那麼對於該元素，1em 就等於 16 像素。在設置字體大小時，em 的值會相對於父元素的字體大小改變。
浏覽器中默認的文本大小是 16 像素。因此 1em 的默認尺寸是 16 像素。
可以使用下面這個公式將像素轉換為 em：pixels/16=em
（注：16 等於父元素的默認字體大小，假設父元素的 font-size 為 20px，那麼公式需改為：pixels/20=em）
實例
h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;} /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */
親自試一試
在上面的例子中，以 em 為單位的文本大小與前一個例子中以像素計的文本是相同的。不過，如果使用 em 單位，則可以在所有浏覽器中調整文本大小。
不幸的是，在 IE 中仍存在問題。在重設文本大小時，會比正常的尺寸更大或更小。
結合使用百分比和 EM
在所有浏覽器中均有效的方案是為 body 元素（父元素）以百分比設置默認的 font-size 值：
實例
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
親自試一試
我們的代碼非常有效。在所有浏覽器中，可以顯示相同的文本大小，並允許所有浏覽器縮放文本的大小。
CSS 字體實例：
設置文本的字體本例演示如何設置文本字體。設置字體尺寸本例演示如何設置字體尺寸。設置字體風格本例演示如何設置字體風格。設置字體的異體本例演示如何設置字體的異體。設置字體的粗細本例演示如何設置字體的粗細。所有字體屬性在一個聲明之內本例演示如何使用簡寫屬性將字體屬性設置在一個聲明之內。
CSS 字體屬性
屬性
描述
font
簡寫屬性。作用是把所有針對字體的屬性設置在一個聲明中。
font-family
設置字體系列。
font-size
設置字體的尺寸。
font-size-adjust
當首選字體不可用時，對替換字體進行智能縮放。（CSS2.1 已刪除該屬性。）
font-stretch
對字體進行水平拉伸。（CSS2.1 已刪除該屬性。）
font-style
設置字體風格。
font-variant
以小型大寫字體或者正常字體顯示文本。
font-weight
設置字體的粗細。CSS 列表
CSS 字體
CSS 表格
CSS 列表屬性允許你放置、改變列表項標志，或者將圖像作為列表項標志。
CSS 列表
從某種意義上講，不是描述性的文本的任何內容都可以認為是列表。人口普查、太陽系、家譜、參觀菜單，甚至你的所有朋友都可以表示為一個列表或者是列表的列表。
由於列表如此多樣，這使得列表相當重要，所以說，CSS 中列表樣式不太豐富確實是一大憾事。
列表類型
要影響列表的樣式，最簡單（同時支持最充分）的辦法就是改變其標志類型。
例如，在一個無序列表中，列表項的標志 (marker) 是出現在各列表項旁邊的圓點。在有序列表中，標志可能是字母、數字或另外某種計數體系中的一個符號。
要修改用於列表項的標志類型，可以使用屬性 list-style-type：
ul {list-style-type : square}
上面的聲明把無序列表中的列表項標志設置為方塊。
列表項圖像
有時，常規的標志是不夠的。你可能想對各標志使用一個圖像，這可以利用 list-style-image 屬性做到：
ul li {list-style-image : url(xxx.gif)}
只需要簡單地使用一個 url() 值，就可以使用圖像作為標志。
列表標志位置
CSS2.1 可以確定標志出現在列表項內容之外還是內容內部。這是利用 list-style-position 完成的。
簡寫列表樣式
為簡單起見，可以將以上 3 個列表樣式屬性合並為一個方便的屬性：list-style，就像這樣：
li {list-style : url(example.gif) square inside}
list-style 的值可以按任何順序列出，而且這些值都可以忽略。只要提供了一個值，其它的就會填入其默認值。
CSS 列表實例：
在無序列表中的不同類型的列表標記本例演示在CSS中不同類型的列表項標記。在有序列表中不同類型的列表項標記本例演示在CSS中不同類型的列表項標記。所有的列表樣式類型本例演示在CSS中所有不同類型的列表項標記。將圖像作為列表項標記本例演示如何將圖像作為列表項標記。放置列表標記本例演示在何處放置列表標記。在一個聲明中定義所有的列表屬性本例演示將所有針對列表的屬性設置於一個簡寫屬性。
CSS 列表屬性(list)
屬性
描述
list-style
簡寫屬性。用於把所有用於列表的屬性設置於一個聲明中。
list-style-image
將圖象設置為列表項標志。
list-style-position
設置列表中列表項標志的位置。
list-style-type
設置列表項標志的類型。
marker-offset
CSS 表格
CSS 列表
CSS 輪廓
CSS 表格屬性可以幫助您極大地改善表格的外觀。
表格邊框
如需在 CSS 中設置表格邊框，請使用 border 屬性。
下面的例子為 table、th 以及 td 設置了藍色邊框：
table, th, td
{
border: 1px solid blue;
}
親自試一試
請注意，上例中的表格具有雙線條邊框。這是由於 table、th 以及 td 元素都有獨立的邊框。
如果需要把表格顯示為單線條邊框，請使用 border-collapse 屬性。
折疊邊框
border-collapse 屬性設置是否將表格邊框折疊為單一邊框：
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
親自試一試
表格寬度和高度
通過 width 和 height 屬性定義表格的寬度和高度。
下面的例子將表格寬度設置為 100%，同時將 th 元素的高度設置為 50px：
table
{
width:100%;
}
th
{
height:50px;
}
親自試一試
表格文本對齊
text-align 和 vertical-align 屬性設置表格中文本的對齊方式。
text-align 屬性設置水平對齊方式，比如左對齊、右對齊或者居中：
td
{
text-align:right;
}
親自試一試
vertical-align 屬性設置垂直對齊方式，比如頂部對齊、底部對齊或居中對齊：
td
{
height:50px;
vertical-align:bottom;
}
親自試一試
表格內邊距
如需控制表格中內容與邊框的距離，請為 td 和 th 元素設置 padding 屬性：
td
{
padding:15px;
}
親自試一試
表格顏色
下面的例子設置邊框的顏色，以及 th 元素的文本和背景顏色：
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
親自試一試
CSS Table 屬性
屬性
描述
border-collapse
設置是否把表格邊框合並為單一的邊框。
border-spacing
設置分隔單元格邊框的距離。
caption-side
設置表格標題的位置。
empty-cells
設置是否顯示表格中的空單元格。
table-layout
設置顯示單元、行和列的算法。親自試一試 - 更多實例
制作一個漂亮的表格本例演示如何創造一個漂亮的表格。顯示表格中的空單元本例演示是否顯示表格中的空單元。設置表格邊框之間的空白本例演示如何設置單元格邊框之間的距離。設置表格標題的位置本例演示如何定位表格的標題。
CSS 輪廓
CSS 表格
CSS 框模型概述
輪廓（outline）是繪制於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。
CSS outline 屬性規定元素輪廓的樣式、顏色和寬度。
輪廓（Outline） 實例：
在元素周圍畫線本例演示使用outline屬性在元素周圍畫一條線。設置輪廓的顏色本例演示如何設置輪廓的顏色。設置輪廓的樣式本例演示如何設置輪廓的樣式。設置輪廓的寬度本例演示如何設置輪廓的寬度。
CSS 邊框屬性
"CSS" 列中的數字指示哪個 CSS 版本定義了該屬性。
屬性
描述
CSS
outline
在一個聲明中設置所有的輪廓屬性。
2
outline-color
設置輪廓的顏色。
2
outline-style
設置輪廓的樣式。
2
outline-width
設置輪廓的寬度。
2CSS 輪廓
CSS 輪廓
CSS 表格
CSS 框模型概述
輪廓（outline）是繪制於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。
CSS outline 屬性規定元素輪廓的樣式、顏色和寬度。
輪廓（Outline） 實例：
在元素周圍畫線本例演示使用outline屬性在元素周圍畫一條線。設置輪廓的顏色本例演示如何設置輪廓的顏色。設置輪廓的樣式本例演示如何設置輪廓的樣式。設置輪廓的寬度本例演示如何設置輪廓的寬度。
CSS 邊框屬性
"CSS" 列中的數字指示哪個 CSS 版本定義了該屬性。
屬性
描述
CSS
outline
在一個聲明中設置所有的輪廓屬性。
2
outline-color
設置輪廓的顏色。
2
outline-style
設置輪廓的樣式。
2
outline-width
設置輪廓的寬度。
2CSS 表格
CSS 框模型概述
輪廓（outline）是繪制於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。
CSS outline 屬性規定元素輪廓的樣式、顏色和寬度。
輪廓（Outline） 實例：
在元素周圍畫線本例演示使用outline屬性在元素周圍畫一條線。設置輪廓的顏色本例演示如何設置輪廓的顏色。設置輪廓的樣式本例演示如何設置輪廓的樣式。設置輪廓的寬度本例演示如何設置輪廓的寬度。
CSS 邊框屬性
"CSS" 列中的數字指示哪個 CSS 版本定義了該屬性。
屬性
描述
CSS
outline
在一個聲明中設置所有的輪廓屬性。
2
outline-color
設置輪廓的顏色。
2
outline-style
設置輪廓的樣式。
2
outline-width
設置輪廓的寬度。
2輪廓（outline）是繪制於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。
CSS outline 屬性規定元素輪廓的樣式、顏色和寬度。
輪廓（Outline） 實例：
在元素周圍畫線本例演示使用outline屬性在元素周圍畫一條線。設置輪廓的顏色本例演示如何設置輪廓的顏色。設置輪廓的樣式本例演示如何設置輪廓的樣式。設置輪廓的寬度本例演示如何設置輪廓的寬度。
CSS 邊框屬性
"CSS" 列中的數字指示哪個 CSS 版本定義了該屬性。
屬性
描述
CSS
outline
在一個聲明中設置所有的輪廓屬性。
2
outline-color
設置輪廓的顏色。
2
outline-style
設置輪廓的樣式。
2
outline-width
設置輪廓的寬度。
2CSS 框模型概述
CSS 輪廓
CSS 內邊距
CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框 和 外邊距 的方式。
CSS 框模型概述
元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認是透明的，因此不會遮擋其後的任何元素。
提示：背景應用於由內容和內邊距、邊框組成的區域。
內邊距、邊框和外邊距都是可選的，默認值是零。但是，許多元素將由用戶代理樣式表設置外邊距和內邊距。可以通過將元素的 margin 和 padding 設置為零來覆蓋這些浏覽器樣式。這可以分別進行，也可以使用通用選擇器對所有元素進行設置：
* {
margin: 0;
padding: 0;
}
在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。
假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內邊距。如果希望這個元素框達到 100 個像素，就需要將內容的寬度設置為 70 像素，請看下圖：
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
提示：內邊距、邊框和外邊距可以應用於一個元素的所有邊，也可以應用於單獨的邊。
提示：外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。
浏覽器兼容性
一旦為頁面設置了恰當的 DTD，大多數浏覽器都會按照上面的圖示來呈現內容。然而 IE 5 和 6 的呈現卻是不正確的。根據 W3C 的規范，元素內容占據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標准模型。這些浏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。
雖然有方法解決這個問題。但是目前最好的解決方案是回避這個問題。也就是，不要給元素添加具有指定寬度的內邊距，而是嘗試將內邊距或外邊距添加到元素的父元素和子元素。
術語翻譯
element : 元素。
padding : 內邊距，也有資料將其翻譯為填充。
border : 邊框。
margin : 外邊距，也有資料將其翻譯為空白或空白邊。
在 w3school，我們把 padding 和 margin 統一地稱為內邊距和外邊距。邊框內的空白是內邊距，邊框外的空白是外邊距，很容易記吧：）
CSS 內邊距
CSS 框模型概述
CSS 邊框
元素的內邊距在邊框和內容區之間。控制該區域最簡單的屬性是 padding 屬性。
CSS padding 屬性定義元素邊框與元素內容之間的空白區域。
CSS padding 屬性
CSS padding 屬性定義元素的內邊距。padding 屬性接受長度值或百分比值，但不允許使用負值。
例如，如果您希望所有 h1 元素的各邊都有 10 像素的內邊距，只需要這樣：
h1 {padding: 10px;}
您還可以按照上、右、下、左的順序分別設置各邊的內邊距，各邊均可以使用不同的單位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}
單邊內邊距屬性
也通過使用下面四個單獨的屬性，分別設置上、右、下、左內邊距：
padding-top
padding-right
padding-bottom
padding-left
您也許已經想到了，下面的規則實現的效果與上面的簡寫規則是完全相同的：
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
內邊距的百分比數值
前面提到過，可以為元素的內邊距設置百分數值。百分數值是相對於其父元素的 width 計算的，這一點與外邊距一樣。所以，如果父元素的 width 改變，它們也會改變。
下面這條規則把段落的內邊距設置為父元素 width 的 10%：
p {padding: 10%;}
例如：如果一個段落的父元素是 div 元素，那麼它的內邊距要根據 div 的 width 計算。
<div style="width: 200px;">
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
</div>
注意：上下內邊距與左右內邊距一致；即上下內邊距的百分數會相對於父元素寬度設置，而不是相對於高度。
CSS 內邊距實例：
所有內邊距屬性在一個聲明中本例演示使用簡寫屬性將所有的內邊距屬性設置於一個聲明中，可以有一到四個值。設置下內邊距 1本例演示如何使用厘米值來設置單元格的下內邊距。設置下內邊距 2本例演示如何使用百分比值來設置單元格的下內邊距。設置左內邊距 1本例演示如何使用厘米值來設置單元格的左內邊距。設置左內邊距 2本例演示如何使用百分比值來設置單元格的左內邊距。設置右內邊距 1本例演示如何使用厘米值來設置單元格的右內邊距。設置右內邊距 2本例演示如何使用百分比值來設置單元格的右內邊距。設置上內邊距 1本例演示如何使用厘米值來設置單元格的上內邊距。設置上內邊距 2本例演示如何使用百分比值來設置單元格的上內邊距。
CSS 內邊距屬性
屬性
描述
padding
簡寫屬性。作用是在一個聲明中設置元素的所內邊距屬性。
padding-bottom
設置元素的下內邊距。
padding-left
設置元素的左內邊距。
padding-right
設置元素的右內邊距。
padding-top
設置元素的上內邊距。CSS 邊框
CSS 內邊距
CSS 外邊距
元素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。
CSS border 屬性允許你規定元素邊框的樣式、寬度和顏色。
CSS 邊框
在 Html 中，我們使用表格來創建文本周圍的邊框，但是通過使用 CSS 邊框屬性，我們可以創建出效果出色的邊框，並且可以應用於任何元素。
元素外邊距內就是元素的的邊框 (border)。元素的邊框就是圍繞元素內容和內邊據的一條或多條線。
每個邊框有 3 個方面：寬度、樣式，以及顏色。在下面的篇幅，我們會為您詳細講解這三個方面。
邊框與背景
CSS 規范指出，邊框繪制在“元素的背景之上”。這很重要，因為有些邊框是“間斷的”（例如，點線邊框或虛線框），元素的背景應當出現在邊框的可見部分之間。
CSS2 指出背景只延伸到內邊距，而不是邊框。後來 CSS2.1 進行了更正：元素的背景是內容、內邊距和邊框區的背景。大多數浏覽器都遵循 CSS2.1 定義，不過一些較老的浏覽器可能會有不同的表現。
邊框的樣式
樣式是邊框最重要的一個方面，這不是因為樣式控制著邊框的顯示（當然，樣式確實控制著邊框的顯示），而是因為如果沒有樣式，將根本沒有邊框。
CSS 的 border-style 屬性定義了 10 個不同的非 inherit 樣式，包括 none。
例如，您可以為把一幅圖片的邊框定義為 outset，使之看上去像是“凸起按鈕”：
a:link img {border-style: outset;}
定義多種樣式
您可以為一個邊框定義多個樣式，例如：
p.aside {border-style: solid dotted dashed double;}
上面這條規則為類名為 aside 的段落定義了四種邊框樣式：實線上邊框、點線右邊框、虛線下邊框和一個雙線左邊框。
我們又看到了這裡的值采用了 top-right-bottom-left 的順序，討論用多個值設置不同內邊距時也見過這個順序。
定義單邊樣式
如果您希望為元素框的某一個邊設置邊框樣式，而不是設置所有 4 個邊的邊框樣式，可以使用下面的單邊邊框樣式屬性：
border-top-style
border-right-style
border-bottom-style
border-left-style
因此這兩種方法是等價的：
p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}
注意：如果要使用第二種方法，必須把單邊屬性放在簡寫屬性之後。因為如果把單邊屬性放在 border-style 之前，簡寫屬性的值就會覆蓋單邊值 none。
邊框的寬度
您可以通過 border-width 屬性為邊框指定寬度。
為邊框指定寬度有兩種方法：可以指定長度值，比如 2px 或 0.1em；或者使用 3 個關鍵字之一，它們分別是 thin 、medium（默認值） 和 thick。
注釋：CSS 沒有定義 3 個關鍵字的具體寬度，所以一個用戶代理可能把 thin 、medium 和 thick 分別設置為等於 5px、3px 和 2px，而另一個用戶代理則分別設置為 3px、2px 和 1px。
所以，我們可以這樣設置邊框的寬度：
p {border-style: solid; border-width: 5px;}
或者：
p {border-style: solid; border-width: thick;}
定義單邊寬度
您可以按照 top-right-bottom-left 的順序設置元素的各邊邊框：
p {border-style: solid; border-width: 15px 5px 15px 5px;}
上面的例子也可以簡寫為（這樣寫法稱為值復制）：
p {border-style: solid; border-width: 15px 5px;}
您也可以通過下列屬性分別設置邊框各邊的寬度：
border-top-width
border-right-width
border-bottom-width
border-left-width
因此，下面的規則與上面的例子是等價的：
p {
border-style: solid;
border-top-width: 15px;
border-right-width: 5px;
border-bottom-width: 15px;
border-left-width: 5px;
}
沒有邊框
在前面的例子中，您已經看到，如果希望顯示某種邊框，就必須設置邊框樣式，比如 solid 或 outset。
那麼如果把 border-style 設置為 none 會出現什麼情況：
p {border-style: none; border-width: 50px;}
盡管邊框的寬度是 50px，但是邊框樣式設置為 none。在這種情況下，不僅邊框的樣式沒有了，其寬度也會變成 0。邊框消失了，為什麼呢？
這是因為如果邊框樣式為 none，即邊框根本不存在，那麼邊框就不可能有寬度，因此邊框寬度自動設置為 0，而不論您原先定義的是什麼。
記住這一點非常重要。事實上，忘記聲明邊框樣式是一個常犯的錯誤。根據以下規則，所有 h1 元素都不會有任何邊框，更不用說 20 像素寬了：
h1 {border-width: 20px;}
由於 border-style 的默認值是 none，如果沒有聲明樣式，就相當於 border-style: none。因此，如果您希望邊框出現，就必須聲明一個邊框樣式。
邊框的顏色
設置邊框顏色非常簡單。CSS 使用一個簡單的 border-color 屬性，它一次可以接受最多
4 個顏色值。
可以使用任何類型的顏色值，例如可以是命名顏色，也可以是十六進制和 RGB 值：
p {
border-style: solid;
border-color: blue rgb(25%,35%,45%) #909090 red;
}
如果顏色值小於 4 個，值復制就會起作用。例如下面的規則聲明了段落的上下邊框是藍色，左右邊框是紅色：
p {
border-style: solid;
border-color: blue red;
}
注釋：默認的邊框顏色是元素本身的前景色。如果沒有為邊框聲明顏色，它將與元素的文本顏色相同。另一方面，如果元素沒有任何文本，假設它是一個表格，其中只包含圖像，那麼該表的邊框顏色就是其父元素的文本顏色（因為 color 可以繼承）。這個父元素很可能是 body、div 或另一個 table。
定義單邊顏色
還有一些單邊邊框顏色屬性。它們的原理與單邊樣式和寬度屬性相同：
border-top-color
border-right-color
border-bottom-color
border-left-color
要為 h1 元素指定實線黑色邊框，而右邊框為實線紅色，可以這樣指定：
h1 {
border-style: solid;
border-color: black;
border-right-color: red;
}
透明邊框
我們剛才講過，如果邊框沒有樣式，就沒有寬度。不過有些情況下您可能希望創建一個不可見的邊框。
CSS2 引入了邊框顏色值 transparent。這個值用於創建有寬度的不可見邊框。請看下面的例子：
<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>
我們為上面的鏈接定義了如下樣式：
a:link, a:visited {
border-style: solid;
border-width: 5px;
border-color: transparent;
}
a:hover {border-color: gray;}
如需查看以上樣式的效果，請點擊：TIY。
從某種意義上說，利用 transparent，使用邊框就像是額外的內邊距一樣；此外還有一個好處，就是能在你需要的時候使其可見。這種透明邊框相當於內邊距，因為元素的背景會延伸到邊框區域（如果有可見背景的話）。
重要事項：在 IE7 之前，IE/WIN 沒有提供對 transparent 的支持。在以前的版本，IE 會根據元素的 color 值來設置邊框顏色。
CSS 邊框實例：
所有邊框屬性在一個聲明之中本例演示用簡寫屬性來將所有四個邊框屬性設置於同一聲明中。設置四邊框樣式本例演示如何設置四邊框樣式。設置每一邊的不同邊框本例演示如何在元素的各邊設置不同的邊框。所有邊框寬度屬性在一個聲明之中本例演示用簡寫屬性來將所有邊框寬度屬性設置於同一聲明中。設置四個邊框的顏色本例演示如何設置四個邊框的顏色。可以設置一到四個顏色。所有下邊框屬性在一個聲明中本例演示用簡寫屬性來將所有下邊框屬性設置在同一聲明中。設置下邊框的顏色本例演示如何設置下邊框的顏色。設置下邊框的樣式本例演示如何設置下邊框的樣式。設置下邊框的寬度本例演示如何設置下邊框的寬度。所有左邊框屬性在一個聲明之中所有左邊框屬性在一個聲明之中設置左邊框的顏色本例演示如何設置左邊框的顏色。設置左邊框的樣式本例演示如何設置左邊框的樣式。設置左邊框的寬度本例演示如何設置左邊框的寬度。所有右邊框屬性在一個聲明之中本例演示一個簡寫屬性，用於把所有右邊框屬性設置在一條聲明中。設置右邊框的顏色本例演示如何設置右邊框的顏色。設置右邊框的樣式本例演示如何設置右邊框的樣式。設置右邊框的寬度本例演示如何設置右邊框的寬度。所有上邊框屬性在一個聲明之中本例演示用簡寫屬性來將所有上邊框屬性設置於同一聲明之中。設置上邊框的顏色本例演示如何設置上邊框的顏色。設置上邊框的樣式本例演示如何設置上邊框的樣式。設置上邊框的寬度本例演示如何設置上邊框的寬度。
CSS 邊框屬性
屬性
描述
border
簡寫屬性，用於把針對四個邊的屬性設置在一個聲明。
border-style
用於設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式。
border-width
簡寫屬性，用於為元素的所有邊框設置寬度，或者單獨地為各邊邊框設置寬度。
border-color
簡寫屬性，設置元素的所有邊框中可見部分的顏色，或為 4 個邊分別設置顏色。
border-bottom
簡寫屬性，用於把下邊框的所有屬性設置到一個聲明中。
border-bottom-color
設置元素的下邊框的顏色。
border-bottom-style
設置元素的下邊框的樣式。
border-bottom-width
設置元素的下邊框的寬度。
border-left
簡寫屬性，用於把左邊框的所有屬性設置到一個聲明中。
border-left-color
設置元素的左邊框的顏色。
border-left-style
設置元素的左邊框的樣式。
border-left-width
設置元素的左邊框的寬度。
border-right
簡寫屬性，用於把右邊框的所有屬性設置到一個聲明中。
border-right-color
設置元素的右邊框的顏色。
border-right-style
設置元素的右邊框的樣式。
border-right-width
設置元素的右邊框的寬度。
border-top
簡寫屬性，用於把上邊框的所有屬性設置到一個聲明中。
border-top-color
設置元素的上邊框的顏色。
border-top-style
設置元素的上邊框的樣式。
border-top-width
設置元素的上邊框的寬度。CSS 外邊距
CSS 邊框
CSS 外邊距合並
圍繞在元素邊框的空白區域是外邊距。設置外邊距會在元素外創建額外的“空白”。
設置外邊距的最簡單的方法就是使用 margin 屬性，這個屬性接受任何長度單位、百分數值甚至負值。
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 外邊距屬性
屬性
描述
margin
簡寫屬性。在一個聲明中設置所有外邊距屬性。
margin-bottom
設置元素的下外邊距。
margin-left
設置元素的左外邊距。
margin-right
設置元素的右外邊距。
margin-top
設置元素的上外邊距。CSS 外邊距合並
CSS 外邊距
CSS 定位概述
外邊距合並指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。
合並後的外邊距的高度等於兩個發生合並的外邊距的高度中的較大者。
外邊距合並
外邊距合並（疊加）是一個相當簡單的概念。但是，在實踐中對網頁進行布局時，它會造成許多混淆。
簡單地說，外邊距合並指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合並後的外邊距的高度等於兩個發生合並的外邊距的高度中的較大者。
當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合並。請看下圖：
親自試一試
當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合並。請看下圖：
親自試一試
盡管看上去有些奇怪，但是外邊距甚至可以與自身發生合並。
假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合並：
如果這個外邊距遇到另一個元素的外邊距，它還會發生合並：
這就是一系列的段落元素占用空間非常小的原因，因為它們的所有外邊距都合並到一起，形成了一個小的外邊距。
外邊距合並初看上去可能有點奇怪，但是實際上，它是有意義的。以由幾個段落組成的典型文本頁面為例。第一個段落上面的空間等於段落的上外邊距。如果沒有外邊距合並，後續所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發生外邊距合並，段落之間的上外邊距和下外邊距就合並在一起，這樣各處的距離就一致了。
注釋：只有普通文檔流中塊框的垂直外邊距才會發生外邊距合並。行內框、浮動框或絕對定位之間的外邊距不會合
CSS position 屬性
CSS 參考手冊
定義和用法
position 屬性規定元素的定位類型。
說明
這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什麼類型。相對定位元素會相對於它在正常流中的默認位置偏移。
默認值：
static
繼承性：
no
版本：
CSS2
JavaScript 語法：
object.style.position="absolute"實例
定位 h2 元素：
h2
{
position:absolute;
left:100px;
top:150px;
}
TIY
浏覽器支持
所有主流浏覽器都支持 position 屬性。
注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。
可能的值
值
描述
absolute
生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed
生成絕對定位的元素，相對於浏覽器窗口進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative
生成相對定位的元素，相對於其正常位置進行定位。
因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。
static
默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
inherit
規定應該從父元素繼承 position 屬性的值。TIY 實例
定位：相對定位本例演示如何相對於一個元素的正常位置來對其定位。定位：絕對定位本例演示如何使用絕對值來對元素進行定位。定位：固定定位本例演示如何相對於浏覽器窗口來對元素進行定位。設置元素的形狀本例演示如何設置元素的形狀。此元素被剪裁到這個形狀內，並顯示出來。Z-indexZ-index可被用於將在一個元素放置於另一元素之後。Z-index上面的例子中的元素已經更改了Z-index。
CSS 定位 (Positioning)
CSS 外邊距合並
CSS 相對定位
CSS 定位 (Positioning) 屬性允許你對元素進行定位。
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-indexZ-index可被用於將在一個元素放置於另一元素之後。Z-index上面的例子中的元素已經更改了Z-index。
CSS 定位屬性
CSS 定位屬性允許你對元素進行定位。
屬性
描述
position
把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。
top
定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
right
定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
bottom
定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
left
定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
overflow
設置當元素的內容溢出其區域時發生的事情。
clip
設置元素的形狀。元素被剪入這個形狀之中，然後顯示出來。
vertical-align
設置元素的垂直對齊方式。
z-index
設置元素的堆疊順序。CSS clip 屬性
CSS 參考手冊
定義和用法
clip 屬性剪裁絕對定位元素。
當一幅圖像的尺寸大於包含它的元素時會發生什麼呢？"clip" 屬性允許您規定一個元素的可見尺寸，這樣此元素就會被修剪並顯示為這個形狀。
說明
這個屬性用於定義一個剪裁矩形。對於一個絕對定義元素，在這個矩形內的內容才可見。出了這個剪裁區域的內容會根據 overflow 的值來處理。剪裁區域可能比元素的內容區大，也可能比內容區小。
默認值：
auto
繼承性：
no
版本：
CSS2
JavaScript 語法：
object.style.clip="rect(0px,50px,50px,0px)"實例
剪裁圖像：
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
TIY
浏覽器支持
所有主流浏覽器都支持 clip 屬性。
注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。
可能的值
值
描述
shape
設置元素的形狀。唯一合法的形狀值是：rect (top, right, bottom, left)
auto
默認值。不應用任何剪裁。
inherit
規定應該從父元素繼承 clip 屬性的值。TIY 實例
設置元素的形狀本例演示如何設置元素的形狀。此元素被剪入形狀中，然後顯示出來。
CSS 定位 (Positioning)
CSS 外邊距合並
CSS 相對定位
CSS 定位 (Positioning) 屬性允許你對元素進行定位。
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-indexZ-index可被用於將在一個元素放置於另一元素之後。Z-index上面的例子中的元素已經更改了Z-index。
CSS 定位屬性
CSS 定位屬性允許你對元素進行定位。
屬性
描述
position
把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。
top
定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
right
定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
bottom
定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
left
定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
overflow
設置當元素的內容溢出其區域時發生的事情。
clip
設置元素的形狀。元素被剪入這個形狀之中，然後顯示出來。
vertical-align
設置元素的垂直對齊方式。
z-index
設置元素的堆疊順序。CSS 相對定位
CSS 定位概述
CSS 絕對定位
設置為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。
CSS 相對定位
相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現在它所在的位置上。然後，可以通過設置垂直或水平位置，讓這個元素“相對於”它的起點進行移動。
如果將 top 設置為 20px，那麼框將在原位置頂部下面 20 像素的地方。如果 left 設置為 30 像素，那麼會在元素左邊創建 30 像素的空間，也就是將元素向右移動。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
如下圖所示：
注意，在使用相對定位時，無論是否進行移動，元素仍然占據原來的空間。因此，移動元素會導致它覆蓋其它框。
CSS 相對定位實例
定位：相對定位本例演示如何相對於一個元素的正常位置來對其定位。
CSS z-index 屬性
CSS 參考手冊
定義和用法
z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
注釋：元素可擁有負的 z-index 屬性值。
注釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！
說明
該屬性設置一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區的軸。如果為正數，則離用戶更近，為負數則表示離用戶更遠。
默認值：
auto
繼承性：
no
版本：
CSS2
JavaScript 語法：
object.style.zIndex="1"實例
設置圖像的 z-index：
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
TIY
浏覽器支持
所有主流浏覽器都支持 z-index 屬性。
注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。
可能的值
值
描述
auto
默認。堆疊順序與父元素相等。
number
設置元素的堆疊順序。
inherit
規定應該從父元素繼承 z-index 屬性的值。TIY 實例
Z-indexZ-index 可用於將在一個元素放置於另一元素之後。Z-index上例中的元素已經更改了 Z-index。
CSS 絕對定位
CSS 相對定位
CSS 浮動
設置為絕對定位的元素框從文檔流完全刪除，並相對於其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
CSS 絕對定位
絕對定位使元素的位置與文檔流無關，因此不占據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。
普通流中其它元素的布局就像絕對定位的元素不存在一樣：
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
如下圖所示：
絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。
對於定位的主要問題是要記住每種定位的意義。所以，現在讓我們復習一下學過的知識吧：相對定位是“相對於”元素在文檔中的初始位置，而絕對定位是“相對於”最近的已定位祖先元素，如果不存在已定位的祖先元素，那麼“相對於”最初的包含塊。
注釋：根據用戶代理的不同，最初的包含塊可能是畫布或 Html 元素。
提示：因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設置 z-index
屬性來控制這些框的堆放次序。
CSS 絕對定位實例
定位：絕對定位本例演示如何使用絕對值來對元素進行定位。
CSS 浮動
CSS 絕對定位
CSS 元素選擇器
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
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=/School/UploadFiles_7810/201603/20160324095633690.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=/School/UploadFiles_7810/201603/20160324095633690.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=/School/UploadFiles_7810/201603/20160324095633690.jpg" />
<p>some text</p>
</div>
這樣會得到我們希望的效果。不幸的是，下一個元素會受到這個浮動元素的影響。為了解決這個問題，有些人選擇對布局中的所有東西進行浮動，然後使用適當的有意義的元素（常常是站點的頁腳）對這些浮動進行清理。這有助於減少或消除不必要的標記。
事實上，W3School 站點上的所有頁面都采用了這種技術，如果您打開我們使用 CSS 文件，您會看到我們對頁腳的 div 進行了清理，而頁腳上面的三個 div 都向左浮動。
CSS clear 屬性
我們剛才詳細討論了 CSS 清理的工作原理和 clear 屬性應用方法。如果您希望學習更多有關 clear 屬性的知識，請訪問參考手冊：CSS
clear 屬性。
浮動和清理 實例
float 屬性的簡單應用使圖像浮動於一個段落的右側。將帶有邊框和邊界的圖像浮動於段落的右側使圖像浮動於段落的右側。向圖像添加邊框和邊界。帶標題的圖像浮動於右側使帶有標題的圖像浮動於右側使段落的首字母浮動於左側使段落的首字母浮動於左側，並向這個字母添加樣式。創建水平菜單使用具有一欄超鏈接的浮動來創建水平菜單。創建無表格的首頁使用浮動來創建擁有頁眉、頁腳、左側目錄和主體內容的首頁。清除元素的側面本例演示如何使用清除元素側面的浮動元素。
本文鏈接http://www.cxybl.com/html/wyzz/CSS/20130708/38980.Html