自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

DIV style常用屬性

作者：Nimitz
開發(fā) 前端
DIV標簽有很多值得學習的地方，本文向大家簡單描述一下DIV style常用屬性的用法，常用屬性主要包括Height和Width，margin和Padding等屬性。

本文和大家重點討論一下DIV style常用屬性的用法，常用屬性主要包括Height：設置DIV的高度，Width：設置DIV的寬度，以及margin和Padding等屬性。

DIV style常用屬性

一、常用屬性：

1、Height:設置DIV的高度。

2、Width:設置DIV的寬度。

例：

  1. <divstyledivstyle="width:200px;height:200px;  
  2. background-color:Black;">div> 
  3.  

3、margin:用于設置DIV的外延邊距，也就是到父容器的距離。

例：

  1. 1<divstyledivstyle="background-color:Black;width:500px;height:500px;"> 
  2. 2  
  3. 3<divstyledivstyle="margin:5px10px20px30px;width:200px;  
  4. height:200px;background-color:White;"> 
  5. 4  
  6. 5div> 
  7. 6  
  8. 7div> 
  9.  

說明：margin:后面跟有四個距離分別為到父容器的上-右-下-左邊的距離；可以看例子中的白色DIV到黑色DIV的邊距離效果。還可以分別設置這四個邊的距離，用到的屬性如下：

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

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

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

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

例：

代碼

  1. 1<divstyledivstyle="width:500px;height:500px;background-color:Black;"> 
  2. 2  
  3. 3<divstyledivstyle="margin-left:50px;margin-top:50px;width:200px;height:200px;  
  4. 4  
  5. 5background-color:White;"> 
  6. 6  
  7. 7div> 
  8. 8  
  9. 9div> 
  10. 10  
  11.  

#p#8、padding:用于設置DIV的內(nèi)邊距。

例：

  1. 1<divstyledivstyle="padding:5px10px20px30px;  
  2.  
  3. background-color:Black;width:500px;height:500px;"> 
  4. 2  
  5. 3<divstyledivstyle="width:200px;height:200px;  
  6. background-color:White;">div> 
  7. 4  
  8. 5div> 
  9. 6  
  10.  

說明：padding的格式和margin的格式一樣，可以對照學習?？梢钥春谏獶IV與白色DIV的邊距來體會此屬性的效果。這是還需要注意的是padding設置的距離不包括在本身的width和height內(nèi)(在IE7和FF中)，比如一個DIV的width設置了100px,而padding-left設置了50px,那么這個DIV在頁面上顯示的將是150px寬。也可以用以下四個屬性來分別設置DIV的內(nèi)邊距：

9、padding-left:左內(nèi)邊距。

10、padding-right:右內(nèi)邊距。

11、padding-top;上內(nèi)邊距。

12、padding-bottom:下內(nèi)邊距。

例：

  1. <divstyledivstyle="padding-left:50px;  
  2. padding-top:50px;width:150px;height:150px;  
  3. background-color:Black;"> 
  4. <divstyledivstyle="width:140px;height:140px;  
  5. background-color:White;"> 
  6. div> 
  7. div> 
  8.  
  9.  

13、position:設置DIV的定位方式。

例：

