css框模型和定位

1、CSS 框模型概述· Previous Page · Next Page CSS 框模型 (Box Model) 規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框 和 外邊距 的方式。CSS 框模型概述元素框的最內(nèi)部分是實際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距。內(nèi)邊距呈現(xiàn)了元素的背景。內(nèi)邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認是透明的，因此不會遮擋其后的任何元素。內(nèi)邊距、邊框和外邊距都是可選的，默認值是零。但是，許多元素將由用戶代理樣式表設(shè)置外邊距和內(nèi)邊距。可以通過將元素的 margin 和 padding 設(shè)置為零來覆蓋這些瀏覽器樣式。這可以分別進行，也可以使用通用選擇器對所有元素

2、進行設(shè)置：* margin: 0; padding: 0;在 CSS 中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸，但是會增加元素框的尺寸。假設(shè)框的每個邊上有 10 個像素的外邊距和 5 個像素的內(nèi)邊距。如果希望這個元素框達到 100 個像素，就需要將內(nèi)容的寬度設(shè)置為 70 像素，請看下圖：#box width: 70px; margin: 10px; padding: 5px;提示：內(nèi)邊距、邊框和外邊距可以應(yīng)用于一個元素的所有邊，也可以應(yīng)用于單獨的邊。提示：外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。瀏覽器兼容性一旦

3、為頁面設(shè)置了恰當(dāng)?shù)?DTD，大多數(shù)瀏覽器都會按照上面的圖示來呈現(xiàn)內(nèi)容。然而 IE 5 和 6 的呈現(xiàn)卻是不正確的。根據(jù) W3C 的規(guī)范，元素內(nèi)容占據(jù)的空間是由 width 屬性設(shè)置的，而內(nèi)容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標(biāo)準模型。這些瀏覽器的 width 屬性不是內(nèi)容的寬度，而是內(nèi)容、內(nèi)邊距和邊框的寬度的總和。雖然有方法解決這個問題。但是目前最好的解決方案是回避這個問題。也就是，不要給元素添加具有指定寬度的內(nèi)邊距，而是嘗試將內(nèi)邊距或外邊距添加到元素的父元素和子元素。術(shù)語翻譯· element : 元素。

4、 · padding : 內(nèi)邊距，也有資料將其翻譯為填充。 · border : 邊框。 · margin : 外邊距，也有資料將其翻譯為空白或空白邊。 在 w3school，我們把 padding 和 margin 統(tǒng)一地稱為內(nèi)邊距和外邊距。邊框內(nèi)的空白是內(nèi)邊距，邊框外的空白是外邊距，很容易記吧：）CSS 內(nèi)邊距· Previous Page · Next Page 元素的內(nèi)邊距在邊框和內(nèi)容區(qū)之間?？刂圃搮^(qū)域最簡單的屬性是 padding 屬性。CSS padding 屬性定義元素邊框與元素內(nèi)容之間的空白區(qū)域。CSS padding 屬性CS

5、S padding 屬性定義元素的內(nèi)邊距。padding 屬性接受長度值或百分比值，但不允許使用負值。例如，如果您希望所有 h1 元素的各邊都有 10 像素的內(nèi)邊距，只需要這樣：h1 padding: 10px;您還可以按照上、右、下、左的順序分別設(shè)置各邊的內(nèi)邊距，各邊均可以使用不同的單位或百分比值：h1 padding: 10px 0.25em 2ex 20%;單邊內(nèi)邊距屬性也通過使用下面四個單獨的屬性，分別設(shè)置上、右、下、左內(nèi)邊距：· padding-top · padding-right · padding-bottom · padding-lef

6、t 您也許已經(jīng)想到了，下面的規(guī)則實現(xiàn)的效果與上面的簡寫規(guī)則是完全相同的：h1 padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; 內(nèi)邊距的百分比數(shù)值前面提到過，可以為元素的內(nèi)邊距設(shè)置百分數(shù)值。百分數(shù)值是相對于其父元素的 width 計算的，這一點與外邊距一樣。所以，如果父元素的 width 改變，它們也會改變。下面這條規(guī)則把段落的內(nèi)邊距設(shè)置為父元素 width 的 10%：p padding: 10%;例如：如果一個段落的父元素是 div 元素，那么它的內(nèi)邊距要根據(jù) div 的 wi

