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

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

　　而CSS能使你看到希望的曙光。利用今天我們即將學(xué)到的CSS屬性，你可以精確地設(shè)定要素的位置，還能將定位的要素疊放在彼此之上，還有...還有......你自己慢慢看吧！
　　CascadingStyleSheets（CSS）是DHTML的基礎(chǔ)。CSS用來設(shè)定你網(wǎng)頁(yè)上的元素是如何展示的。CascadingStyleSheetsPositioning（CSS-P）是CSS的一個(gè)擴(kuò)展，它可用來控制任何東西在網(wǎng)頁(yè)上或是說在窗口中的位置。請(qǐng)你記住這兩個(gè)名詞：CSS和CSS－P。下面看一下DIV標(biāo)簽的使用。#p#

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

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

　　◆ThisisaDIVtag.

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

　　◆Thisisatruck

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

　　InlineCSS：Inline是最常用的方法。

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

　　Thisisatruck.

　　Cross-BrowserCSS性質(zhì)：
　　我們這個(gè)課程的主要目的是讓你寫出的網(wǎng)頁(yè)在NS4和IE4上都能工作，所以我們主要討論那些對(duì)倆者都通用的性質(zhì)。下面這些性質(zhì)符合由W3C給出的標(biāo)準(zhǔn)。
　　position　決定DIVtag是如何放置的?！皉elative”意思是DIV的位置是相對(duì)于其他tag的，而“absolute”是說DIVtag的位置是相對(duì)于它所在的窗口。
　　left　相對(duì)于窗口左邊的位置
　　top　相對(duì)于窗口上邊的位置
　　width　DIVtag的寬度。所有在DIV里的文字或html都在里面。
　　height　DIVtag的高度。這個(gè)性質(zhì)很少用除非你想Clip層次。

　　◆clip　給出layer的clipping（可看的見的）部分。Clip可使得DIV顯示為一個(gè)可以定義的很準(zhǔn)確的方塊。你可以用以下的四個(gè)值來給出這個(gè)方塊的在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的背景圖象。#p#

　　2．絕對(duì)定位和相對(duì)定位（position）

　　◆絕對(duì)定位：

　　定位屬性將是網(wǎng)蟲們打開幸福之門的鑰匙：
　　H4{;left:100px;top:43px}
　　這項(xiàng)CSS規(guī)則讓瀏覽器將

的起始位置精確地定在距離瀏覽器左邊100象素，距離其頂部43象素的位置。注意這里唯一設(shè)置了的是左邊和頂部，也就說，文字將從左到右，從上到下載入瀏覽窗口。
　　左邊和頂部屬性很直觀，左邊（left）設(shè)定要素距瀏覽器窗口左邊的距離，頂部（top）設(shè)定距離瀏覽器窗口頂部的距離。設(shè)定這些距離時(shí)，你可以使用所學(xué)過的各種度單位或比例值。使用比例值時(shí)，比例值的是相對(duì)于母體要素的尺寸。
　　你可以定位什么呢？任何東西！段落、單詞、GIF和JPEG圖象、QUICKTIME電影等等。

　　◆相對(duì)定位：

　　絕對(duì)定位使你能精確地定位要素在頁(yè)面的獨(dú)立位置，而不考慮頁(yè)面其它要素的定位設(shè)置。相對(duì)定位指你所定位的要素的位置相對(duì)于在文件中所分配的位置。例：
　　I{;left:40px;top:10px}

　　相對(duì)定位的關(guān)鍵在于定位了的要素的位置是相對(duì)于它通常應(yīng)在的位置進(jìn)行定位。相對(duì)定位單元出現(xiàn)在普通的靜態(tài)定位單元的行間，定位時(shí)沒有把自己和靜態(tài)定位單元完全分開。如果你停止使用相對(duì)定位，則文字的顯示位置將恢復(fù)正常。使用相對(duì)定位時(shí)要小心，否則容易將頁(yè)面弄得非常亂。
　　除了相對(duì)定位和絕對(duì)定位，你還可以使用static（靜止）參數(shù)值。Static是position特性的缺省值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位設(shè)置。也就是說，除了邊距特性，或通過使用float特性來浮動(dòng)單元可影響單元的定位外，其它均不可以。#p#

　　3．定位單元的控制（width、height、visiblility）

　　除了控制定位單元的左上角位置，你還可以控制單元的寬度和高度，及單元在頁(yè)面的可視性。

      ◆寬度：定位了的要素在頁(yè)面上顯示時(shí)仍然會(huì)從左到右一直顯示。利用寬度屬性就可以設(shè)定字符向右流動(dòng)的限制，即設(shè)定要素的寬度。
　　DIV{;left:200px;top:40px;width:150px}
　　瀏覽器接到這項(xiàng)規(guī)則時(shí)，它將文字按照規(guī)則規(guī)定的效果顯示，還將段落最大水平尺寸限制在150象素。
　　寬度屬性只適用于絕對(duì)定位的要素。你可以使用我們學(xué)過的任何一種長(zhǎng)度單位，或使用比例值設(shè)定寬度，比例值指相對(duì)于母體要素的比例。IE4中，這項(xiàng)屬性還可用于圖象。你可以通過寬度設(shè)置人為地拉寬或壓縮圖象。

　　◆高度：理論上講，高度應(yīng)該和寬度的設(shè)置類似，只不過是在垂直方向上：
　　DIV{;left:200px;top:40px;height:150px}
　　這里我用了“理論上講”，因?yàn)橛行g覽器不支持高度屬性。
　　可視性：利用CSS，你可以隱藏要素，使其在頁(yè)面上看不見。這條屬性對(duì)于定位了的和未定位的要素都適用。
　　H4{visibility:hidden}

　　◆選項(xiàng)：

　　visible使要素可以被看見
　　hidden使要素被隱藏
　　inherit指它將繼承母體要素的可視性設(shè)置。
　　值inherit為缺省值。這使單元繼承父單元的可見性。所以，如果某一段是隱藏的，則它包含的任何行間單元也都被隱藏。這一繼承性可被明確指定的可見性取代。例如，段內(nèi)的EM單元被指定為可見，這時(shí)如果該段被隱藏，則段內(nèi)的所有其它內(nèi)容都將消失，而唯有EM單元中的文本是可見的。

【編輯推薦】

1. DIV中class與id的區(qū)別及應(yīng)用
2. IE6.0對(duì)padding的解讀分析
3. 揭露CSS中margins折疊現(xiàn)象內(nèi)幕
4. DIV+CSS開發(fā)Xhtml網(wǎng)頁(yè)對(duì)SEO優(yōu)化的影響
5. DIV CSS網(wǎng)頁(yè)布局中對(duì)段落進(jìn)行排版的方法