代碼

  1. 1<divstyledivstyle="width:200px;height:200px;background-color:Black;"> 
  2. 2  
  3. 3<divstyledivstyle="position:relative;top:10px;
  4. left:10px;width:140px;height:140px;  
  5. 45background-color:White;"> 
  6. 6  
  7. 7div> 
  8. 8  
  9. 9<divstyledivstyle="position:absolute;top:60px;left:60px;
  10. background-color:Silver;  width:100px;height:100px;"> 
  11. 12  
  12. 13div> 
  13. 14  
  14. 15<divstyledivstyle="position:fixed;top:210px;
  15. left:210px;background-color:Navy;  
  16. 16  
  17. 17width:100px;height:100px;"> 
  18. 18  
  19. 19div> 
  20. 20  
  21. 21div> 
  22. 22  
  23. 23<divstyledivstyle="position:absolute;top:50px;left:50px;  
  24.  
  25. background-color:Blue;  
  26. 25width:100px;height:100px;"> 
  27. 26  
  28. 27div> 
  29. 28  
  30. 29<divstyledivstyle="position:fixed;top:200px;left:200px;  
  31.  
  32. background-color:Navy;  
  33. 30  
  34. 31width:100px;height:100px;"> 
  35. 32  
  36. 33div> 
  37. 34  
  38. 35<divstyledivstyle="position:static;top:200px;left:100px;  
  39.  
  40. background-color:Yellow;  
  41. 36  
  42. 37width:100px;height:100px;"> 
  43. 38  
  44. 39div> 
  45.  

 說明：position的屬性中有static、fixed、relative、absolute四個屬性。常用relative和absolute。若指定為static時，DIV遵循HTML規(guī)則；若指定為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. 1<divstyledivstyle="position:absolute;top:50px;left:50px;  
  2.  
  3. width:100px;height:100px;background-color:black;"> 
  4. 2  
  5. 3div>45<divstyledivstyle="position:absolute;top:60px;l  
  6.  
  7. eft:60px;width:100px;height:100px;  
  8. 6  
  9. 7background-color:Blue;z-index:1;"> 
  10. 8  
  11. 9div> 
  12. 10  
  13. 11<divstyledivstyle="position:absolute;top:70px;left:70px;  
  14.  
  15. background-color:Silver;width:100px;height:100px;"> 
  16. 12  
  17. 13div> 
  18. 14  
  19.  

說明：上例效果中如果不設z-index屬性藍色DIV應該在中間，而現(xiàn)在的效果藍色在最上面了。還要說明的是用z-index屬性時，position必需要指定為absolute才行。#p#

19、font:指定DIV中文本的樣式，其后可跟文本的多個樣式。

例： 

  1. <divstyledivstyle="font:bold14px宋體;background-color:Yellow"> 
  2.  
  3. 明月幾時有？把酒問青天。不知天上宮闕、今夕是何年？我欲乘風歸去，  
  4. 惟恐瓊樓玉宇，高處不勝寒．起舞弄清影，何似在人間？　　  
  5.  
  6. 轉(zhuǎn)朱閣，低綺戶，照無眠。不應有恨、何事長向別時圓？人有悲歡離合，  
  7. 月有陰晴圓缺，此事古難全。但愿人長久，千里共蟬娟。  
  8.  
  9. div> 
  10.  

 

說明：font后可以跟文本樣式的多個屬性，如字體粗細、字體大小、何種字體等等。還可以用以下幾個屬性分別加以設置：

20、font-family:設置要用的字體名稱；

21、font-weight:指定文本的粗細,其值有boldbolderlighter等。

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

23、font-style:指定文本樣式，其值有italicnormaloblique等。

24、color:指定文本顏色。

25、text-align:指定文本水平對齊方式，其值有center(居中)leftrightjustify。

26、text-decorator:用于文本的修飾。其值有noneunderlineoverlineline-through和blink的組合。

(在IE中無閃爍效果，F(xiàn)F中有效果。期待高手指點，)

27、text-indent:設置文本的縮進。

28、text-transform:設置文本的字母大小寫。其值有l(wèi)owercaseuppercasecapitalize(首字母大寫)none。

例：

代碼
 

  1. <divstyledivstyle="text-align:left;text-decoration:line-throughblink;text-indent:30px;  
  2.  
  3. text-transform:capitalize;color:Blue;font:bolditalic14px宋體;background-color:Yellow"> 
  4.  
  5. 明月幾時有？把酒問青天。不知天上宮闕、今夕是何年？我欲乘風歸去，惟恐瓊樓玉宇，高處不勝寒．起舞弄清影，何似在人間？　　  
  6. 轉(zhuǎn)朱閣，低綺戶，照無眠。不應有恨、何事長向別時圓？人有悲歡離合，  
  7. 月有陰晴圓缺，此事古難全。但愿人長久，千里共蟬娟。  
  8.  
  9. abcdefghijklmnopqRSTUVWXYZ  
  10.  
  11. div> 
  12.  
  13.  

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

