w3c搬運CSS念念碎

w3c搬運CSS念念碎

基本使用

• 當使用 RGB 百分比時，即使當值爲 0 時也要寫百分比符號。但是在其他的情況下就不需要這麼做了。比如說，當尺寸爲 0 像素時，0 之後不需要使用 px 單位，因爲 0 就是 0，無論單位是什麼。
• 如果值爲若干單詞，則要給值加引號

p {
    font-family: "sans serif";
}

• 是否包含空格不會影響 CSS 在瀏覽器的工作效果,不過存在一個例外：如果涉及到與 HTML 文檔一起工作的話，class 和 id 名稱對大小寫是敏感的。

選擇器

• 你可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。在下面的例子中，我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。

  h1,h2,h3,h4,h5,h6 {
    color: green;
   }
  

• body {
       font-family: Verdana, sans-serif;
       }
  

通過 CSS 繼承，子元素將繼承最高級元素（在本例中是 body）所擁有的屬性（這些子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的規則，所有 body 的子元素都應該顯示 Verdana 字體，子元素的子元素也一樣。並且在大部分的現代瀏覽器中，也確實是這樣的。

1. id選擇器：#id名

在現代佈局中，id 選擇器常常用於建立派生選擇器。

 2.類選擇器：.類名

 3.屬性選擇器： [屬性]

下面的例子爲帶有 title 屬性的所有元素設置樣式：

[title]
{
color:red;
}

​ 下面的例子爲 title=“W3School” 的所有元素設置樣式：

[title=W3School]
{
border:5px solid blue;
}

​ 4.屬性選擇器

屬性選擇器在爲不帶有 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]	匹配屬性值中包含指定值的每個元素。

• background-color 不能繼承，其默認值是 transparent。transparent 有“透明”之意。也就是說，如果一個元素沒有指定背景色，那麼背景就是透明的，這樣其祖先元素的背景才能可見。

• 如果需要設置一個背景圖像，必須爲這個屬性設置一個 URL 值：

  body {background-image: url(/i/eg_bg_04.gif);}
  

背景圖像

要把圖像放入背景，需要使用 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);}

• 如果需要在頁面上對背景圖像進行平鋪，可以使用background-repeat屬性

• 屬性值repeat導致圖像在水平垂直向上都平鋪，repeat-x， repeat-y分別導致圖像只在水平或垂直方向上重複。

• 用法：background-repeat:repeat-x;

背景定位

• 可以利用background-position屬性改變圖像在背景中的位置。爲 background-position 屬性提供值有很多方法。首先，可以使用一些關鍵字：top、bottom、left、right 和 center。通常，這些關鍵字會成對出現，不過也不總是這樣。還可以使用長度值，如 100px 或 5cm，最後也可以使用百分數值。不同類型的值對於背景圖像的放置稍有差異。

關鍵字

圖像放置關鍵字最容易理解，其作用如其名稱所表明的。例如，top right 使圖像放置在元素內邊距區的右上角。

根據規範，位置關鍵字可以按任何順序出現，只要保證不超過兩個關鍵字 - 一個對應水平方向，另一個對應垂直方向。

如果只出現一個關鍵字，則認爲另一個關鍵字是 center。

• 下面是等價的位置關鍵字：

  單一關鍵字	等價的關鍵字
  center	center center
  top	top center 或 center top
  bottom	bottom center 或 center bottom
  right	right center 或 center right
  left	left center 或 center left

• 背景關聯

  如果文檔比較長，那麼當文檔向下滾動時，背景圖像也會隨之滾動。當文檔滾動到超過圖像的位置時，圖像就會消失。

  您可以通過 background-attachment 屬性防止這種滾動。通過這個屬性，可以聲明圖像相對於可視區是固定的（fixed），因此不會受到滾動的影響：background-attachment 屬性的默認值是 scroll，也就是說，在默認的情況下，背景會隨文檔滾動。

• background-attachment:fixed（固定背景）

• background-attachment:scoll (跟隨滾動)

• CSS 背景屬性

  屬性	描述
  background	簡寫屬性，作用是將背景屬性設置在一個聲明中。
  background-attachment	背景圖像是否固定或者隨着頁面的其餘部分滾動。
  background-color	設置元素的背景顏色。
  background-image	把圖像設置爲背景。
  background-position	設置背景圖像的起始位置。
  background-repeat	設置背景圖像是否及如何重複。

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	設置字間距。

縮進文本

• 把 Web 頁面上的段落的第一行縮進，這是一種最常用的文本格式化效果。

• CSS 提供了 text-indent 屬性，該屬性可以方便地實現文本縮進。

• 通過使用 text-indent 屬性，所有元素的第一行都可以縮進一個給定的長度，甚至該長度可以是負值。