7、dth 計算。<div style="width: 200px;"><p>This paragragh is contained within a DIV that has a width of 200 pixels.</p></div> 注意：上下內(nèi)邊距與左右內(nèi)邊距一致；即上下內(nèi)邊距的百分數(shù)會相對于父元素寬度設(shè)置，而不是相對于高度。CSS 內(nèi)邊距實例：所有內(nèi)邊距屬性在一個聲明中 本例演示使用簡寫屬性將所有的內(nèi)邊距屬性設(shè)置于一個聲明中，可以有一到四個值。 設(shè)置下內(nèi)邊距 1 本例演示如何使用厘米值來設(shè)置單元格的下內(nèi)邊距。 設(shè)置下

8、內(nèi)邊距 2 本例演示如何使用百分比值來設(shè)置單元格的下內(nèi)邊距。 設(shè)置左內(nèi)邊距 1 本例演示如何使用厘米值來設(shè)置單元格的左內(nèi)邊距。 設(shè)置左內(nèi)邊距 2 本例演示如何使用百分比值來設(shè)置單元格的左內(nèi)邊距。 設(shè)置右內(nèi)邊距 1 本例演示如何使用厘米值來設(shè)置單元格的右內(nèi)邊距。 設(shè)置右內(nèi)邊距 2 本例演示如何使用百分比值來設(shè)置單元格的右內(nèi)邊距。 設(shè)置上內(nèi)邊距 1 本例演示如何使用厘米值來設(shè)置單元格的上內(nèi)邊距。 設(shè)置上內(nèi)邊距 2 本例演示如何使用百分比值來設(shè)置單元格的上內(nèi)邊距。 CSS 內(nèi)邊距屬性屬性描述padding簡寫屬性。作用是在一個聲明中設(shè)置元素的所內(nèi)邊距屬性。padding-bottom設(shè)置元素的下內(nèi)邊

9、距。padding-left設(shè)置元素的左內(nèi)邊距。padding-right設(shè)置元素的右內(nèi)邊距。padding-top設(shè)置元素的上內(nèi)邊距。CSS 邊框· Previous Page · Next Page 元素的邊框 (border) 是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。CSS border 屬性允許你規(guī)定元素邊框的樣式、寬度和顏色。CSS 邊框在 HTML 中，我們使用表格來創(chuàng)建文本周圍的邊框，但是通過使用 CSS 邊框?qū)傩?，我們可以?chuàng)建出效果出色的邊框，并且可以應(yīng)用于任何元素。元素外邊距內(nèi)就是元素的的邊框 (border)。元素的邊框就是圍繞元素內(nèi)容和內(nèi)邊據(jù)的一條或多條

10、線。每個邊框有 3 個方面：寬度、樣式，以及顏色。在下面的篇幅，我們會為您詳細講解這三個方面。邊框與背景CSS 規(guī)范指出，邊框繪制在“元素的背景之上”。這很重要，因為有些邊框是“間斷的”（例如，點線邊框或虛線框），元素的背景應(yīng)當(dāng)出現(xiàn)在邊框的可見部分之間。CSS2 指出背景只延伸到內(nèi)邊距，而不是邊框。后來 CSS2.1 進行了更正：元素的背景是內(nèi)容、內(nèi)邊距和邊框區(qū)的背景。大多數(shù)瀏覽器都遵循 CSS2.1 定義，不過一些較老的瀏覽器可能會有不同的表現(xiàn)。邊框的樣式樣式是邊框最重要的一個方面，這不是因為樣式控制著邊框的顯示（當(dāng)然，樣式確實控制著邊框的顯示），而是因為如果沒有樣式，將根本沒有邊框。CSS

11、 的 border-style 屬性定義了 10 個不同的非 inherit 樣式，包括 none。例如，您可以為把一幅圖片的邊框定義為 outset，使之看上去像是“凸起按鈕”：a:link img border-style: outset;定義多種樣式您可以為一個邊框定義多個樣式，例如：p.aside border-style: solid dotted dashed double;上面這條規(guī)則為類名為 aside 的段落定義了四種邊框樣式：實線上邊框、點線右邊框、虛線下邊框和一個雙線左邊框。我們又看到了這里的值采用了 top-right-bottom-left 的順序，討論用多個值設(shè)置不