30、direction:內(nèi)容的流向。其值有l(wèi)tr(從左至右)、rtl(從右至左)。

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

32、Word-spacing:字間距。

例：

代碼 

  1. 1<divstyledivstyle="font:16px宋體;width:600px;height:200px;word-spacing:5px;line-height:20px;  
  2. 2  
  3. 3direction:rtl;overflow:auto;background-color:Yellow"> 
  4. 明月幾時有？把酒問青天。不知天上宮闕、今夕是何年？我欲乘風歸去，  
  5. 惟恐瓊樓玉宇，高處不勝寒．起舞弄清影，何似在人間？　　  
  6. 轉(zhuǎn)朱閣，低綺戶，照無眠。不應有恨、何事長向別時圓？人有悲歡離合，  
  7. 月有陰晴圓缺，此事古難全。但愿人長久，千里共蟬娟。<br/> 
  8.  
  9. 7明月幾時有？把酒問青天。不知天上宮闕、今夕是何年？我欲乘風歸去，惟恐瓊樓玉宇，高處不勝寒．起舞弄清影，何似在人間？　　  
  10. 轉(zhuǎn)朱閣，低綺戶，照無眠。不應有恨、何事長向別時圓？人有悲歡離合，  
  11. 月有陰晴圓缺，此事古難全。但愿人長久，千里共蟬娟。  
  12. <br/> 
  13. 8  
  14. 9明月幾時有？把酒問青天。不知天上宮闕、今夕是何年？我欲乘風歸去，惟恐瓊樓玉宇，高處不勝寒．起舞弄清影，何似在人間？　　  
  15. 轉(zhuǎn)朱閣，低綺戶，照無眠。不應有恨、何事長向別時圓？人有悲歡離合，  
  16. 月有陰晴圓缺，此事古難全。但愿人長久，千里共蟬娟。<br/> 
  17. 10  
  18. 11明月幾時有？把酒問青天。不知天上宮闕、今夕是何年？我欲乘風歸去，惟恐瓊樓玉宇，高處不勝寒．起舞弄清影，何似在人間？　　  
  19. 轉(zhuǎn)朱閣，低綺戶，照無眠。不應有恨、何事長向別時圓？人有悲歡離合，  
  20. 月有陰晴圓缺，此事古難全。但愿人長久，千里共蟬娟。  
  21. 12  
  22. 13div> 
  23.  

 #p#33、border:設置DIV的邊框樣式。

例： 

  1. <divstyledivstyle="border:dotted2pxblack;background-color:Yellow;width:100px;height:100px;">div> 
  2.  

說明：border后跟邊框的樣式、寬度、顏色等屬性。還可以用以下屬性分別設置。

34、border-width:設置邊框的寬度。

35、border-color：設置邊框的顏色。

36、border-style:設置邊框的樣式。

例：

代碼 

  1. 1<labelstylelabelstyle="font-size:14px;">選擇樣式：label> 
  2. 2  
  3. 3<selectidselectid="bstyle"onchange="document.getElementById('tdd').style.  
  4. 4  
  5. 5borderStyle=this.options[this.selectedIndex].text;"> 
  6.  
  7. 6  
  8.  
  9. 7<optionselectedoptionselected="selected">noneoption> 
  10. 8  
  11. 9<option>dashedoption> 
  12. 10  
  13. 11<option>dottedoption> 
  14. 12  
  15. 13<option>grooveoption> 
  16. 14  
  17. 15<option>hiddenoption> 
  18. 16  
  19. 17<option>insetoption> 
  20. 18  
  21. 19<option>outsetoption> 
  22. 20  
  23. 21<option>ridgeoption> 
  24. 22  
  25. 23<option>doubleoption>2425<option>solidoption> 
  26. 26  
  27. 27select> 
  28. 28  
  29. 29<dividdivid="tdd"style="border-style:none;  
  30. border-width:5px;border-color:Black;width:100px;  
  31. height:100px;background-color:Yellow;"> 
  32. 30  
  33. 31div> 
  34.  
  35.  

 說明：border是對四個邊框同時進行設置。也可以單獨對某一邊或幾個邊進行設置，此時用以下屬性：

