div常用屬性和例子

2021-03-03 20:31:36 字數 3476 閱讀 3352

一、常用屬性:

1、height:設定div的高度。

2、width:設定div的寬度。

例:3、margin:用於設定div的外延邊距,也就是到父容器的距離。

例:12 34 56 7說明:margin:後面跟有四個距離分別為到父容器的上-右-下-左邊的距離;可以看例子中的白色div到黑色div的邊距離效果。還可以分別設定這四個邊的距離,用到的屬性如下:

4、margin-left:到父容器左邊框的距離。

5、margin-right:到父容器右邊框的距離。

6、margin-top:到父容器上邊框的距離。

7、margin-bottom:到父容器下邊框的距離。

例:**

1 2

36 7

8 9

10 8、padding:用於設定div的內邊距。

例:12 34 56 說明:padding的格式和margin的格式一樣,可以對照學習。可以看黑色div與白色div的邊距來體會此屬性的效果。

這是還需要注意的是padding設定的距離不包括在本身的width和height內(在ie7和ff中),比如乙個div的width設定了100px,而padding-left設定了50px,那麼這個div在頁面上顯示的將是150px寬。也可以用以下四個屬性來分別設定div的內邊距:

9、padding-left:左內邊距。

10、padding-right:右內邊距。

11、padding-top;上內邊距。

12、padding-bottom:下內邊距。

例:12 34 56 78 13、position:設定div的定位方式。

例:**

1 2

36 7

8 9

12 13

14 15

18 19

20 21

22 23

26 27

28 29

32 33

34 35

38 39

說明: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中沒有效果(期待高手指點原因);

14、left:設定物件相對於文件層次中最近乙個定位物件的左邊界的位置。

15、top:設定物件相對於文件層次中最近乙個定位物件的上邊界的位置。

16、right:設定物件相對於文件層次中最近乙個定位物件的右邊界的位置。

17、bottom:設定物件相對於文件層次中最近乙個定位物件的下邊界的位置。

18、z-index:設定div的層疊順序。

例:**

1 2

3 4

5 8

9 10

11 12

13 14

說明:上例效果中如果不設z-index屬性藍色div應該在中間,而現在的效果藍色在最上面了。還要說明的是用z-index屬性時,position必需要指定為absolute才行。

19、font:指定div中文字的樣式,其後可跟文字的多個樣式。

例:明月幾時有?把酒問青天。

不知天上宮闕、今夕是何年?我欲乘風歸去,惟恐瓊樓玉宇,高處不勝寒.起舞弄清影,何似在人間?  轉朱閣,低綺戶,照無眠。

不應有恨、何事長向別時圓?人有悲歡離合,月有陰晴圓缺,此事古難全。但願人長久,千里共蟬娟。

說明:font後可以跟文字樣式的多個屬性,如字型粗細、字型大小、何種字型等等。還可以用以下幾個屬性分別加以設定:

20、font-family:設定要用的字型名稱;

21、font-weight:指定文字的粗細,其值有bold bolder lighter等。

22、font-size:指定文字的大小。

23、font-style:指定文字樣式,其值有italic normal oblique等。

24、color:指定文字顏色。

25、text-align:指定文字水平對齊方式,其值有center(居中) left right justify。

26、text-decorator:用於文字的修飾。其值有none underline overline line-through和blink的組合。

(在ie中無閃爍效果,ff中有效果。期待高手指點,)

27、text-indent:設定文字的縮排。

28、text-transform:設定文字的字母大小寫。其值有lowercase uppercase capitalize(首字母大寫) none。

例:**

1 4

5 明月幾時有?把酒問青天。不知天上宮闕、今夕是何年?

我欲乘風歸去,惟恐瓊樓玉宇,高處不勝寒.起舞弄清影,何似在人間?  轉朱閣,低綺戶,照無眠。不應有恨、何事長向別時圓?

人有悲歡離合,月有陰晴圓缺,此事古難全。但願人長久,千里共蟬娟。

6 7 abcdefghijklmnopqrstuvwxyz

8 9

10 29、overflow:內容溢位控制,其值有scroll(始終顯示滾動條)、visible(不顯示滾動條,但超出部分可見)、

auto(內容超出時顯示滾動條)、hidden(超出時隱藏內容)。

30、direction:內容的流向。其值有ltr(從左至右)、rtl(從右至左)。

31、line-height:指定文字的行高。

32、word-spacing:字間距。

例:**

1 4

5 明月幾時有?把酒問青天。不知天上宮闕、今夕是何年?

我欲乘風歸去,惟恐瓊樓玉宇,高處不勝寒.起舞弄清影,何似在人間?  轉朱閣,低綺戶,照無眠。不應有恨、何事長向別時圓?

人有悲歡離合,月有陰晴圓缺,此事古難全。但願人長久,千里共蟬娟。

6 7 明月幾時有?把酒問青天。不知天上宮闕、今夕是何年?

我欲乘風歸去,惟恐瓊樓玉宇,高處不勝寒.起舞弄清影,何似在人間?  轉朱閣,低綺戶,照無眠。不應有恨、何事長向別時圓?

人有悲歡離合,月有陰晴圓缺,此事古難全。但願人長久,千里共蟬娟。

8 9 明月幾時有?把酒問青天。不知天上宮闕、今夕是何年?

我欲乘風歸去,惟恐瓊樓玉宇,高處不勝寒.起舞弄清影,何似在人間?  轉朱閣,低綺戶,照無眠。不應有恨、何事長向別時圓?

人有悲歡離合,月有陰晴圓缺,此事古難全。但願人長久,千里共蟬娟。

10 11 明月幾時有?把酒問青天。不知天上宮闕、今夕是何年?

我欲乘風歸去,惟恐瓊樓玉宇,高處不勝寒.起舞弄清影,何似在人間?  轉朱閣,低綺戶,照無眠。不應有恨、何事長向別時圓?

人有悲歡離合,月有陰晴圓缺,此事古難全。但願人長久,千里共蟬娟。

12 13

典型的定義div例子

css布局與傳統 table 布局最大的區別在於 原來的定位都是採用 通過 的間距或者用無色透明的gif 來控制文布局版塊的間距 而現在則採用層 div 來定位,通過層的margin,padding,border等屬性來控制版塊的間距。1.定義div 分析乙個典型的定義div例子 sample 說明...

javascript常用屬性和方法

align left,center,right align ab iddle align middle 垂直居中 vertical align 垂直劇中img valign 設定或返回單元格內 資料 的垂直排列方式。top middle bottom baseline size widthhight...

組織元素 span和div

span和div元素用於組織和結構化文件,並經常聯合class和id屬性一起使用。在這一課中,我們將進一步 span和div的用法,因為這兩個html元素對於css是很重要的。用span組織元素 用div組織元素 用span組織元素 span元素可以說是一種中性元素,因為它不對文件本身新增任何東西。...