DIV

DIV簡單的說就是一個標(biāo)簽。

• 我們都知道，在。網(wǎng)頁上利用HTML定位文字和圖象是一件“令人心痛”的事情。我們必須使用表格標(biāo)簽和隱式GIF圖象，即使這樣也不能保證定位的精確，因?yàn)?a href="/wiki/%E6%B5%8F%E8%A7%88%E5%99%A8" class="mw-redirect" title="瀏覽器">瀏覽器和操作平臺的不同會使顯示的結(jié)果發(fā)生變化。而CSS能使你看到希望的曙光。利用今天我們即將學(xué)到的CSS屬性，你可以精確地設(shè)定要素的位置，還能將定位的要素疊放在彼此之上

目錄

• 1 使用 DIV 標(biāo)簽 （div）
• 2 DIV+CSS布局大全
  • 2.1 Inline 是最常用的方法
• 3 相關(guān)條目
• 4 參考來源

使用 DIV 標(biāo)簽 （div）

• 當(dāng)我們使用 CSS-P 的時候， 我們主要把它用在 DIV（division）tag 上。當(dāng)你把文字，圖象，或其他的放在 DIV 中，它可稱作為“DIV block”，或 “DIV element”或“CSS-layer”，或干脆叫“l(fā)ayer”。而中文我們把它稱作“層次”。所以當(dāng)你以后看到這些名詞的時候，你就知道它們是指一段在 DIV 中的 HTML。

• 使用 DIV 的方法跟使用其他 tag 的方法一樣：

• 如果單獨(dú)使用 DIV 而不加任何 CSS-P, 那么它在網(wǎng)頁中的效果和使用 是一樣的。

• 但當(dāng)我們把 CSS-P 用到 DIV 中去以后，我么就可以嚴(yán)格設(shè)定它的位置。首先我們需要給這個可以被 CSS-P 控制的 DIV 一個 ID 或說是它的名字。比如說我們給下面這個 DIV 的名字是 truck。給名字的目的是我們以后可用 JavaScript 來控制它，比如說移動它或改變它的一些性質(zhì)等等。
• 給層次取什么名字是隨意的，名字可以是任何英文字母和數(shù)字，但第一個必須是字母。有兩種把 CSS-P 應(yīng)用到 DIV 的方法。

DIV+CSS布局大全

DIV+CSS布局大全

Inline 是最常用的方法

• External STYLE tag：使用 External 方法的結(jié)果是一樣的。我們會在以后的課程里再詳細(xì)解釋這種方法?，F(xiàn)在我們主要討論Inline 方法。請注意在 External 方法里，在 STYLE 里的 ID 和 DIV 里的關(guān)系。
• Cross-Browser CSS 性質(zhì)：我們這個課程的主要目的是讓你寫出的網(wǎng)頁在 NS4 和 IE4 上都能工作，所以我們主要討論那些對倆者都通用的性質(zhì)。下面這些性質(zhì)符合由 W3C 給出的標(biāo)準(zhǔn)。
• position 決定 DIV tag 是如何放置的?！皉elative”意思是DIV的位置是相對于其他 tag 的，而“absolute”是說 DIV tag 的位置是相對于它所在的窗口。
• left 相對于窗口左邊的位置
• top 相對于窗口上邊的位置
• width DIV tag 的寬度。所有在 DIV 里的文字或html都在里面。
• height DIV tag 的高度。這個性質(zhì)很少用除非你想 Clip 層次。
• clip 給出 layer 的 clipping（可看的見的）部分。Clip 可使得 DIV 顯示為一個可以定義的很準(zhǔn)確的方塊。你可以用以下的四個值來給出這個方塊的在 DIV 位置和大小。
• clip:rect(top,right,bottom,left);
• visibility 隱蔽或展現(xiàn)DIV 根據(jù)它的值“visible”，“hidden”，“inherit”。
• z-index DIV tag 的立體位置。值越大 DIV 的位置越高。
• background-color DIV 背景的顏色。
• layer-background-color Netscape 的 DIV 背景顏色。
• background-image DIV 的背景圖象。
• layer-background-image Netscape 的 DIV 的背景圖象。

相關(guān)條目

• CSS

參考來源

• 參考來源1