12、同內(nèi)邊距時也見過這個順序。定義單邊樣式如果您希望為元素框的某一個邊設(shè)置邊框樣式，而不是設(shè)置所有 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;注意：如果要使用第二種方法，必須把單邊屬性放在簡寫屬

13、性之后。因為如果把單邊屬性放在 border-style 之前，簡寫屬性的值就會覆蓋單邊值 none。邊框的寬度您可以通過 border-width 屬性為邊框指定寬度。為邊框指定寬度有兩種方法：可以指定長度值，比如 2px 或 0.1em；或者使用 3 個關(guān)鍵字之一，它們分別是 thin 、medium（默認值） 和 thick。注釋：CSS 沒有定義 3 個關(guān)鍵字的具體寬度，所以一個用戶代理可能把 thin 、medium 和 thick 分別設(shè)置為等于 5px、3px 和 2px，而另一個用戶代理則分別設(shè)置為 3px、2px 和 1px。所以，我們可以這樣設(shè)置邊框的寬度：p border

14、-style: solid; border-width: 5px;或者：p border-style: solid; border-width: thick;定義單邊寬度您可以按照 top-right-bottom-left 的順序設(shè)置元素的各邊邊框：p border-style: solid; border-width: 15px 5px 15px 5px;上面的例子也可以簡寫為（這樣寫法稱為值復(fù)制）：p border-style: solid; border-width: 15px 5px;您也可以通過下列屬性分別設(shè)置邊框各邊的寬度：· border-top-width 

15、3; border-right-width · border-bottom-width · border-left-width 因此，下面的規(guī)則與上面的例子是等價的：p border-style: solid; border-top-width: 15px; border-right-width: 5px; border-bottom-width: 15px; border-left-width: 5px; 沒有邊框在前面的例子中，您已經(jīng)看到，如果希望顯示某種邊框，就必須設(shè)置邊框樣式，比如 solid 或 outset。那么如果把 border-style 設(shè)置為 none

16、 會出現(xiàn)什么情況：p border-style: none; border-width: 50px;盡管邊框的寬度是 50px，但是邊框樣式設(shè)置為 none。在這種情況下，不僅邊框的樣式?jīng)]有了，其寬度也會變成 0。邊框消失了，為什么呢？這是因為如果邊框?qū)挾葹?0，即邊框根本不存在，那么邊框就不可能有寬度，因此邊框?qū)挾茸詣釉O(shè)置為 0，而不論您原先定義的是什么？記住這一點非常重要。事實上，忘記聲明邊框樣式是一個常犯的錯誤。根據(jù)以下規(guī)則，所有 h1 元素都不會有任何邊框，更不用說 20 像素寬了：h1 border-width: 20px;由于 border-style 的默認值是 none，如果沒

17、有聲明樣式，就相當(dāng)于 border-style: none。因此，如果您希望邊框出現(xiàn)，就必須聲明一個邊框樣式。邊框的顏色設(shè)置邊框顏色非常簡單。CSS 使用一個簡單的 border-color 屬性，它一次可以接受最多 4 個顏色值?？梢允褂萌魏晤愋偷念伾?，例如可以是命名顏色，也可以是十六進制和 RGB 值：p border-style: solid; border-color: blue rgb(25%,35%,45%) #909090 red; 如果顏色值小于 4 個，值復(fù)制就會起作用。例如下面的規(guī)則聲明了段落的上下邊框是藍色，左右邊框是紅色：p border-style: solid;

18、border-color: blue red; 注釋：默認的邊框顏色是元素本身的前景色。如果沒有為邊框聲明顏色，它將與元素的文本顏色相同。另一方面，如果元素沒有任何文本，假設(shè)它是一個表格，其中只包含圖像，那么該表的邊框顏色就是其父元素的文本顏色（因為 color 可以繼承）。這個父元素很可能是 body、div 或另一個 table。定義單邊顏色還有一些單邊邊框顏色屬性。它們的原理與單邊樣式和寬度屬性相同：· border-top-color · border-right-color · border-bottom-color · border-left

19、-color 要為 h1 元素指定實線黑色邊框，而右邊框為實線紅色，可以這樣指定：h1 border-style: solid; border-color: black; border-right-color: red; 透明邊框我們剛才講過，如果邊框沒有樣式，就沒有寬度。不過有些情況下您可能希望創(chuàng)建一個不可見的邊框。CSS2 引入了邊框顏色值 transparent。這個值用于創(chuàng)建有寬度的不可見邊框。請看下面的例子：<a href="#">AAA</a><a href="#">BBB</a><a h

