1. 程式人生 > >DIV的常用屬性

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 leftright的不同組合。也可以以用座標指定具體的位置。

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:指定文字的粗細,其值有boldbolder lighter等;font-size:指定文字的大小;font-style:指定文字樣式,其值有italicnormal oblique等;color:指定文字顏色;text-align:指定文字水平對齊方式,其值有center(居中)left right justify;text-decorator:用於文字的修飾;其值有none underlineoverlineline-through和blink的組合;text-indent:設定文字的縮排;text-transform:設定文字的字母大小寫。其值有lowercaseuppercase capitalize(首字母大寫)none;direction:內容的流向。其值有ltr(從左至右)、rtl(從右至左);line-height:指定文字的行高;Word-spacing:字間距。

7、overflow:內容溢位控制,其值有scroll(始終顯示滾動條)、visible(不顯示滾動條,但超出部分可見)、auto(內容超出時顯示滾動條)、hidden(超出時隱藏內容)。

二、一些特殊效果:

1、z-index:設定DIV的層疊順序。用z-index屬性時,position必需要指定為absolute才行。

2、cursor:設定DIV上游標的樣式。

3、clip:設定剪輯矩形。clip:rect(top right bottomleft);設定上下左右的距離,但此時要把position指定為absolute。

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