定義

可定義文檔中的分區或節（division/section）。

标簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，并且不使用任何格式與其關聯。如果用id或class來标記

，那麼該标簽的作用會變得更加有效。注釋：

是一個塊級元素，也就是說，浏覽器通常會在div元素前後放置一個換行符。提示：請使用

元素來組合塊級元素，這樣就可以使用樣式對它們進行格式化。

DIV标簽

标簽定義HTML文檔中的分隔（DIVision）或部分（section）。

标簽常用于組合塊級元素，以便通過樣式表來對這些元素進行格式化。

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

使用DIV的方法跟使用其他tag的方法一樣：如果單獨使用DIV而不加任何 CSS-P, 那麼它在網頁中的效果和不使用是一樣的。

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

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

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

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

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-indexDIV tag的立體位置。值越大DIV的位置越高。

background-color DIV背景的顔色。

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

background-image DIV的背景圖像。

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

HTML

标簽

用法

是一個塊級元素。這意味着它的内容自動地開始一個新行。實際上，換行是

固有的唯一格式表現。可以通過

的class或id應用額外的樣式。

不必為每一個

都加上類或id，雖然這樣做也有一定的好處。

可以對同一個

元素同時應用class和id屬性，但是更常見的情況是隻應用其中一種。這兩者的主要差異是，class 用于元素組（類似的元素，或者可以理解為某一類元素），而id用于标識單獨的唯一的元素。

浏覽器支持

所有主流浏覽器都支持

屬性

标準屬性

id,class,title,style,dir,lang,xml:lang如需完整的描述，請訪問标準屬性。

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:ur（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四邊框

虛線

實線

可選的屬性

屬性：align

值：left right center justify

描述：不贊成使用。請使用樣式取而代之。規定div元素中的内容的對齊方式。

DTD：TF

定位單元的控制

（width、height、visiblility）

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

寬度

定位了的要素在頁面上顯示時仍然會從左到右一直顯示。利用寬度屬性就可以設定字符向右流動的限制，即設定要素的寬度。

DIV{position:absolute;left:200px;top:40px;width:150px}

浏覽器接到這項規則時，它将文字按照規則規定的效果顯示，還将段落的最大水平尺寸限制在150像素。

寬度屬性隻适用于絕對定位的要素。你可以使用我們學過的任何一種長度單位，或使用比例值設定寬度，比例值指相對于母體要素的比例。IE4中，這項屬性還可用于圖像。你可以通過寬度設置人為地拉寬或壓縮圖像。

高度

理論上講，高度應該和寬度的設置類似，隻不過是在垂直方向上：

DIV{position:absolute;left:200px;top:40px;height:150px}

這裡我用了“理論上講”，因為有些浏覽器不支持高度屬性。

可視性

利用CSS，你可以隐藏要素，使其在頁面上看不見。這條屬性對于定位了的和未定位的要素都适用。

H4{visibility:hidden}

選項

visible使要素可以被看見

hidden使要素被隐藏

inherit指它将繼承母體要素的可視性設置。

值inherit為缺省值。這使單元繼承父單元的可見性。所以，如果某一段是隐藏的，則它包含的任何行間單元也都被隐藏。這一繼承性可被明确指定的可見性取代。例如，段内的EM單元被指定為可見，這時如果該段被隐藏，則段内的所有其它内容都将消失，而唯有 EM 單元中的文本是可見的。

當一個要素被隐藏後，它仍然要占據浏覽器窗口中的原有空間。所以，如果你将文字包圍在一幅被隐藏的圖像周圍，那麼，其顯示效果将是文字包圍着一塊空白區域。

這條屬性在編寫語言和使用動态HTML時很有用，比如你可以使某段落或圖像隻在鼠标滑過時才顯示。

單元層次

（z-index）

特性z-index用于堆疊屏幕上的單元。缺省情況下，單元堆疊的順序為它們出現在HTML标記的順序——也就是說，後出現單元堆疊在早出現單元的上面。Z-index特性實際上定義同屬（sibling）單元的堆疊順序以及單元相對父單元的堆疊。按照規範草案，具有正 z-index 值的單元群都堆疊在父單元之上，它們自己的堆疊順序則按其取值的大小來決定（值大的單元在上層）。同樣，具有負z-index值的單元群都堆疊在父單元之下，它們自己的堆疊順序也按取值的大小來定（值大的單元在上層，例如值為-1的單元在值為-2的單元的上面）。