20、ref="#">CCC</a>我們?yōu)樯厦娴逆溄佣x了如下樣式：a:link, a:visited border-style: solid; border-width: 5px; border-color: transparent; a:hover border-color: gray;如需查看以上樣式的效果，請點擊：TIY。從某種意義上說，利用 transparent，使用邊框就像是額外的內(nèi)邊距一樣；此外還有一個好處，就是能在你需要的使用使其可見。這種透明邊框相當(dāng)于內(nèi)邊距，因為元素的背景會延伸到邊框區(qū)域（如果有可見背景的話）。重要事項：在 IE7 之前，I

21、E/WIN 沒有提供對 transparent 的支持。在以前的版本，IE 會根據(jù)元素的 color 值來設(shè)置邊框顏色。CSS 邊框?qū)嵗核羞吙驅(qū)傩栽谝粋€聲明之中 本例演示用簡寫屬性來將所有四個邊框?qū)傩栽O(shè)置于同一聲明中。 設(shè)置四邊框樣式 本例演示如何設(shè)置四邊框樣式。 設(shè)置每一邊的不同邊框 本例演示如何在元素的各邊設(shè)置不同的邊框。 所有邊框?qū)挾葘傩栽谝粋€聲明之中 本例演示用簡寫屬性來將所有邊框?qū)挾葘傩栽O(shè)置于同一聲明中。 設(shè)置四個邊框的顏色 本例演示如何設(shè)置四個邊框的顏色。可以設(shè)置一到四個顏色。 所有下邊框?qū)傩栽谝粋€聲明中 本例演示用簡寫屬性來將所有下邊框?qū)傩栽O(shè)置在同一聲明中。 設(shè)置下邊框的顏色

22、 本例演示如何設(shè)置下邊框的顏色。 設(shè)置下邊框的樣式 本例演示如何設(shè)置下邊框的樣式。 設(shè)置下邊框的寬度 本例演示如何設(shè)置下邊框的寬度。 所有左邊框?qū)傩栽谝粋€聲明之中 所有左邊框?qū)傩栽谝粋€聲明之中 設(shè)置左邊框的顏色 本例演示如何設(shè)置左邊框的顏色。 設(shè)置左邊框的樣式 本例演示如何設(shè)置左邊框的樣式。 設(shè)置左邊框的寬度 本例演示如何設(shè)置左邊框的寬度。 所有右邊框?qū)傩栽谝粋€聲明之中 本例演示一個簡寫屬性，用于把所有右邊框?qū)傩栽O(shè)置在一條聲明中。 設(shè)置右邊框的顏色 本例演示如何設(shè)置右邊框的顏色。 設(shè)置右邊框的樣式 本例演示如何設(shè)置右邊框的樣式。 設(shè)置右邊框的寬度 本例演示如何設(shè)置右邊框的寬度。 所有上邊框?qū)傩?/p>

23、在一個聲明之中 本例演示用簡寫屬性來將所有上邊框?qū)傩栽O(shè)置于同一聲明之中。 設(shè)置上邊框的顏色 本例演示如何設(shè)置上邊框的顏色。 設(shè)置上邊框的樣式 本例演示如何設(shè)置上邊框的樣式。 設(shè)置上邊框的寬度 本例演示如何設(shè)置上邊框的寬度。 CSS 邊框?qū)傩詫傩悦枋鯾order簡寫屬性，用于把針對四個邊的屬性設(shè)置在一個聲明。border-style用于設(shè)置元素所有邊框的樣式，或者單獨地為各邊設(shè)置邊框樣式。border-width簡寫屬性，用于為元素的所有邊框設(shè)置寬度，或者單獨地為各邊邊框設(shè)置寬度。border-color簡寫屬性，設(shè)置元素的所有邊框中可見部分的顏色，或為 4 個邊分別設(shè)置顏色。border-bo

