css框模型和定位

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

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

3、為頁面設(shè)置了恰當(dāng)?shù)?DTD，大多數(shù)瀏覽器都會(huì)按照上面的圖示來呈現(xiàn)內(nèi)容。然而 IE 5 和 6 的呈現(xiàn)卻是不正確的。根據(jù) W3C 的規(guī)范，元素內(nèi)容占據(jù)的空間是由 width 屬性設(shè)置的，而內(nèi)容周圍的 padding 和 border 值是另外計(jì)算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標(biāo)準(zhǔn)模型。這些瀏覽器的 width 屬性不是內(nèi)容的寬度，而是內(nèi)容、內(nèi)邊距和邊框的寬度的總和。雖然有方法解決這個(gè)問題。但是目前最好的解決方案是回避這個(gè)問題。也就是，不要給元素添加具有指定寬度的內(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 屬性接受長度值或百分比值，但不允許使用負(fù)值。例如，如果您希望所有 h1 元素的各邊都有 10 像素的內(nèi)邊距，只需要這樣：h1 padding: 10px;您還可以按照上、右、下、左的順序分別設(shè)置各邊的內(nèi)邊距，各邊均可以使用不同的單位或百分比值：h1 padding: 10px 0.25em 2ex 20%;單邊內(nèi)邊距屬性也通過使用下面四個(gè)單獨(dú)的屬性，分別設(shè)置上、右、下、左內(nèi)邊距：· padding-top · padding-right · padding-bottom · padding-lef

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

7、dth 計(jì)算。<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)邊距的百分?jǐn)?shù)會(huì)相對(duì)于父元素寬度設(shè)置，而不是相對(duì)于高度。CSS 內(nèi)邊距實(shí)例：所有內(nèi)邊距屬性在一個(gè)聲明中 本例演示使用簡寫屬性將所有的內(nèi)邊距屬性設(shè)置于一個(gè)聲明中，可以有一到四個(gè)值。 設(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簡寫屬性。作用是在一個(gè)聲明中設(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、線。每個(gè)邊框有 3 個(gè)方面：寬度、樣式，以及顏色。在下面的篇幅，我們會(huì)為您詳細(xì)講解這三個(gè)方面。邊框與背景CSS 規(guī)范指出，邊框繪制在“元素的背景之上”。這很重要，因?yàn)橛行┻吙蚴恰伴g斷的”（例如，點(diǎn)線邊框或虛線框），元素的背景應(yīng)當(dāng)出現(xiàn)在邊框的可見部分之間。CSS2 指出背景只延伸到內(nèi)邊距，而不是邊框。后來 CSS2.1 進(jìn)行了更正：元素的背景是內(nèi)容、內(nèi)邊距和邊框區(qū)的背景。大多數(shù)瀏覽器都遵循 CSS2.1 定義，不過一些較老的瀏覽器可能會(huì)有不同的表現(xiàn)。邊框的樣式樣式是邊框最重要的一個(gè)方面，這不是因?yàn)闃邮娇刂浦吙虻娘@示（當(dāng)然，樣式確實(shí)控制著邊框的顯示），而是因?yàn)槿绻麤]有樣式，將根本沒有邊框。CSS

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

12、同內(nèi)邊距時(shí)也見過這個(gè)順序。定義單邊樣式如果您希望為元素框的某一個(gè)邊設(shè)置邊框樣式，而不是設(shè)置所有 4 個(gè)邊的邊框樣式，可以使用下面的單邊邊框樣式屬性：· border-top-style · border-right-style · border-bottom-style · border-left-style 因此這兩種方法是等價(jià)的：p border-style: solid solid solid none;p border-style: solid; border-left-style: none;注意：如果要使用第二種方法，必須把單邊屬性放在簡寫屬

13、性之后。因?yàn)槿绻褑芜厡傩苑旁?border-style 之前，簡寫屬性的值就會(huì)覆蓋單邊值 none。邊框的寬度您可以通過 border-width 屬性為邊框指定寬度。為邊框指定寬度有兩種方法：可以指定長度值，比如 2px 或 0.1em；或者使用 3 個(gè)關(guān)鍵字之一，它們分別是 thin 、medium（默認(rèn)值） 和 thick。注釋：CSS 沒有定義 3 個(gè)關(guān)鍵字的具體寬度，所以一個(gè)用戶代理可能把 thin 、medium 和 thick 分別設(shè)置為等于 5px、3px 和 2px，而另一個(gè)用戶代理則分別設(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ī)則與上面的例子是等價(jià)的：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、 會(huì)出現(xiàn)什么情況：p border-style: none; border-width: 50px;盡管邊框的寬度是 50px，但是邊框樣式設(shè)置為 none。在這種情況下，不僅邊框的樣式?jīng)]有了，其寬度也會(huì)變成 0。邊框消失了，為什么呢？這是因?yàn)槿绻吙驅(qū)挾葹?0，即邊框根本不存在，那么邊框就不可能有寬度，因此邊框?qū)挾茸詣?dòng)設(shè)置為 0，而不論您原先定義的是什么？記住這一點(diǎn)非常重要。事實(shí)上，忘記聲明邊框樣式是一個(gè)常犯的錯(cuò)誤。根據(jù)以下規(guī)則，所有 h1 元素都不會(huì)有任何邊框，更不用說 20 像素寬了：h1 border-width: 20px;由于 border-style 的默認(rèn)值是 none，如果沒

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

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

19、-color 要為 h1 元素指定實(shí)線黑色邊框，而右邊框?yàn)閷?shí)線紅色，可以這樣指定：h1 border-style: solid; border-color: black; border-right-color: red; 透明邊框我們剛才講過，如果邊框沒有樣式，就沒有寬度。不過有些情況下您可能希望創(chuàng)建一個(gè)不可見的邊框。CSS2 引入了邊框顏色值 transparent。這個(gè)值用于創(chuàng)建有寬度的不可見邊框。請(qǐ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;如需查看以上樣式的效果，請(qǐng)點(diǎn)擊：TIY。從某種意義上說，利用 transparent，使用邊框就像是額外的內(nèi)邊距一樣；此外還有一個(gè)好處，就是能在你需要的使用使其可見。這種透明邊框相當(dāng)于內(nèi)邊距，因?yàn)樵氐谋尘皶?huì)延伸到邊框區(qū)域（如果有可見背景的話）。重要事項(xiàng)：在 IE7 之前，I

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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