你對DIV標(biāo)簽的概念和使用你是否了解，DIV標(biāo)簽稱為區(qū)隔標(biāo)記，DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來構(gòu)成這個塊的。

DIV標(biāo)簽簡介

　　DIV元素是用來為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來構(gòu)成這個塊的，其中所包含元素的特性由DIV標(biāo)簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進(jìn)行控制。

　　DIV標(biāo)簽稱為區(qū)隔標(biāo)記。作用：設(shè)定字、畫、表格等的擺放位置。當(dāng)你把文字，圖象，或其他的放在DIV中，它可稱作為“DIVblock”，或“DIVelement”或“CSS-layer”，或干脆叫“layer”。而中文我們把它稱作“層次”。所以當(dāng)你以后看到這些名詞的時候，你就知道它們是指一段在DIV中的HTML。

　　DIV標(biāo)簽應(yīng)用于StyleSheet（式樣表）方面會更顯威力，它最終目的是給設(shè)計者另一種組織能力，有Class;Style;title;ID等屬性，將會于【StyleSheet】一節(jié)才作詳述，這處只介紹一個屬性設(shè)定。

范例

　　以以下內(nèi)容為例：

　　align="center"
　　可選值：center;left;right。決定字、畫、表格等居中、靠左或靠右的作用和居中標(biāo)記<CENTER>一樣，前者是由HTML3.0開始的標(biāo)準(zhǔn)，后者是通用己久的標(biāo)示法。

　　◆CSS單元的位置和層次-div標(biāo)簽

　　我們都知道，在網(wǎng)頁上利用HTML定位文字和圖象是一件“令人心痛”的事情。我們必須使用表格標(biāo)簽和隱式GIF圖象，即使這樣也不能保證定位的精確，因?yàn)闉g覽器和操作平臺不同會使顯示的結(jié)果發(fā)生變化。

　　而CSS能使你看到希望的曙光。利用今天我們即將學(xué)到的CSS屬性，你可以精確地設(shè)定要素的位置，還能將定位的要素疊放在彼此之上，還有...還有......你自己慢慢看吧！
　　CascadingStyleSheets（CSS）是DHTML的基礎(chǔ)。CSS用來設(shè)定你網(wǎng)頁上的元素是如何展示的。CascadingStyleSheetsPositioning（CSS-P）是CSS的一個擴(kuò)展，它可用來控制任何東西在網(wǎng)頁上或是說在窗口中的位置。請你記住這兩個名詞：CSS和CSS－P。下面四個英文網(wǎng)址提供了詳細(xì)的關(guān)于CSS和CSS-P的文件和解釋。

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

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

　　◆ThisisaDIVtag.

　　如果單獨(dú)使用DIV而不加任何CSS-P,那么它在網(wǎng)頁中的效果和使用是一樣的。
　　但當(dāng)我們把CSS-P用到DIV標(biāo)簽中去以后，我么就可以嚴(yán)格設(shè)定它的位置。首先我們需要給這個可以被CSS-P控制的DIV一個ID或說是它的名字。比如說我們給下面這個DIV的名字是truck。給名字的目的是我們以后可用JavaScript來控制它，比如說移動它或改變它的一些性質(zhì)等等。

　　◆Thisisatruck

　　給層次取什么名字是隨意的，名字可以是任何英文字母和數(shù)字，但***個必須是字母。有兩種把CSS-P應(yīng)用到DIV的方法。

　　InlineCSS：Inline是最常用的方法。

　　Thisisatruck.
　　ExternalSTYLEtag：使用External方法的結(jié)果是一樣的。我們會在以后的課程里再詳細(xì)解釋這種方法?，F(xiàn)在我們主要討論Inline方法。請注意在External方法里，在STYLE里的ID和DIV里的關(guān)系?！?/p>

　<STYLETYPESTYLETYPE="text/css"> 
　　<!--　#truck{stylesgohere}　--> 
　　</STYLE> 
 

　　Thisisatruck.

　　◆Cross-BrowserCSS性質(zhì)：
　　我們這個課程的主要目的是讓你寫出的網(wǎng)頁在NS4和IE4上都能工作，所以我們主要討論那些對倆者都通用的性質(zhì)。下面這些性質(zhì)符合由W3C給出的標(biāo)準(zhǔn)。
　　position　決定DIVtag是如何放置的。“relative”意思是DIV的位置是相對于其他tag的，而“absolute”是說DIVtag的位置是相對于它所在的窗口。
　　left　相對于窗口左邊的位置
　　top　相對于窗口上邊的位置
　　width　DIVtag的寬度。所有在DIV里的文字或html都在里面。
　　height　DIVtag的高度。這個性質(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　DIVtag的立體位置。值越大DIV的位置越高。
　　background-color　DIV背景的顏色。
　　layer-background-color　Netscape的DIV背景顏色。
　　background-image　DIV的背景圖象。
　　layer-background-image　Netscape的DIV的背景圖象。

【編輯推薦】

1. 利用img和div標(biāo)簽實(shí)現(xiàn)圖像下拉列表的模擬
2. IE6.0對padding的解讀分析
3. 揭露CSS中margins折疊現(xiàn)象內(nèi)幕
4. DIV+CSS開發(fā)Xhtml網(wǎng)頁對SEO優(yōu)化的影響
5. DIV CSS網(wǎng)頁布局中對段落進(jìn)行排版的方法