24、ttom簡寫屬性，用于把下邊框的所有屬性設(shè)置到一個聲明中。border-bottom-color設(shè)置元素的下邊框的顏色。border-bottom-style設(shè)置元素的下邊框的樣式。border-bottom-width設(shè)置元素的下邊框的寬度。border-left簡寫屬性，用于把左邊框的所有屬性設(shè)置到一個聲明中。border-left-color設(shè)置元素的左邊框的顏色。border-left-style設(shè)置元素的左邊框的樣式。border-left-width設(shè)置元素的左邊框的寬度。border-right簡寫屬性，用于把右邊框的所有屬性設(shè)置到一個聲明中。border-right-color

25、設(shè)置元素的右邊框的顏色。border-right-style設(shè)置元素的右邊框的樣式。border-right-width設(shè)置元素的右邊框的寬度。border-top簡寫屬性，用于把上邊框的所有屬性設(shè)置到一個聲明中。border-top-color設(shè)置元素的上邊框的顏色。border-top-style設(shè)置元素的上邊框的樣式。border-top-width設(shè)置元素的上邊框的寬度。CSS 外邊距· Previous Page · Next Page 圍繞在元素邊框的空白區(qū)域是外邊距。設(shè)置外邊距會在元素外創(chuàng)建額外的“空白”。設(shè)置外邊距的最簡單的方法就是使用 margin 屬性，

26、這個屬性接受任何長度單位、百分數(shù)值甚至負值。CSS margin 屬性設(shè)置外邊距的最簡單的方法就是使用 margin 屬性。margin 屬性接受任何長度單位，可以是像素、英寸、毫米或 em。margin 可以設(shè)置為 auto。更常見的做法是為外邊距設(shè)置長度值。下面的聲明在 h1 元素的各個邊上設(shè)置了 1/4 英寸寬的空白：h1 margin : 0.25in;下面的例子為 h1 元素的四個邊分別定義了不同的外邊距，所使用的長度單位是像素 (px)：h1 margin : 10px 0px 15px 5px;與內(nèi)邊距的設(shè)置相同，這些值的順序是從上外邊距 (top) 開始圍著元素順時針旋轉(zhuǎn)的：m

27、argin: top right bottom left另外，還可以為 margin 設(shè)置一個百分比數(shù)值：p margin : 10%;百分數(shù)是相對于父元素的 width 計算的。上面這個例子為 p 元素設(shè)置的外邊距是其父元素的 width 的 10%。margin 的默認值是 0，所以如果沒有為 margin 聲明一個值，就不會出現(xiàn)外邊距。但是，在實際中，瀏覽器對許多元素已經(jīng)提供了預(yù)定的樣式，外邊距也不例外。例如，在支持 CSS 的瀏覽器中，外邊距會在每個段落元素的上面和下面生成“空行”。因此，如果沒有為 p 元素聲明外邊距，瀏覽器可能會自己應(yīng)用一個外邊距。當(dāng)然，只要你特別作了聲明，就會覆蓋

28、默認樣式。值復(fù)制還記得嗎？我們曾經(jīng)在前兩節(jié)中提到過值復(fù)制。下面我們?yōu)槟v解如何使用值復(fù)制。有時，我們會輸入一些重復(fù)的值：p margin: 0.5em 1em 0.5em 1em;通過值復(fù)制，您可以不必重復(fù)地鍵入這對數(shù)字。上面的規(guī)則與下面的規(guī)則是等價的：p margin: 0.5em 1em;這兩個值可以取代前面 4 個值。這是如何做到的呢？CSS 定義了一些規(guī)則，允許為外邊距指定少于 4 個值。規(guī)則如下：· 如果缺少左外邊距的值，則使用右外邊距的值。 · 如果缺少下外邊距的值，則使用上外邊距的值。 · 如果缺少右外邊距的值，則使用上外邊距的值。 下圖提供了更直觀

29、的方法來了解這一點：換句話說，如果為外邊距指定了 3 個值，則第 4 個值（即左外邊距）會從第 2 個值（右外邊距）復(fù)制得到。如果給定了兩個值，第 4 個值會從第 2 個值復(fù)制得到，第 3 個值（下外邊距）會從第 1 個值（上外邊距）復(fù)制得到。最后一個情況，如果只給定一個值，那么其他 3 個外邊距都由這個值（上外邊距）復(fù)制得到。利用這個簡單的機制，您只需指定必要的值，而不必全部都應(yīng)用 4 個值，例如：h1 margin: 0.25em 1em 0.5em;/* 等價于 0.25em 1em 0.5em 1em */h2 margin: 0.5em 1em;/* 等價于 0.5em 1em 0.

30、5em 1em */p margin: 1px;/* 等價于 1px 1px 1px 1px */這種辦法有一個小缺點，您最后肯定會遇到這個問題。假設(shè)希望把 p 元素的上外邊距和左外邊距設(shè)置為 20 像素，下外邊距和右外邊距設(shè)置為 30 像素。在這種情況下，必須寫作：p margin: 20px 30px 30px 20px;這樣才能得到您想要的結(jié)果。遺憾的是，在這種情況下，所需值的個數(shù)沒有辦法更少了。再來看另外一個例子。如果希望除了左外邊距以外所有其他外邊距都是 auto（左外邊距是 20px）：p margin: auto auto auto 20px;同樣的，這樣才能得到你想要的效果。問