• 注意：一般來說，可以爲所有塊級元素應用 text-indent，但無法將該屬性應用於行內元素，圖像之類的替換元素上也無法應用 text-indent 屬性。不過，如果一個塊級元素（比如段落）的首行中有一個圖像，它會隨該行的其餘文本移動。

• 提示：如果想把一個行內元素的第一行“縮進”，可以用左內邊距或外邊距創造這種效果。

水平對齊

text-align 是一個基本的屬性，它會影響一個元素中的文本行互相之間的對齊方式。它的前 3 個值相當直接，不過第 4 個和第 5 個則略有些複雜。

值 left、right 和 center 會導致元素中的文本分別左對齊、右對齊和居中。

最後一個水平對齊屬性是 justify（對單行無效）。

注意text-align不會處理被打斷的行和最後一行!

在兩端對齊文本中，文本行的左右兩端都放在父元素的內邊界上。然後，調整單詞和字母間的間隔，使各行的長度恰好相等。您也許已經注意到了，兩端對齊文本在打印領域很常見。

可能的值

值	描述
left	把文本排列到左邊。默認值：由瀏覽器決定。
right	把文本排列到右邊。
center	把文本排列到中間。
justify	實現兩端對齊文本效果。
inherit	規定應該從父元素繼承 text-align 屬性的值。

字間隔

word-spacing 屬性可以改變字（單詞）之間的標準間隔。其默認值 normal 與設置值爲 0 是一樣的。

word-spacing 屬性接受一個正長度值或負長度值。如果提供一個正長度值，那麼字之間的間隔就會增加。爲 word-spacing 設置一個負值，會把它拉近：

字母間隔

letter-spacing 屬性與 word-spacing 的區別在於，字母間隔修改的是字符或字母之間的間隔。

與 word-spacing 屬性一樣，letter-spacing 屬性的可取值包括所有長度。默認關鍵字是 normal（這與 letter-spacing:0 相同）。輸入的長度值會使字母之間的間隔增加或減少指定的量：

字符轉換

text-transform 屬性處理文本的大小寫。這個屬性有 4 個值：

• none
• uppercase
• lowercase
• capitalize

默認值 none 對文本不做任何改動，將使用源文檔中的原有大小寫。顧名思義，uppercase 和 lowercase 將文本轉換爲全大寫和全小寫字符。最後，capitalize 只對每個單詞的首字母大寫。

作爲一個屬性，text-transform 可能無關緊要，不過如果您突然決定把所有 h1 元素變爲大寫，這個屬性就很有用。不必單獨地修改所有 h1 元素的內容，只需使用 text-transform 爲你完成這個修改：

h1 {text-transform: uppercase}

使用 text-transform 有兩方面的好處。首先，只需寫一個簡單的規則來完成這個修改，而無需修改 h1 元素本身。其次，如果您以後決定將所有大小寫再切換爲原來的大小寫，可以更容易地完成修改。

文本裝飾

接下來，我們討論 text-decoration 屬性，這是一個很有意思的屬性，它提供了很多非常有趣的行爲。

text-decoration 有 5 個值：

• none
• underline
• overline
• line-through
• blink

處理空白符

white-space 屬性會影響到用戶代理對源文檔中的空格、換行和 tab 字符的處理。

通過使用該屬性，可以影響瀏覽器處理字之間和文本行之間的空白符的方式。從某種程度上講，默認的 XHTML 處理已經完成了空白符處理：它會把所有空白符合併爲一個空格。所以給定以下標記，它在 Web 瀏覽器中顯示時，各個字之間只會顯示一個空格，同時忽略元素中的換行：

總結

下面的表格總結了 white-space 屬性的行爲：

值	空白符	換行符	自動換行
pre-line	合併	保留	允許
normal	合併	忽略	允許
nowrap	合併	忽略	不允許
pre	保留	保留	不允許
pre-wrap	保留	保留	允許

文本方向

如果您閱讀的是英文書籍，就會從左到右、從上到下地閱讀，這就是英文的流方向。不過，並不是所有語言都如此。我們知道古漢語就是從右到左來閱讀的，當然還包括希伯來語和阿拉伯語等等。CSS2 引入了一個屬性來描述其方向性。

direction 屬性影響塊級元素中文本的書寫方向、表中列布局的方向、內容水平填充其元素框的方向、以及兩端對齊元素中最後一行的位置。

註釋：對於行內元素，只有當 unicode-bidi 屬性設置爲 embed 或 bidi-override 時纔會應用 direction 屬性。

direction 屬性有兩個值：ltr 和 rtl。大多數情況下，默認值是 ltr，顯示從左到右的文本。如果顯示從右到左的文本，應使用值 rtl。

CSS 字體

CSS 字體屬性

