如何深入剖析DIV標簽的使用

如何深入剖析DIV標簽的使用，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

向大家描述一下DIV標簽的使用，DIV標簽稱為區隔標記。作用：設定字、畫、表格等的擺放位置。當你把文字，圖象，或其他的放在 DIV 中，它可稱作為“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。

DIV標簽

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

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

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

使用 DIV標簽 （div）

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

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

　　This is a DIV tag .

如果單獨使用 DIV標簽 而不加任何 CSS-P, 那么它在網頁中的效果和使用是一樣的。

但當我們把 CSS-P 用到 DIV 中去以后，我么就可以嚴格設定它的位置。首先我們需要給這個可以被 CSS-P 控制的 DIV 一個 ID 或說是它的名字。比如說我們給下面這個 DIV 的名字是 truck。給名字的目的是我們以后可用 JavaScript 來控制它， 比如說移動它或改變它的一些性質等等。

This is a truck

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

Inline CSS：Inline 是最常用的方法。

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

<STYLE TYPE="text/css"> <!--　#truck {styles go here}　--> </STYLE>

Cross-Browser CSS 性質：
我們這個課程的主要目的是讓你寫出的網頁在 NS4 和 IE4 上都能工作， 所以我們主要討論那些對倆者都通用的性質。下面這些性質符合由 W3C 給出的標準。

◆position　決定 DIV tag 是如何放置的?！皉elative”意思是DIV標簽的位置是相對于其他 tag 的，而“absolute”是說 DIV tag 的位置是相對于它所在的窗口。

left　相對于窗口左邊的位置

top　相對于窗口上邊的位置

width　DIV tag 的寬度。所有在 DIV標簽 里的文字或html都在里面。

height　DIV tag 的高度。這個性質很少用除非你想 Clip 層次。

◆clip　給出 layer 的 clipping（可看的見的）部分。Clip 可使得 DIV 顯示為一個可以定義的很準確的方塊。你可以用以下的四個值來給出這個方塊的在 DIV 位置和大小。

clip:rect(top,right,bottom,left);

visibility　隱蔽或展現DIV 根據它的值“visible”，“hidden”，“inherit”。

z-index　DIV tag 的立體位置。值越大 DIV 的位置越高。

background-color　DIV標簽 背景的顏色。

layer-background-color　Netscape 的 DIV 背景顏色。

background-image　DIV標簽 的背景圖象。

layer-background-image　Netscape 的 DIV 的背景圖象。

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。