DIV標籤，稱為區隔標記。作用是設定字、畫、表格等的擺放位置。當你把文字、圖象，或其他的放在 DIV 中，它可稱作為“DIV block”，或“DIV element”或“CSS-layer”，或乾脆叫“layer”。而中文我們把它稱作“層次”。
DIV元素，是用來為HTML文檔內大塊（block-level）的內容提供結構和背景的元素。DIV的起始標籤和結束標籤之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由DIV標籤的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。
基本介紹
- 中文名：DIV標籤
- 用來：為HTML文檔內大塊
- 稱作為：“DIV block”
- 包含：定義文檔中的分區或節
簡介,定義,用法,範例,div屬性,div全局屬性,div事件屬性,
簡介
定義
<div> 可定義文檔中的分區或節（division/section）。
<div> 標籤可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。如果用 id 或 class 來標記 <div>，那么該標籤的作用會變得更加有效。
用法
DIV標籤套用於 Style Sheet（樣式表）方面會更顯威力，它最終目的是給設計者另一種組織能力，有 Class、Style、title、ID 等屬性。
<div> 是一個塊級元素。這意味著它的內容自動地開始一個新行。實際上，換行是 <div> 固有的特定格式表現。可以通過 <div> 的 class 或 id 套用額外的樣式。
不必為每一個 <div> 都加上類或 id，雖然這樣做也有一定的好處。
可以對同一個 <div> 元素套用 class 或 id 屬性，但是更常見的情況是只套用其中一種。這兩者的主要差異是，class 用於元素組（類似的元素，或者可以理解為某一類元素），而 id 用於標識單獨的特定的元素。
範例
以下內容為例：
align="center"
可選值：center，left，right 。決定字、畫、表格等居中、靠左或靠右的作用和居中標記 <CENTER>一樣，前者是由 HTML3.0 開始 的標準，後者是通用己久的標示法。
CSS單元的位置和層次-div標籤
我們都知道，在網頁上利用HTML定位文字和圖象是一件“令人心痛”的事情。我們必須使用表格標籤和隱式GIF圖象，即使這樣也不能保證定位的精確，因為瀏覽器和操作平台不同會使顯示的結果發生變化。
而CSS能使你看到希望的曙光。利用我們即將學到的CSS屬性，你可以精確地設定元素的位置，還能將定位的元素疊放在彼此之上。
Cascading Style Sheets（CSS）是 DHTML 的基礎。CSS 用來設定你網頁上的元素是如何展示的。Cascading Style Sheets Positioning（CSS-P）是 CSS 的一個擴展，它可用來控制任何東西在網頁上或是說在視窗中的位置。請你記住這兩個名詞：CSS 和 CSS－P。下面四個英文網址提供了詳細的關於 CSS 和 CSS-P 的檔案和解釋。
● 1．使用 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 是最常用的方法。
This is a truck .
External STYLE tag：使用 External 方法的結果是一樣的。我們會在以後的課程里再詳細解釋這種方法。我們主要討論Inline 方法。請注意在 External 方法裡，在 STYLE 里的 ID 和 DIV 里的關係。
<STYLE TYPE="text/css">
<!-- #truck {styles go here} -->
</STYLE>
This is a truck .
Cross-Browser CSS 性質：
我們這個課程的主要目的是讓你寫出的網頁在 NS4 和 IE4 上都能工作， 所以我們主要討論那些對倆者都通用的性質。下面這些性質符合由 W3C 給出的標準。
position 決定 DIV tag 是如何放置的。“relative”意思是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 的背景圖象。
● 2．絕對定位和相對定位 （position）
絕對定位：
定位屬性將是網蟲們打開幸福之門的鑰匙：
H4 { ; left: 100px; top: 43px }
這項CSS規則讓瀏覽器將<H4>的起始位置精確地定在距離瀏覽器左邊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象素。
寬度屬性只適用於絕對定位的元素。你可以使用我們學過的任何一種長度單位，或使用比例值設定寬度，比例值指相對於母體元素的比例。IE 4中，這項屬性還可用於圖象。你可以通過寬度設定人為地拉寬或壓縮圖象。
高度：理論上講，高度應該和寬度的設定類似，只不過是在垂直方向上：
DIV { ; left: 200px; top: 40px; height: 150px }
這裡我用了“理論上講”，因為有些瀏覽器不支持高度屬性。
可視性：利用CSS，你可以隱藏元素，使其在頁面上看不見。這條屬性對於定位了的和未定位的元素都適用。
H4 { visibility: hidden }
選項：
visible 使元素可以被看見
hidden 使元素被隱藏
inherit 指它將繼承母體元素的可視性設定。
值 inherit 為預設值。這使單元繼承父單元的可見性。所以，如果某一段是隱藏的，則它包含的任何行間單元也都被隱藏。這一繼承性可被明確指定的可見性取代。例如，段內的 EM 單元被指定為可見，這時如果該段被隱藏，則段內的所有其它內容都將消失，而唯有 EM 單元中的文本是可見的。
div屬性
color : #999999 文字顏色
font-family : 宋體文字字型
font-size: 10pt 文字大小
font-style:italic 文字斜體
font-variant:small-caps 小字型
letter-spacing: 1pt 文字間距
line-height: 200% 設定行高
font-weight:bold 文字粗體
vertical-align:sub 下標字
vertical-align:super 上標字
text-decoration:line-through 加刪除線
text-decoration:overline 加頂線
text-decoration:underline 加底線
text-decoration:none 刪除連線底線
text-transform: capitalize 首字大寫
text-transform : uppercase 英文大寫
text-transform : lowercase 英文寫
text-align:right 文字*右對齊
text-align:left 文字*左對齊
text-align:center 文字居中對齊
這些是一些簡單的文字效果，可以套用到css的頁面中。
背景
background-color:black 背景顏色
background-image : url(image/bg.gif) 背景圖片
background-attachment : fixed 固定背景
background-repeat : repeat 重複排列-網頁預設
background-repeat : no-repeat 不重複排列
background-repeat : repeat-x 在x軸重複排列
background-repeat : repeat-y 在y軸重複排列
background-position : 90% 90% 背景圖片x與y軸的位置
連結
A 所有超連線
A:link 超連線文字格式
A:visited 瀏覽過的連線文字格式
A:active 按下連線的格式
A:hover 滑鼠移至連線
框線
border-top : 1px solid black 上框
border-bottom : 1px solid #6699cc 下框
border-left : 1px solid #6699cc 左框
border-right : 1px solid #6699cc 右框
border: 1px solid #6699cc 四框線
虛線
<TEXTAREA STYLE="border:1px dashed pink">
實線
<TEXTAREA STYLE="border:1px solid pink">
設定div的高度與文字的行高一樣就可以了，即 line-height 和 height 的數值是一樣的就可以了，最後給div一個 over-flow: hidden ，讓超出的部分隱藏。
div全局屬性
<div> 標籤支持HTML 的全局屬性。
div事件屬性
<div> 標籤支持HTML 的事件屬性。
