| 一、常用屬性： 1、Height:設置DIV的高度。
2、Width:設置DIV的寬度。 例：
<div style="width:200px;height:200px;"></div>
3、margin:用於設置DIV的外延邊距，也就是到父容器的距離。 例：點擊查看效果：
<div style="width:300px;height:300px;">
<div style="margin:5px 10px 20px 30px;width:200px; height:200px;">
</div>
</div> 說明：margin:后面跟有四個距離分別為到父容器的上-右-下-左邊的距離；可以看例子中的白色DIV到黑色DIV的邊距離效果。還可以分別設置這四個邊的距離，用到的屬性如下： 4、margin-left:到父容器左邊框的距離。
5、margin-right:到父容器右邊框的距離。
6、margin-top: 到父容器上邊框的距離。
7、margin-bottom:到父容器下邊框的距離。 在標准的瀏覽器中，box模型首先確定的是content的寬度和高度，而margin和padding不會影響content的寬度和高度——如果增加magin和padding尺寸后，content尺寸不變而總的box尺寸會增大。
在IE中卻相反,增加margin和padding的尺寸，則會減小content的尺寸，而box尺寸不變。微軟遵循的邏輯是現實世界的框架不變，填充變大，則里面的圖片越小。
margin疊加：
這是一個難點(行內框、浮動框、絕對定位框margin不會疊加), 簡單的描述概念就是：兩個垂直的margin相遇，則會合並成一個margin，這個margin的高度是前兩個高度值大的。 (1)、元素的頂邊界與前面元素的底邊界發生疊加 
(2)、當一個元素包含在另一個元素中時（假設沒有填充或邊框將邊界分隔開），它們的頂和/或底邊界也發生疊加，見圖！注意這里水平的margin沒有疊加
(3)、如果這個邊界碰到另一個元素的邊界，它還會發生疊加，見圖：
 8、padding:用於設置DIV的內邊距。 例：點擊查看效果：
