萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> Crazylight

Crazylight

DIV的屬性

一、常用屬性

1、Height:配置DIV的高度;Width:配置DIV的寬度。

2、margin:用於配置DIV的外延邊距,也就是到父容器的間隔。margin:後頭跟有四個距告辭離為到父容器的上-右-下-左邊的間隔;margin: [top][right][bottom][left]

 可以別離配置:margin-left:到父容器左邊框的間隔;margin-right:到父容器右邊框的間隔;margin-top: 到父容器上邊框的間隔;margin-bottom:到父容器下邊框的間隔。

3、padding:用於配置DIV的內邊距(內如子元素與DIV界線的間隔)。padding:後頭跟有四個距告辭離為到父容器的上-右-下-左邊的間隔;margin: [top][right][bottom][left]:必要留意的是padding配置的間隔不包羅在自己的width和height內(在IE7和FF中),好比一個DIV的width配置了100px,而padding-left配置了50px,那麼這個DIV在頁面上表現的將是150px寬。

4、border:配置DIV的邊框樣式;display:配置表現屬性。其值有block、none;float:配置DIV在頁面上的流向,其值有left(靠左表現)、right(靠右表現)、none;

background:配置DIV的配景樣式;background後可直接跟配景的顏色、配景圖片、平鋪方法等樣式。也可以用以部屬性別離配置。

  background-color:配置配景顏色;background-attachment:配景圖像的附加方法,其值有scroll、fixed; background-image:指定使有的配景圖片;background-repeat:配景圖象的平鋪方法。其值有no-repeat(不服鋪)、repeat(兩個偏向平鋪)、repeat-x(程度偏向平鋪)、repeat-y(垂直偏向平鋪); background-position:在DIV中定位配景位置。其值有top bottom left right的差異組合。也可以以用坐標指定詳細的位置。

5、position:配置DIV的定位方法。position的屬性中有static、fixed、relative、absolute四個屬性。常用relative和absolute。若指定為static時,DIV遵循HTML法則;若指定為relative時,可以用top、left、right、bottom來配置DIV在頁面中的偏移(相對付自身的偏移),可是此時不行行使層;若指定為absolute時,可以用top、left、right、bottom對DIV舉辦絕對定位(對本身最近的父級元素);若指定為fixed時,在IE7與FF中DIV的位置相對付屏屏牢靠穩固,IE6中沒有結果(不知為什麼)。

6、font:指定DIV中文本的樣式,厥後可跟文本的多個樣式。font-family:配置要用的字體名稱;font-weight:指定文本的粗細,其值有bold bolder lighter等;font-size:指定文本的巨細;font-style:指定文本樣式,其值有italic normal oblique等;color:指定文本顏色;text-align:指定文本程度對齊方法,其值有center(居中) left right justify;text-decorator:用於文本的修飾;其值有none underline overline line-through和blink的組合;text-indent:配置文本的縮進;text-transform:配置文本的字母巨細寫。其值有lowercase uppercase capitalize(首字母大寫) none;direction:內容的流向。其值有ltr(從左至右)、rtl(從右至左);line-height:指定文本的行高;Word-spacing:字間距。

7、overflow:內容溢出節制,其值有scroll(始終表現轉動條)、visible(不表現轉動條,但超出部門可見)、auto(內容超出時表現轉動條)、hidden(超出時潛匿內容)。

二、一些非凡結果:

1。

2、cursor:配置DIV上光標的樣式。

3、clip:配置剪輯矩形。clip:rect(top right bottom left);配置上下閣下的間隔,但此時要把position指定為absolute。

4、opacity 透明度 filter:alpha(opacity=value)  eg:filter:alpha(opacity=50);opacity:0.5;

 

posted @

(
copyright © 萬盛學電腦網 all rights reserved