屬性	描述
font	簡寫屬性。作用是把所有針對字體的屬性設置在一個聲明中。
font-family	設置字體系列。
font-size	設置字體的尺寸。
font-size-adjust	當首選字體不可用時，對替換字體進行智能縮放。（CSS2.1 已刪除該屬性。）
font-stretch	對字體進行水平拉伸。（CSS2.1 已刪除該屬性。）
font-style	設置字體風格。
font-variant	以小型大寫字體或者正常字體顯示文本。
font-weight	設置字體的粗細。

在 CSS 中，有兩種不同類型的字體系列名稱：

• 通用字體系列 - 擁有相似外觀的字體系統組合（比如 “Serif” 或 “Monospace”）
• 特定字體系列 - 具體的字體系列（比如 “Times” 或 “Courier”）

除了各種特定的字體系列外，CSS 定義了 5 種通用字體系列：

• Serif 字體
• Sans-serif 字體
• Monospace 字體
• Cursive 字體
• Fantasy 字體

指定字體系列

使用 font-family 屬性 定義文本的字體系列。

使用通用字體系列

如果你希望文檔使用一種 sans-serif 字體，但是你並不關心是哪一種字體，以下就是一個合適的聲明：

body {font-family: sans-serif;}

使用引號

您也許已經注意到了，上面的例子中使用了單引號。只有當字體名中有一個或多個空格（比如 New York），或者如果字體名包括 # 或 $ 之類的符號，才需要在 font-family 聲明中加引號。

單引號或雙引號都可以接受。但是，如果把一個 font-family 屬性放在 HTML 的 style 屬性中，則需要使用該屬性本身未使用的那種引號：

字體風格

font-style 屬性最常用於規定斜體文本。

該屬性有三個值：

• normal - 文本正常顯示
• italic - 文本斜體顯示
• oblique - 文本傾斜顯示

italic 和 oblique 的區別（沒啥區別）

font-style 非常簡單：用於在 normal 文本、italic 文本和 oblique 文本之間選擇。唯一有點複雜的是明確 italic 文本和 oblique 文本之間的差別。

斜體（italic）是一種簡單的字體風格，對每個字母的結構有一些小改動，來反映變化的外觀。與此不同，傾斜（oblique）文本則是正常豎直文本的一個傾斜版本。

通常情況下，italic 和 oblique 文本在 web 瀏覽器中看上去完全一樣。

字體變形

font-variant 屬性可以設定小型大寫字母。

小型大寫字母不是一般的大寫字母，也不是小寫字母，這種字母採用不同大小的大寫字母。

字體大小

font-size 屬性設置文本的大小。

有能力管理文本的大小在 web 設計領域很重要。但是，您不應當通過調整文本大小使段落看上去像標題，或者使標題看上去像段落。

請始終使用正確的 HTML 標題，比如使用

-

來標記標題，使用

來標記段落。

font-size 值可以是絕對或相對值。

絕對值：

• 將文本設置爲指定的大小
• 不允許用戶在所有瀏覽器中改變文本大小（不利於可用性）
• 絕對大小在確定了輸出的物理尺寸時很有用

相對大小：

• 相對於周圍的元素來設置大小
• 允許用戶在瀏覽器改變文本大小

注意：如果您沒有規定字體大小，普通文本（比如段落）的默認大小是 16 像素** (16px=1em)。

使用像素來設置字體大小

通過像素設置文本大小，可以對文本大小進行完全控制：

設置鏈接的樣式

能夠設置鏈接樣式的 CSS 屬性有很多種（例如 color, font-family, background 等等）。

鏈接的特殊性在於能夠根據它們所處的狀態來設置它們的樣式。

鏈接的四種狀態：

• a:link - 普通的、未被訪問的鏈接
• a:visited - 用戶已訪問的鏈接
• a:hover - 鼠標指針位於鏈接的上方
• a:active - 鏈接被點擊的時刻

當爲鏈接的不同狀態設置樣式時，請按照以下次序規則：

• a:hover 必須位於 a:link 和 a:visited 之後
• a:active 必須位於 a:hover 之後

否則部分設定將衝突

用color設定字體，用background-color設定背景

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 Table 屬性

屬性	描述
border-collapse	設置是否把表格邊框合併爲單一的邊框。
border-spacing	設置分隔單元格邊框的距離。
caption-side	設置表格標題的位置。
empty-cells	設置是否顯示錶格中的空單元格。
table-layout	設置顯示單元、行和列的算法。

表格邊框

如需在 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：

表格文本對齊

text-align 和 vertical-align 屬性設置表格中文本的對齊方式。

text-align 屬性設置水平對齊方式，比如左對齊、右對齊或者居中：

vertical-align 屬性設置垂直對齊方式，比如頂部對齊、底部對齊或居中對齊：

 td
  {
  height:50px;
  vertical-align:bottom;
  }

表格內邊距