<div style="padding:5px 10px 20px 30px;width:300px;height:300px;">
<div style="width:200px; height:200px;"></div>
</div>
說明：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: 下內邊距。
<div style="padding-left:50px;padding-top:50px;width:150px;height:150px;">
<div style="width:140px; height:140px;">
</div>
</div> 13、position:設置DIV的定位方式。 例：點擊看效果。 <html>
<head>
<meta charset="gbk">
<title>div樣式2</title>
</head>
<body>
<div style="width:200px; height:200px;">
<div style="position:relative; top:10px;left:10px; width:140px; height:140px;"></div>
<div style="position:absolute; top:60px;left:60px; width:100px;height:100px;"></div>
<div style="position:fixed; top:210px;left:210px; width:100px;height:100px;"></div>
</div> <div style="position:absolute; top:50px;left:50px; width:100px;height:100px;"></div>
<div style="position:fixed; top:200px;left:200px; width:100px;height:100px;"> </div>
<div style="position:static; top:200px;left:100px; width:100px;height:100px;"></div>
</body>
</html>
說明：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的層疊順序。 例：點擊看效果。
<html><head><meta charset="gbk">
<title>div樣式</title>
</head>
<body>
<div style="position:absolute; top:50px;left:50px; width:100px; height:100px;">
</div>
<div style="position:absolute; top:60px;left:60px; width:100px; height:100px;z-index:1;">
</div>
<div style="position:absolute; top:70px;left:70px; width:100px;height:100px;">
</div>
</body>
</html>
說明：上例效果中如果不設z-index屬性藍色DIV應該在中間，而現在的效果藍色在最上面了。還要說明的是用z-index屬性時，position必需要指定為absolute才行。 19、font:指定DIV中文本的樣式，其后可跟文本的多個樣式。 例：
<div style=" font:bold 14px 宋體;background-color:Yellow">
明月幾時有？把酒問青天。不知天上宮闕、今夕是何年？我欲乘風歸去，惟恐瓊樓玉宇，高處不勝寒．
起舞弄清影，何似在人間？
轉朱閣，低綺戶，照無眠。不應有恨、何事長向別時圓？人有悲歡離合，月有陰晴圓缺，此事古難全。但願人長久，千里共蟬娟。
</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。 29、overflow:內容溢出控制，其值有:
scroll(始終顯示滾動條)、visible(不顯示滾動條，但超出部分可見)、auto(內容超出時顯示滾動條)、hidden(超出時隱藏內容)。 30、direction:內容的流向。其值有ltr(從左至右)、rtl(從右至左)。
31、line-height:指定文本的行高。
32、Word-spacing:字間距。 例：
<html>
<head>
<meta charset="gbk">
<title>div樣式</title>
</head>
<body>
<div style="font:16px 宋體;width:600px;height:200px; word-spacing:5px; line-height:20px;direction:rtl; overflow:auto;background-color:Yellow">
月幾時有？把酒問青天。不知天上宮闕、今夕是何年？我欲乘風歸去，惟恐瓊樓玉宇，高處不勝寒．起舞弄清影，何似在人間？轉朱閣，低綺戶，照無眠。不應有恨、何事長向別時圓？人有悲歡離合，月有陰晴圓缺，此事古難全。但願人長久，千里共蟬娟。<br/>
月幾時有？把酒問青天。不知天上宮闕、今夕是何年？我欲乘風歸去，惟恐瓊樓玉宇，高處不勝寒．起舞弄清影，何似在人間？轉朱閣，低綺戶，照無眠。不應有恨、何事長向別時圓？人有悲歡離合，月有陰晴圓缺，此事古難全。但願人長久，千里共蟬娟。<br/>
月幾時有？把酒問青天。不知天上宮闕、今夕是何年？我欲乘風歸去，惟恐瓊樓玉宇，高處不勝寒．起舞弄清影，何似在人間？轉朱閣，低綺戶，照無眠。不應有恨、何事長向別時圓？人有悲歡離合，月有陰晴圓缺，此事古難全。但願人長久，千里共蟬娟。<br/>
月幾時有？把酒問青天。不知天上宮闕、今夕是何年？我欲乘風歸去，惟恐瓊樓玉宇，高處不勝寒．起舞弄清影，何似在人間？轉朱閣，低綺戶，照無眠。不應有恨、何事長向別時圓？人有悲歡離合，月有陰晴圓缺，此事古難全。但願人長久，千里共蟬娟。
</div> </body>
</html>
33、border:設置DIV的邊框樣式。 例： 點擊看效果。
<div style="border:dotted 2px black; width:100px;height:100px;"></div>
說明：border后跟邊框的樣式、寬度、顏色等屬性。還可以用以下屬性分別設置。 34、border-width:設置邊框的寬度。
35、border-color：設置邊框的顏色。
36、border-style:設置邊框的樣式。
例：點擊看效果。
<html><head><meta charset="gbk">
<title>div樣式</title>
</head>
<body>
<label style="font-size:14px;">選擇樣式：</label>
<select id="bstyle"
onchange="document.getElementById('tdd').style.borderStyle=this.options[this.selectedIndex].text;">
<option selected="selected">none</option>
<option>dashed</option>
<option>dotted</option>
<option>groove</option>
<option>hidden</option>
<option>inset</option>
<option>outset</option>
<option>ridge</option>
<option>double</option>
<option>solid</option>
</select>
<div id="tdd" style="border-style:none; border-width:5px; border-color:Black;
width:100px;height:100px;background-color:Yellow;">
</div> </body>
</html>
說明：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在頁面上的流向，其值有left(靠左顯示)、right(靠右顯示)、none。
50、background:設置DIV的背景樣式。 例：
<div style="width:600px;height:200px; background:yellow url(mw3.jpg) repeat scroll;overflow:auto">
<div style="width:2px;height:1000px;"></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中定位背景位置。其值有top bottom left right的不同組合。也可以以用坐標指定具體的位置。 例：
<div style="background-color:Yellow; background-image:url(mw3.jpg); background-position:right bottom; background-attachment:scroll; width:600px;height:200px;">
</div>
二、一些特殊效果： 1、cursor:設置DIV上光標的樣式。
2、clip:設置剪輯矩形。
例：
<div style="font:16px 宋體;width:600px;height:200px; cursor:help; clip:rect(0px 100px 20px 0px); line-height:20px; overflow:auto;background-color:Yellow;position:absolute">div樣式測式how areyou.</div>
說明：clip:rect(top right bottom left);設置上下左右的距離,但此時要把position指定為absolute。看以上效果。 3、filter:濾鏡效果。 例:
<div style="width:450px;height:200px;">
<div id=”tdiv” style="background-color:Yellow; filter:alpha(opacity=50);opacity:0.5;float:left;
width:200px;height:200px;">
</div>
<div style=" width:200px;height:200px;float:left;"></div>
</div>
說明：設置透明度:opacity：value (FF專用,value的取值為0至1之間的小數)，filter:alpha(opacity=value)(IE專用，value取值：0至100)。 如果要有JavaScript改變DIV的透明度可用下面的方法：
FF中：document.getElementById('tdiv').style.opacity='0.9';
IE中：document.getElementById('tdiv').style.filter='alpha(opacity=90)'; |
