div內的屬性總結

2021-09-25 16:17:44 字數 2508 閱讀 2056

1、style 設定css樣式(擴充套件了解style標籤)

2、align 設定div盒子內的內容居中、居左、居右

3、id 引人外部對應#(井號)選擇符號樣式

4、class 引人外部對應.(句號)選擇符號樣式

5、title 設定div(標題)滑鼠經過時顯示文字(擴充套件了解 title標籤)

color:#f00; //字型顏色

font-size:18px//字型大小n

align:left/center/right //作用是讓物件內的內容居左、居中、居右效果

font-weight:bold //字段粗細 normal/bold/50

title: //滑鼠懸停顯示

divcss5內容

一、常用屬性

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-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、z-index:設定div的層疊順序。用z-index屬性時,position必需要指定為absolute才行。

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;

**:

編輯Div內內容

編輯div內內容 呵呵,僅ie有效 前台 後台 using system using system.data using system.configuration using system.web using system.web.security using system.web.ui using...

DIV屬性詳解

position 決定 div tag 是如何放置的。relative 意思是div的位置是相對於其他 tag 的,而 absolute 是說 div tag 的位置是相對於它所在的視窗。left 相對於視窗左邊的位置 top 相對於視窗上邊的位置 width div tag 的寬度。所有在 div...

div內上下左右距離 div之間的間距怎麼控制

設定div盒子之間間距 top 以上是使用css清除盒子之間距離。接下來為大家介紹設定盒子之間間距。使用css樣式單詞為margin 可進入css margin教程了解詳細使用方法 1 設定物件的上下間距 divcss5 a 設定 divcss5 a 物件上下間距為10px,左右為0 2 設定物件左...