DIV屬性詳解

2021-05-18 02:26:49 字數 3466 閱讀 8288

position 決定 div tag 是如何放置的。「relative」意思是div的位置是相對於其他 tag 的,而「absolute」是說 div tag 的位置是相對於它所在的視窗。

left 相對於視窗左邊的位置

top 相對於視窗上邊的位置

width div tag 的寬度。所有在 div 裡的文字或html都在裡面。

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

color(字型顏色):色彩**;

font-size(字型大小):數值;

line-height(行高):數值;

border(邊框):寬度、型別和顏色,型別主要支援以下幾種:none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset;

font-weight(字型粗細):normal、bold、bolder、lighter;

font-family(字型型別):arial、tahoma、verdana、仿宋_gb2312、黑體、楷體_gb2312、隸書、宋體、幼圓

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 的背景圖象

filter:chroma(color=轉換成透明的顏色)(chroma過濾器):色彩**,該顏色將轉換成透明效果;

word-break(斷字):normal(預設,正常斷字)、keep-all(嚴格不斷字)、break-all(嚴格斷字);

direction(文字方向):ltr(預設,從左向右)、rtl(從右向左);

padding-left:層中的內容距離層左邊框的距離;padding-right:層中的內容距離層左邊框的距離;padding-top:層中的內容距離層頂部邊框的距離;padding-bottom:層中的內容距離層底部邊框的距離。

絕對定位和相對定位 (position)

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

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

div

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

寬度屬性只適用於絕對定位的要素。你可以使用我們學過的任何一種長度單位,或使用比例值設定寬度,比例值指相對於母體要素的比例。ie 4中,這項屬性還可用於圖象。你可以通過寬度設定人為地拉寬或壓縮略圖象。

高度:理論上講,高度應該和寬度的設定類似,只不過是在垂直方向上:

div

這裡我用了「理論上講」,因為有些瀏覽器不支援高度屬性。

可視性:利用css,你可以隱藏要素,使其在頁面上看不見。這條屬性對於定位了的和未定位的要素都適用。

h4 選項:

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,最好將標籤包在或 標籤內,然後將z-index應用到或 。)

剪輯絕對定位單元 (clip)

絕對定位單元可以被剪輯——也即剪輯顯示給使用者的區域,只顯示單元的一部分而把其餘部分作透明處理。對於傳統的基於文字和影象的網路頁面,這並不是乙個很有用的特徵。但若要求多**頁面,這是很有用的。如 netscape communivator 4 和 internet explorer 4 都支援多**頁面,它們通過文件的指令碼介面動態地調整單元周圍的剪輯區,從而實線文字「劃入」和影象漸顯等顯示特徵。

在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內的屬性總結

1 style 設定css樣式 擴充套件了解style標籤 2 align 設定div盒子內的內容居中 居左 居右 3 id 引人外部對應 井號 選擇符號樣式 4 class 引人外部對應.句號 選擇符號樣式 5 title 設定div 標題 滑鼠經過時顯示文字 擴充套件了解 title標籤 col...

js控制div及相關屬性

動態建立 div vardiv document.createelement div 設定div 屬性及樣式等 div.title this is a new div.div.class newdivclass div.innerhtml test create a div element div....

js 獲取div的name屬性

div標籤沒有value和name屬性,但是我們給div增加乙個value或者name,這個也是可以拿到的 一般情況 我們通常用var value document.getelementbyid id值 value 這種方法來獲取value的值。但是我們通過js直接得到div的value屬性是得不到...