31、題在于，鍵入這些 auto 有些麻煩。如果您只是希望控制元素單邊上的外邊距，請使用單邊外邊距屬性。單邊外邊距屬性您可以使用單邊外邊距屬性為元素單邊上的外邊距設(shè)置值。假設(shè)您希望把 p 元素的左外邊距設(shè)置為 20px。不必使用 margin（需要鍵入很多 auto），而是可以采用以下方法：p margin-left: 20px;您可以使用下列任何一個屬性來只設(shè)置相應(yīng)上的外邊距，而不會直接影響所有其他外邊距：· margin-top · margin-right · margin-bottom · margin-left 一個規(guī)則中可以使用多個這種單邊屬性，例

32、如：h2 margin-top: 20px; margin-right: 30px; margin-bottom: 30px; margin-left: 20px; 當(dāng)然，對于這種情況，使用 margin 可能更容易一些：p margin: 20px 30px 30px 20px;不論使用單邊屬性還是使用 margin，得到的結(jié)果都一樣。一般來說，如果希望為多個邊設(shè)置外邊距，使用 margin 會更容易一些。不過，從文檔顯示的角度看，實際上使用哪種方法都不重要，所以應(yīng)該選擇對自己來說更容易的一種方法。提示和注釋提示：Netscape 和 IE 對 body 標(biāo)簽定義的默認邊距（margin）值

33、是 8px。而 Opera 不是這樣。相反地，Opera 將內(nèi)部填充（padding）的默認值定義為 8px，因此如果希望對整個網(wǎng)站的邊緣部分進行調(diào)整，并將之正確顯示于 Opera 中，那么必須對 body 的 padding 進行自定義。CSS 外邊距實例：設(shè)置文本的左外邊距 本例演示如何設(shè)置文本的左外邊距。 設(shè)置文本的右外邊距 本例演示如何設(shè)置文本的右外邊距。 設(shè)置文本的上外邊距 本例演示如何設(shè)置文本的上外邊距。 設(shè)置文本的下外邊距 本例演示如何設(shè)置文本的下外邊距。 所有的外邊距屬性在一個聲明中。 本例演示如何將所有的外邊距屬性設(shè)置于一個聲明中。 CSS 外邊距屬性屬性描述margin簡寫

34、屬性。在一個聲明中設(shè)置所有外邊距屬性。margin-bottom設(shè)置元素的下外邊距。margin-left設(shè)置元素的左外邊距。margin-right設(shè)置元素的右外邊距。margin-top設(shè)置元素的上外邊距。CSS 外邊距合并· Previous Page · Next Page 外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。外邊距合并外邊距合并（疊加）是一個相當(dāng)簡單的概念。但是，在實踐中對網(wǎng)頁進行布局時，它會造成許多混淆。簡單地說，外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊

35、距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。當(dāng)一個元素出現(xiàn)在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并。請看下圖：當(dāng)一個元素包含在另一個元素中時（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發(fā)生合并。請看下圖：盡管看上去有些奇怪，但是外邊距甚至可以與自身發(fā)生合并。假設(shè)有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發(fā)生合并：如果這個外邊距遇到另一個元素的外邊距，它還會發(fā)生合并：這就是一系列的段落元素占用空間非常小的原因，因為它們的所有外邊距都合并到一起，形成了一個小的外邊距。

36、外邊距合并初看上去可能有點奇怪，但是實際上，它是有意義的。以由幾個段落組成的典型文本頁面為例。第一個段落上面的空間等于段落的上外邊距。如果沒有外邊距合并，后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。注釋：只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并。行內(nèi)框、浮動框或絕對定位之間的外邊距不會合并。CSS 定位 (Positioning)· Previous Page · Next Page CSS 定位 (Positioning)

