上節(jié)我們介紹了部分DIV布局屬性，這一節(jié)接著向大家介紹，首先看一下絕對(duì)位置屬性，絕對(duì)位置屬性有四個(gè)屬性：top、right、bottom和left，屬性值為長(zhǎng)度單位或百分?jǐn)?shù)。

DIV絕對(duì)位置屬性：

絕對(duì)位置屬性有四個(gè)屬性：top、right、bottom和left，屬性值為長(zhǎng)度單位或百分?jǐn)?shù)：

◆屬性名稱(chēng):'top'、'right'、'bottom'、'left'

屬性值:<length><percentage>auto
初始值:none
適合對(duì)象:所有元素
是否繼承:no
百分比備注:被禁止
利用以上屬性，用戶(hù)就可以精確定義元素的位置，如：
 

<PstylePstyle="position:relative;margin-right:10px;left:10px;"> 
Iusedtworedhyphenstoserveasachangebar.They  
will"float"totheleftofthelinecontainingTHIS  
<SPANstyleSPANstyle="position:absolute;top:auto;left:0px;  
color:red;">--</SPAN> 
word.</P> 

◆DIV布局之z-index屬性：

在CSS中允許元素的重疊顯示，這樣就有一個(gè)顯示順序的問(wèn)題，z-index屬性描述了元素的前后位置，如果把電腦屏幕看作X-Y平面的話，那么Z軸就是垂直于屏幕的，z-index使用整數(shù)表示元素的前后位置，數(shù)值越大，就會(huì)顯示在相對(duì)靠前的位置，并且CSS同意在z-index中使用負(fù)數(shù)。
屬性名稱(chēng):'z-index'
屬性值:auto<integer>
初始值:auto
適合對(duì)象:使用position屬性的元素
是否繼承:no
百分比備注:被禁止

◆DIV布局之width屬性：

規(guī)定BOX的width屬性，可以使BOX的寬度不依靠它所包含的內(nèi)容的多少：
屬性名稱(chēng):'width'
屬性值:<length><percentage>auto
初始值:auto
適合對(duì)象:塊元素
是否繼承:no
百分比備注:根據(jù)父元素的width而定

◆在CSS中還提供了min-width和max-width屬性，使得BOX的寬度在最小寬度和***寬度之間。

屬性名稱(chēng):'min-width'

屬性值:<length><percentage>
初始值:0
適合對(duì)象:all
是否繼承:no
百分比備注:根據(jù)父元素的width而定

屬性名稱(chēng):'max-width'

屬性值:<length><percentage>
初始值:100%
適合對(duì)象:all
是否繼承:no
百分比備注:根據(jù)父元素的width而定#p#

◆DIV布局之height屬性：

相同的BOX還有height屬性來(lái)控制本身的高度：

屬性名稱(chēng):'height'

屬性值:<length><percentage>auto
初始值:auto
適合對(duì)象:塊元素
是否繼承:no
百分比備注:根據(jù)父元素的height而定

◆在CSS中還提供了min-height和max-height屬性，使得BOX的高度在最小高度和***高度之間。

屬性名稱(chēng):'min-height'

屬性值:<length><percentage>
初始值:0
適合對(duì)象:all
是否繼承:no
百分比備注:根據(jù)父元素的height而定
屬性名稱(chēng):'max-height'
屬性值:<length><percentage>
初始值:100%
適合對(duì)象:all
是否繼承:no
百分比備注:根據(jù)父元素的height而定

◆DIV布局之overflow屬性：

在規(guī)定元素的寬度和高度時(shí)，如果元素的面積不足以顯示全部?jī)?nèi)容的話就要用到overflow屬性：

屬性名稱(chēng):'overflow'

屬性值:visiblehiddenscrollauto
初始值:visible
適合對(duì)象:元素的position屬性
是否繼承:no
百分比備注:被禁止
屬性值含義如下：
visible：擴(kuò)大面積以顯示所有內(nèi)容。
hidden：隱藏超出范圍的內(nèi)容。
scroll：在元素的右邊顯示一個(gè)滾動(dòng)條。
auto：當(dāng)內(nèi)容超出元素面積時(shí)，顯示滾動(dòng)條。

◆DIV布局之clip屬性：

CSS還提供了一種clip屬性，可以把元素區(qū)域剪切成各種形狀，但目前提供的只有方形一種：

屬性名稱(chēng):'clip'

屬性值:<shape>auto
初始值:auto
適合元素:元素的position屬性被設(shè)為absolute
是否繼承:no
百分比備注:被禁止
<shape>值為rect(toprightbottomleft)。#p#

◆DIV布局之line-height和vertical-align屬性：

line-height屬性可以規(guī)定元素內(nèi)部的行間距，使用長(zhǎng)度單位或百分?jǐn)?shù)：

屬性名稱(chēng):'line-height'

屬性值:normal<number><length><percentage>
初始值:normal
適合對(duì)象:所有元素
是否繼承:yes
百分比備注:根據(jù)元素的字體大小而定
例如下面的例子，雖然表達(dá)方式不同，但結(jié)果一樣：
 

DIV{line-height:1.2;font-size:10pt}  
DIV{line-height:1.2em;font-size:10pt}  
DIV{line-height:120%;font-size:10pt} 

◆DIV布局之vertical-align屬性決定元素在垂直位置的顯示：

屬性名稱(chēng):'vertical-align'

屬性值:baselinesubsupertoptext-topmiddlebottomtext-bottom<percentage><length>
初始值:baseline
適合對(duì)象:inlineelements
適合繼承:no
百分比備注:根據(jù)元素的line-height屬性而定
屬性值含義如下：
baseline：與元素的基線對(duì)齊。
middle：與元素中部對(duì)齊。
sub：字下沉。
super：字上升。
text-top：文本頂部對(duì)齊。
text-bottom：文本底部對(duì)齊。
Top：和本行位置***元素對(duì)齊。
Bottom：和本行位置***元素對(duì)齊。

◆DIV布局之Visibility屬性:

該屬性用于控制元素的顯示或隱藏：
屬性名稱(chēng):'visibility'
屬性值:inheritvisiblehidden
初始值:inherit
適合對(duì)象:所有元素
是否繼承:如果該值為inherit，則繼承父元素屬性
百分比備注:被禁止
 

【編輯推薦】

1. 解析DIV布局之四大屬性用法
2. DIV布局屬性用法詳解
3. 深入學(xué)習(xí)DIV+CSS之絕對(duì)定位和相對(duì)定位用法
4. Div+CSS布局入門(mén)之寫(xiě)入整體層結(jié)構(gòu)與CSS
5. DIV+CSS開(kāi)發(fā)過(guò)程中影響SEO的制作細(xì)節(jié)