CSS單元的位置和層次-div標簽

我們都知道，在網頁上利用HTML定位文字和圖象是一件“令人心痛”的事情。我們必須使用表格標簽和隱式GIF圖象，即使這樣也不能保證定位的精確，因為瀏覽器和操作平臺不同會使顯示的結果發生變化。

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

1．使用DIV標簽（div）

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

◆ThisisaDIVtag.

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

◆Thisisatruck

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

InlineCSS：Inline是最常用的方法。

Thisisatruck.
ExternalSTYLEtag：使用External方法的結果是一樣的。我們會在以后的課程里再詳細解釋這種方法。現在我們主要討論Inline方法。請注意在External方法里，在STYLE里的ID和DIV里的關系。

Thisisatruck.

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

◆clip　給出layer的clipping（可看的見的）部分。Clip可使得DIV顯示為一個可以定義的很準確的方塊。你可以用以下的四個值來給出這個方塊的在DIV位置和大小。
clip:rect(top,right,bottom,left);
visibility　隱蔽或展現DIV根據它的值“visible”，“hidden”，“inherit”。
z-index　DIVtag的立體位置。值越大DIV的位置越高。
background-color　DIV背景的顏色。
layer-background-color　Netscape的DIV背景顏色。
background-image　DIV的背景圖象。
layer-background-image　Netscape的DIV的背景圖象。

2．絕對定位和相對定位（position）

◆絕對定位：

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

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

◆相對定位：

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

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

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

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

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

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

◆選項：

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