37、屬性允許你對元素進行定位。CSS 定位和浮動CSS 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務(wù)。定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應(yīng)該出現(xiàn)的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。顯然，這個功能非常強大，也很讓人吃驚。要知道，用戶代理對 CSS2 中定位的支持遠勝于對其它方面的支持，對此不應(yīng)感到奇怪。另一方面，CSS1 中首次提出了浮動，它以 Netscape 在 Web 發(fā)展初期增加的一個功能為基礎(chǔ)。浮動不完全是定位，不過，它當(dāng)然也不是正常流布局。我們會

38、在后面的章節(jié)中明確浮動的含義。一切皆為框div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內(nèi)容，即“塊框”。與之相反，span 和 strong 等元素稱為“行內(nèi)元素”，這是因為它們的內(nèi)容顯示在行中，即“行內(nèi)框”。您可以使用 display 屬性改變生成的框的類型。這意味著，通過將 display 屬性設(shè)置為 block，可以讓行內(nèi)元素（比如 <a> 元素）表現(xiàn)得像塊級元素一樣。還可以通過把 display 設(shè)置為 none，讓生成的元素根本沒有框。這樣的話，該框及其所有內(nèi)容就不再顯示，不占用文檔中的空間。但是在一種情況下，即使沒有進行顯式定義，也會創(chuàng)建塊級元

39、素。這種情況發(fā)生在把一些文本添加到一個塊級元素（比如 div）的開頭。即使沒有把這些文本定義為段落，它也會被當(dāng)作段落對待：<div>some text<p>Some more text.</p></div>在這種情況下，這個框稱為無名塊框，因為它不與專門定義的元素相關(guān)聯(lián)。塊級元素的文本行也會發(fā)生類似的情況。假設(shè)有一個包含三行文本的段落。每行文本形成一個無名框。無法直接對無名塊或行框應(yīng)用樣式，因為沒有可以應(yīng)用樣式的地方（注意，行框和行內(nèi)框是兩個概念）。但是，這有助于理解在屏幕上看到的所有東西都形成某種框。CSS 定位機制CSS 有三種基本的定位機制

40、：普通流、浮動和絕對定位。除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 X(HTML) 中的位置決定。塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。行內(nèi)框在一行中水平布置?？梢允褂盟絻?nèi)邊距、邊框和外邊距調(diào)整它們的間距。但是，垂直內(nèi)邊距、邊框和外邊距不影響行內(nèi)框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內(nèi)框。不過，設(shè)置行高可以增加這個框的高度。在下面的章節(jié)，我們會為您詳細講解相對定位、絕對定位和浮動。CSS position 屬性通過使用 position 屬性，我們可以選擇 4

41、 中不同類型的定位，這會影響元素框生成的方式。position 屬性值的含義：static 元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父元素中。 relative 元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。 absolute 元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。 fixed 元素框的表現(xiàn)類似于將 position 設(shè)置為

42、absolute，不過其包含塊是視窗本身。 提示：相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。實例定位：相對定位 本例演示如何相對于一個元素的正常位置來對其定位。 定位：絕對定位 本例演示如何使用絕對值來對元素進行定位。 定位：固定定位 本例演示如何相對于瀏覽器窗口來對元素進行定位。 使用固定值設(shè)置圖像的上邊緣 本例演示如何使用固定值設(shè)置圖像的上邊緣。 使用百分比設(shè)置圖像的上邊緣 本例演示如何使用百分比值設(shè)置圖像的上邊緣。 使用像素值設(shè)置圖像的底部邊緣 本例演示如何使用像素值設(shè)置圖像的底部邊緣。 使用百分比設(shè)置圖像的底部邊緣 本例演示如何使用百分比值設(shè)置