該參數值使用純整數。z-index用于絕對定位或相對定位了的要素。你也可以給圖像設定z-index。（對于Communicator，最好将标簽包在[font]或标簽内，然後将z-index應用到[font]或。）

剪輯絕對定位單元

（clip）

絕對定位單元可以被剪輯——也即剪輯顯示給用戶的區域，隻顯示單元的一部分而把其餘部分作透明處理。對于傳統的基于文本和圖像的網絡頁面，這并不是一個很有用的特征。但若要求多媒體頁面，這是很有用的。如Netscape Communivator 4和Internet Explorer4都支持多媒體頁面，它們通過文檔的腳本接口動态地調整單元周圍的剪輯區，從而實現文本“劃入”和圖像漸顯等顯示特征。

在CSS中，剪輯通過 clip 特性來控制，這一特性隻能用于絕對定位單元，其缺省值為auto，按單元的外邊緣來剪輯單元（實際上等于沒有剪輯）。另外，可通過如下表達式設置剪輯框：

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

其中top、right、bottom和left分别是矩形剪輯框的上邊、右邊、下邊和左邊相對于被剪輯單元左上角的位置。Top、right、bottom和left的值可以為任意絕對或相對長度值（但不能為百分比值），或者是關鍵字auto。取值為auto意味着剪輯區域的各邊放好以後，被剪輯單元中的任何内容都不會超出這個區域。

控制單元溢出

（overflow）

固定絕對或相對定位單元的width和height，很可能會因為指定的區域不能滿足單元實際内容的需要，而造成單元内容溢出。這時可使用overflow來指定浏覽器如何處理溢出：值none（缺省值）允許浏覽器顯示溢出的内容，因此單元可溢出指定的區域。而值clip要求浏覽器在單元底部和右邊剪輯單元内容，這樣，超出指定區域的單元内容将不顯示。值scroll也同樣要求浏覽器在單元底部和右邊剪輯單元内容（同clip），不過，浏覽器應該（如果可能的話）為單元提供滾動條以使用戶能通過滾動來浏覽被剪輯的内容。

布局優勢

一、精簡代碼，減少重構難度

網站使用DIV+CSS布局使代碼很是精簡，相信大多朋友也都略有所聞，css文件可以在網站的任意一個頁面進行調用，而若是使用table表格修改部分頁面卻是顯得很麻煩。要是一個門戶網站的話，需手動改很多頁面，而且看着那些表格也會感覺很亂也很浪費時間，但是使用css+div布局隻需修改css文件中的一個代碼即可。

二、網頁訪問速度

使用了DIV+CSS布局的網頁與Table布局比較，精簡了許多頁面代碼，那麼其浏覽訪問速度自然得以提升，也從而提升了網站的用戶體驗度。

三、SEO優化

采用div-css布局的網站對于搜索引擎很是友好，因此其避免了Table嵌套層次過多而無法被搜索引擎抓取的問題，而且簡潔、結構化的代碼更加有利于突出重點和适合搜索引擎抓取。

四、浏覽器兼容性

若使用table布局網頁，在使用不同浏覽器情況下會發生錯位，而div+css則不會，無論什麼浏覽器，網頁都不會出現變形情況。

最後，需要注意的是，蜘蛛不喜歡一個頁面有太多的css代碼，否則同樣會影響蜘蛛的爬行，影響搜索引擎的收錄，所以采用外部調用的方式調用CSS是非常不錯的方法。而同時，若非必須太多花哨的網站，采用CSS布局，同樣可以到達所想要的效果。如網站導航中的文字顔色變化、下拉菜單等。

div[彙編語言中除法指令] - 差異

在HTML4.01中，div元素的"align"屬性不被贊成使用。

在XHTML1.0 Strict DTD中，div元素的"align"屬性不被支持。

實例

文檔中的一個部分會顯示為綠色：

This is a header

This is a paragraph.

例子解釋

正如您看到的，上面這段HTML模拟了新聞網站的結構。其中的每個div把每條新聞的标題和摘要組合在一起，也就是說，div為文檔添加了額外的結構。同時，由于這些div屬于同一類元素，所以可以使用class="news"對這些 div 進行标識，這麼做不僅為 div 添加了合适的語義，而且便于進一步使用樣式對div進行格式化，可謂一舉兩得。

提示：如需更深入地學習class和id的用法，請閱《W3school 的結構化标記》這一章中div、id和其他幫手這一節。