本篇文章為大家展示了DIV樣式中常用屬性用法是怎樣的，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

十年的開化網站建設經驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。營銷型網站的優(yōu)勢是能夠根據用戶設備顯示端的尺寸不同，自動調整開化建站的顯示方式，使網站能夠適用不同顯示終端，在瀏覽器中調整網站的寬度，無論在任何一種瀏覽器上瀏覽網站，都能展現優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯建站從事“開化網站設計”,“開化網站推廣”以來，每個客戶項目都認真落實執(zhí)行。

DIV樣式匯總

最近在學習JavaScript，在做到個要控制控件樣式的例子時，突然有了把常用樣式匯總一下的想法，于是乎就寫了以下內容，以下是以div為例來匯總的，希望對大家有些幫助。

一、DIV樣式中常用屬性：

1、Height:設置DIV的高度。

2、Width:設置DIV的寬度。

例：

Code   div>

3、margin:此DIV樣式中常用屬性用于設置DIV的外延邊距，也就是到父容器的距離。

例：

Code

  div> div>

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

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

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

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

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

例：

Code

  div> div>

8、padding:此DIV樣式中常用屬性用于設置DIV的內邊距。

例：

Code

 div> div>

說明：padding的格式和margin的格式一樣，可以對照學習?？梢钥春谏獶IV與白色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:下內邊距。

例：

Code

  div> div>

13、position:此DIV樣式中常用屬性設置DIV的定位方式。

例：

Code

  div>  div>  div> div>  div>  div>  div>

說明：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的層疊順序。

例：

Code

 div>  div>  div>

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

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

例：

Code

 明月幾時有？把酒問青天。不知天上宮闕、今夕是何年？我欲乘風歸去，惟恐瓊樓玉宇，高處不勝寒．起舞弄清影，何似在人間？　   　轉朱閣，低綺戶，照無眠。不應有恨、何事長向別時圓？人有悲歡離合，月有陰晴圓缺，此事古難全。但愿人長久，千里共蟬娟。  div>

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

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

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

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

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

24、color:此DIV樣式中常用屬性指定文本顏色。

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

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

(在IE中無閃爍效果，FF中有效果。期待高手指點，)

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

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

例：

Code

 明月幾時有？把酒問青天。不知天上宮闕、今夕是何年？我欲乘風歸去，惟恐瓊樓玉宇，高處不勝寒．起舞弄清影，何似在人間？　   　轉朱閣，低綺戶，照無眠。不應有恨、何事長向別時圓？人有悲歡離合，月有陰晴圓缺，此事古難全。但愿人長久，千里共蟬娟。  abcdefghijklmnopqRSTUVWXYZ  div>

29、overflow:此DIV樣式中常用屬性是指內容溢出控制，其值有scroll(始終顯示滾動條)、visible(不顯示滾動條，但超出部分可見)、auto(內容超出時顯示滾動條)、hidden(超出時隱藏內容)。

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

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

32、Word-spacing:字間距。

例：

Code

 明月幾時有？把酒問青天。不知天上宮闕、今夕是何年？我欲乘風歸去，惟恐瓊樓玉宇，高處不勝寒．起舞弄清影，何似在人間？   轉朱閣，低綺戶，照無眠。不應有恨、何事長向別時圓？人有悲歡離合，月有陰晴圓缺，此事古難全。但愿人長久，千里共蟬娟。   
  明月幾時有？把酒問青天。不知天上宮闕、今夕是何年？我欲乘風歸去，惟恐瓊樓玉宇，高處不勝寒．起舞弄清影，何似在人間？　   　轉朱閣，低綺戶，照無眠。不應有恨、何事長向別時圓？人有悲歡離合，月有陰晴圓缺，此事古難全。但愿人長久，千里共蟬娟。  div>

33、border:此DIV樣式中常用屬性設置DIV的邊框樣式。

例：

Code

 div>

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

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

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

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

例：

Code

選擇樣式：label>  noneoption> dashedoption> dottedoption> grooveoption> hiddenoption> insetoption> outsetoption> ridgeoption> doubleoption> solidoption> select>  div>

說明：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樣式中常用屬性設置DIV在頁面上的流向，其值有l(wèi)eft(靠左顯示)、right(靠右顯示)、none。

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

例：

Code

 div> div>

說明：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的不同組合。也可以以用坐標

指定具體的位置。

例：

Code

 div>

上述內容就是DIV樣式中常用屬性用法是怎樣的，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創(chuàng)新互聯行業(yè)資訊頻道。