43、圖像的底部邊緣。 使用固定值設(shè)置圖像的左邊緣 本例演示如何使用固定值設(shè)置圖像的左邊緣。 使用百分比設(shè)置圖像的左邊緣 本例演示如何使用百分比值設(shè)置圖像的左邊緣。 使用固定值設(shè)置圖像的右邊緣 本例演示如何使用固定值設(shè)置圖像的右邊緣。 使用百分比設(shè)置圖像的右邊緣 本例演示如何使用百分比值設(shè)置圖像的右邊緣。 如何使用滾動條來顯示元素內(nèi)溢出的內(nèi)容 本例演示當(dāng)元素內(nèi)容太大而超出規(guī)定區(qū)域時，如何設(shè)置溢出屬性來規(guī)定相應(yīng)的動作。 如何隱藏溢出元素中溢出的內(nèi)容 本例演示在元素中的內(nèi)容太大以至于無法適應(yīng)指定的區(qū)域時，如何設(shè)置 overflow 屬性來隱藏其內(nèi)容。 如何設(shè)置瀏覽器來自動地處理溢出 本例演示如何設(shè)置瀏覽

44、器來自動地處理溢出。 設(shè)置元素的形狀 本例演示如何設(shè)置元素的形狀。此元素被剪裁到這個形狀內(nèi)，并顯示出來。 垂直排列圖象 本例演示如何在文本中垂直排列圖象。 Z-index Z-index可被用于將在一個元素放置于另一元素之后。 Z-index 上面的例子中的元素已經(jīng)更改了Z-index。 CSS 定位屬性CSS 定位屬性允許你對元素進行定位。屬性描述position把元素放置到一個靜態(tài)的、相對的、絕對的、或固定的位置中。top定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。right定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。bottom定義了定位元素下外邊距邊界與其包含

45、塊下邊界之間的偏移。left定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。overflow設(shè)置當(dāng)元素的內(nèi)容溢出其區(qū)域時發(fā)生的事情。clip設(shè)置元素的形狀。元素被剪入這個形狀之中，然后顯示出來。vertical-align設(shè)置元素的垂直對齊方式。z-index設(shè)置元素的堆疊順序。CSS 相對定位· Previous Page · Next Page 設(shè)置為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。CSS 相對定位相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現(xiàn)在它所在的位置上。然后，可以通過設(shè)置垂直或水

46、平位置，讓這個元素“相對于”它的起點進行移動。如果將 top 設(shè)置為 20px，那么框?qū)⒃谠恢庙敳肯旅?20 像素的地方。如果 left 設(shè)置為 30 像素，那么會在元素左邊創(chuàng)建 30 像素的空間，也就是將元素向右移動。#box_relative position: relative; left: 30px; top: 20px;如下圖所示：注意，在使用相對定位時，無論是否進行移動，元素仍然占據(jù)原來的空間。因此，移動元素會導(dǎo)致它覆蓋其它框。CSS 相對定位實例定位：相對定位 本例演示如何相對于一個元素的正常位置來對其定位。 CSS 絕對定位· Previous Page ·

47、; Next Page 設(shè)置為絕對定位的元素框從文檔流完全刪除，并相對于其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。CSS 絕對定位絕對定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。普通流中其它元素的布局就像絕對定位的元素不存在一樣：#box_relative position: absolute; left: 30px; top: 20p

48、x;如下圖所示：絕對定位的元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊。對于定位的主要問題是要記住每種定位的意義。所以，現(xiàn)在讓我們復(fù)習(xí)一下學(xué)過的知識吧：相對定位是“相對于”元素在文檔中的初始位置，而絕對定位是“相對于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相對于”最初的包含塊。注釋：根據(jù)用戶代理的不同，最初的包含塊可能是畫布或 HTML 元素。提示：因為絕對定位的框與文檔流無關(guān)，所以它們可以覆蓋頁面上的其它元素?？梢酝ㄟ^設(shè)置 z-index 屬性來控制這些框的堆放次序。CSS 絕對定位實例定位：絕對定位 本例演示如何使用絕

49、對值來對元素進行定位。 CSS 浮動· Previous Page · Next Page 浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。CSS 浮動請看下圖，當(dāng)把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：再請看下圖，當(dāng)框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據(jù)空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。如果把所有三個框都向左移動，那么框 1

50、向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當(dāng)它們向下移動時可能被其它浮動元素“卡住”：CSS float 屬性在 CSS 中，我們通過 float 屬性實現(xiàn)元素的浮動。如需更多有關(guān) float 屬性的知識，請訪問參考手冊：CSS float 屬性。行框和清理浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。因此，創(chuàng)建浮動框可以使文本圍繞圖像：要想阻止行框圍繞浮動框，需要對該框應(yīng)用 clear 屬性。clear 屬性的值可以是 left、right、both