border-top:設置上邊框樣式。

37、border-bottom:設置下邊框樣式。

38、border-left:設置左邊框樣式。

39、border-right:設置右邊框樣式。

說明：某一邊框的某一樣式也可單獨設置，以上邊框為例可以用：border-top-style、border-top-width、border-top-color來分別設置，由于使用各border相同，所以不在舉例說明。

40、display:設置顯示屬性。其值有block、none。

41、float:設置DIV在頁面上的流向，其值有l(wèi)eft(靠左顯示)、right(靠右顯示)、none。

50、background:設置DIV的背景樣式。

例： 

  1. <divstyledivstyle="width:600px;height:200px;background:yellowurl(mw3.jpg)repeatscroll;  
  2.  
  3. overflow:auto"> 
  4.  
  5. <divstyledivstyle="width:2px;height:1000px;"> 
  6.  
  7. div> 
  8.  
  9. div> 

說明：background后可直接跟背景的顏色、背景圖片、平鋪方式等樣式。也可以用以下屬性分別設置。

51、background-color:設置背景顏色。

52、background-attachment:背景圖像的附加方式，其值有scroll、fixed。

53、background-image:指定使有的背景圖片。

54、background-repeat:背景圖象的平鋪方式。其值有no-repeat(不平鋪)、repeat(兩個方向平鋪)、

repeat-x(水平方向平鋪)、repeat-y(垂直方向平鋪)。

55、background-position:在DIV中定位背景位置。其值有topbottomleftright的不同組合。也可以以用坐標

指定具體的位置。

例： 

  1. <divstyledivstyle="background-color:Yellow;  
  2. background-image:url(mw3.jpg);  
  3. background-position:rightbottom;  
  4. background-attachment:scroll;width:600px;height:200px;"> 
  5. div> 
  6.  

【編輯推薦】

  1. DIV CSS隱藏內(nèi)容樣式方法詳解
  2. IE6.0對padding的解讀分析
  3. 揭露CSS中margins折疊現(xiàn)象內(nèi)幕
  4. 七大CSS選擇符用法說明
  5. 技術分享 如何使用CSS控制超鏈接文字樣式

 

責任編輯：佚名 來源： cnblogs.com
DIVstyle
相關推薦

2010-08-17 10:00:17

DIV樣式

2010-08-24 14:10:44

div style

2010-08-17 09:03:16

Html DIV事件屬

2010-09-09 13:25:52

DIVScroll

2010-08-16 16:27:42

DIV布局屬性

2010-09-14 15:04:42

list-styleCSS

2015-03-03 15:59:25

Android開發(fā)屬性

2010-11-16 15:23:28

Oracle游標

2010-08-17 09:31:08

DIV布局

2010-09-14 13:11:43

DIVdisplayvisibility

2010-09-09 09:16:27

JavaScriptdiv

2010-08-25 13:48:51

CSSlist-style-

2015-03-03 09:19:12

UIScrollVie

2010-09-13 15:32:38

DIV背景

2010-09-10 15:01:26

CSS+DIV排版

2010-08-17 10:31:10

DIV布局屬性

2010-08-24 10:01:05

DIV

2010-08-23 15:51:54

paddingmargin

2010-08-17 09:20:28

DIV布局

2010-09-15 14:00:06

position屬性DIV
點贊
收藏

51CTO技術棧公眾號