如需控制表格中內容與邊框的距離，請爲 td 和 th 元素設置 padding 屬性：

td
  {
  padding:15px;
  }

CSS 輪廓

屬性	描述	CSS
outline	在一個聲明中設置所有的輪廓屬性。	2
outline-color	設置輪廓的顏色。	2
outline-style	設置輪廓的樣式。	2
outline-width	設置輪廓的寬度。	2

CSS盒子模型

屬性	描述
padding	簡寫屬性。作用是在一個聲明中設置元素的所內邊距屬性。
padding-bottom	設置元素的下內邊距。
padding-left	設置元素的左內邊距。
padding-right	設置元素的右內邊距。
padding-top	設置元素的上內邊距。

術語翻譯

• element : 元素。
• padding : 內邊距，也有資料將其翻譯爲填充。
• border : 邊框。
• margin : 外邊距，也有資料將其翻譯爲空白或空白邊。
• width:寬度。
• height:高度。

元素框的最內部分是實際的內容，直接包圍內容的是內邊距padding。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認是透明的，因此不會遮擋其後的任何元素。

提示：背景應用於由內容和內邊距、邊框組成的區域。

內邊距、邊框和外邊距margin都是可選的，默認值是零。但是，許多元素將由用戶代理樣式表設置外邊距和內邊距。可以通過將元素的 margin 和 padding 設置爲零來覆蓋這些瀏覽器樣式。這可以分別進行，也可以使用通用選擇器對所有元素進行設置：

CSS padding 屬性

CSS padding 屬性定義元素的內邊距。padding 屬性接受長度值或百分比值，但不允許使用負

內邊距，只需要這樣：

h1 {padding: 10px;}

您還可以按照上、右、下、左的順序分別設置各邊的內邊距，各邊均可以使用不同的單位或百分比值：

h1 {padding: 10px 0.25em 2ex 20%;}

內邊距的百分比數值

前面提到過，可以爲元素的內邊距設置百分數值。百分數值是相對於其父元素的 width 計算的，這一點與外邊距一樣。所以，如果父元素的 width 改變，它們也會改變。

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	設置元素的上邊框的寬度。

在 HTML 中，我們使用表格來創建文本週圍的邊框，但是通過使用 CSS 邊框屬性，我們可以創建出效果出色的邊框，並且可以應用於任何元素。

元素外邊距內就是元素的的邊框 (border)。元素的邊框就是圍繞元素內容和內邊據的一條或多條線。

邊框的顏色

設置邊框顏色非常簡單。CSS 使用一個簡單的 border-color 屬性，它一次可以接受最多 4 個顏色值。

邊框的寬度

您可以通過 border-width 屬性爲邊框指定寬度。

邊框的樣式

樣式是邊框最重要的一個方面，這不是因爲樣式控制着邊框的顯示（當然，樣式確實控制着邊框的顯示），而是因爲如果沒有樣式，將根本沒有邊框。

CSS 的 border-style 屬性定義了 10 個不同的非 inherit 樣式，包括 none。

例如，您可以爲把一幅圖片的邊框定義爲 outset，使之看上去像是“凸起按鈕”：

a:link img {border-style: outset;}

透明邊框

我們剛纔講過，如果邊框沒有樣式，就沒有寬度。不過有些情況下您可能希望創建一個不可見的邊框。

CSS2 引入了邊框顏色值 transparent

寫兩個顏色，這樣寫法稱爲值複製

值複製

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

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

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

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

p {margin: 0.5em 1em;}

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

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

CSS margin 屬性

屬性	描述
margin	簡寫屬性。在一個聲明中設置所有外邊距屬性。
margin-bottom	設置元素的下外邊距。
margin-left	設置元素的左外邊距。
margin-right	設置元素的右外邊距。
margin-top	設置元素的上外邊距。

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

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

margin 的默認值是 0

在支持 CSS 的瀏覽器中，外邊距會在每個段落元素的上面和下面生成“空行”。因此，如果沒有爲 p 元素聲明外邊距，瀏覽器可能會自己應用一個外邊距。當然，只要你特別作了聲明，就會覆蓋默認樣式。

但是，在實際中，瀏覽器對許多元素已經提供了預定的樣式，外邊距也不例外

CSS 定位 (Positioning)

CSS 定位和浮動

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

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

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

一切皆爲框

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

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

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

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

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

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

CSS position 屬性

CSS 定位屬性

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

屬性	描述
position	把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。
top	定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
right	定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
bottom	定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
left	定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
overflow	設置當元素的內容溢出其區域時發生的事情。
clip	設置元素的形狀。元素被剪入這個形狀之中，然後顯示出來。
vertical-align	設置元素的垂直對齊方式。
z-index	設置元素的堆疊順序。

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

position 屬性值的含義：

• static

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

• relative

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

• absolute

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

• fixed

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

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