DIV樣式彙總

一、常用屬性：

1、Height:設定DIV的高度。

2、Width:設定DIV的寬度。

<div style="width:200px;height:200px;background-color:Black;">
</div>

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

<div style="background-color:Black;width:500px;height:500px;">
     <div style="margin:5px 10px 20px 30px;width:200px; height:200px;background-color:White;">
     </div>
</div>

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

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

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

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

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

<div style="width:500px;height:500px;background-color:Black;">
      <div style="margin-left:50px; margin-top:50px; width:200px; height:200px;
          background- color:White;">
            </div>
</div>

8、padding:用于設定DIV的内邊距。

<div style="padding:5px 10px 20px 30px;background-color:Black;width:500px;height:500px;">
     <div style="width:200px; height:200px;background-color:White;"></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;
background-color:Black;">
     <div style="width:140px; height:140px;background-color:White;">
     </div>
</div>

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

<div style="width:200px; height:200px;background-color:Black;">
     <div style="position:relative; top:10px;left:10px; width:140px; height:140px;
background-color:White;">
     </div>
     <div style="position:absolute; top:60px;left:60px; background-color:Silver;
width:100px;height:100px;">
     </div>
     <div style="position:fixed; top:210px;left:210px; background-color:Navy;
width:100px;height:100px;">
     </div>
</div>
<div style="position:absolute; top:50px;left:50px; background-color:Blue;
width:100px;height:100px;">
</div>
<div style="position:fixed; top:200px;left:200px; background-color:Navy;
width:100px;height:100px;">
</div>
<div style="position:static; top:200px;left:100px; background-color:Yellow;
width:100px;height:100px;">
</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中沒有效果(期待高手指點原因)；

14、left:設定對象相對于文檔層次中最近一個定位對象的左邊界的位置。

15、top:設定對象相對于文檔層次中最近一個定位對象的上邊界的位置。

16、right:設定對象相對于文檔層次中最近一個定位對象的右邊界的位置。

17、bottom:設定對象相對于文檔層次中最近一個定位對象的下邊界的位置。

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

<div style="position:absolute; top:50px;left:50px; width:100px; height:100px;background-color:black;">
</div>
<div style="position:absolute; top:60px;left:60px; width:100px; height:100px; 
background-color:Blue;z-index:1;">
</div>
<div style="position:absolute; top:70px;left:70px; background-color:Silver;width:100px;height:100px;">
</div>

說明：上例效果中如果不設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。

<div style="text-align:left; text-decoration:line-through blink; text-indent:30px;
 text-transform:capitalize;color:Blue; font:bold italic 14px 宋體; background-color:Yellow">
明月幾時有？把酒問青天。不知天上宮阙、今夕是何年？我欲乘風歸去，惟恐瓊樓玉宇，高處不勝寒．起舞弄清影，何似在人間？　　轉朱閣，低绮戶，照無眠。不應有恨、何事長向别時圓？人有悲歡離合，月有陰晴圓缺，此事古難全。但願人長久，千裡共蟬娟。
</div>

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

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

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

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

32、Word-spacing:字間距。

<div style="font:16px 宋體;width:600px;height:200px; word-spacing:5px; line-height:20px; 
direction:rtl; overflow:auto;background-color:Yellow">
  明月幾時有？把酒問青天。不知天上宮阙、今夕是何年？我欲乘風歸去，惟恐瓊樓玉宇，高處不勝寒．起舞弄清影，何似在人間？　　轉朱閣，低绮戶，照無眠。不應有恨、何事長向别時圓？人有悲歡離合，月有陰晴圓缺，此事古難全。但願人長久，千裡共蟬娟。<br />
</div>

33、border:設定DIV的邊框樣式。

<div style="border:dotted 2px black; background-color:Yellow; width:100px;height:100px;">
</div>

說明：border後跟邊框的樣式、寬度、顔色等屬性。還可以用以下屬性分别設定。

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

35、border-color：設定邊框的顔色。

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

<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>

說明：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>

56 向 div 元素添加圓角邊框(css3)：

div
{
border:2px solid;
border-radius:25px;
}

57 div居中

先設定父元素text-align:center; 再設定要居中的div margin-left:auto; margin-right:auto; 如果要居中的div裡還有div，則要設定這個div的width則可;

58 div并列(排一行)

要排一行的div 設定 float:left; display:inline;

但設定floa屬性後會影響後面的元素，可用clear:both;來清除

1 我們對div設定一個float浮動屬性即可解決不并排顯示，隻要你的并排div盒子總寬度小于或等于最外層盒子寬度即可實作多個div對象并排顯示。

<style>

div {float:left;}

</style>

<style>

div {display:inline;}

</style>

無論是float浮動還是display實作并排顯示，要想并排顯示首先總寬度要小于或等于對象上級寬度，這樣才能并排顯示實作橫向排列排版布局。

58 div嵌套引起的margin-top不起作用

在父層div加上：overflow:hidden;

二、一些特殊效果：

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;background-color:Blue;">
     <div id=”tdiv” style="background-color:Yellow; filter:alpha(opacity=50);opacity:0.5;
float:left; width:200px;height:200px;" >
     </div>
     <div style="background-color:Yellow; 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)';

* 以下是濾鏡綜合的例子，将以下代碼複制到一個網頁檔案中就可看到其效果，是以就不要加以說明了。

<style type="text/css">
       #paneldiv div
       {
          background-Color:yellow;
          height:200px;
          width:200px;
       }
</style>

<div id="paneldiv" style="width:230px;height:2300px;
background-color:Blue;">
    <div style="filter:alpha(opacity=0,finishopacity=80,style=1,
startx=10,starty=10,FinishX=100, FinishY=100);opacity:0.5;">
     alpha效果:<br />
    </div>

    <div style="filter:blur(add=1,direction=100,strength=5);">
              blur效果：<br />
              add為1代表字有陰影，0代表字全部模糊。
              abcdefghijklmnopqrstuvwxyz
    </div>
    <div style="filter:chroma(color='#ff0000')" onclick="this.style.backgroundColor='#ff0000'" ondblclick="this.style.backgroundColor='black';">
       chroma效果：<br />
       原為黃色，單擊變成紅色變成透明，輕按兩下變成黑色。
    </div>
    <div style="filter:FlipH;">
              fliph效果：<br />
              ABCDEFGH<br />
              IJKLMNOP<br />
              此屬性在設定寬高後有效
    </div>
    <div style="filter:FlipV;">
              flipv效果：<br />
              ABCDEFGH<br />
              IJKLMNOP<br />
              此屬性在設定寬高後有效
    </div>
    <div style="filter:gray;">
         gray效果：<br />
         abcdefghijklmn
    </div>
    <div style="filter:invert; text-transform:uppercase;color:Red;">
               invert效果：<br />
               背景色變成相反顔色，如黑變成白。
    </div>
    <div style="filter:wave(add=0,freq=3,lightstrength=20,phase=3,strength=10)">
               wave效果：<br />
               Add：一般為1，或0。(0表示上下波浪) 
　　           Freq：變形值。(指定多少個波浪)
　　           LightStrength：變形百分比。(變形後的陰影。)
　　           Phase：角度變形百分比。(彎曲的角度)  Strength：變形強度。(數值越大，DIV變形就越大。)
    </div>
    <div style="filter:Xray">
         xray效果：<br />
         sfasdfasdfasdfsadf
    </div>
<div style="filter: progid:DXImageTransform.Microsoft.Gradient
(GradientType=0, StartColorStr='#B5CCFA', EndColorStr='#ffffff');">
       progid:dximagetransform.microsoft.gradient效果：<br />
       endendendendendendendendendend
    </div>
</div>
<div style="filter:DropShadow(color='#666666',OffX='3',OffY='3',
Positive='1');width:200px;height:200px;">
         dropshadow效果：<br />
         此效果隻有在不設定背景色時有效，這時Color指定的将成為背景色。此時背上的字将是清晰的。positive為0時color将成為背景色，為1時color隻是文本投影的顔色。
    </div>
<div style="filter:Glow(color='#0000ff',strength='3');
width:100px;height:100px;">
         glow效果：<br />
         strength的光的強度0--100；此時不能設DIV的背景色。
    </div>
<div style="filter:mask(color='ff0000'); width:100px;
height:100px;text-transform:uppercase;color:black; ">
           mask效果：<br />
           沒有明顯效果,不能設背景色。
   </div>
   <div style="filter:shadow(color='0000ff',direction='100');
width:100px;height:100px;">
               shadow效果：<br />
               abcdefghijklmn
   </div>
   <div style="filter:Xray;width:100px;height:100px;
background-color:red;">
       xray效果：<br />
      sfasdfasdfasdfsadf
   </div>
   <div style="filter: progid:DXImageTransform.Microsoft.Gradient
(GradientType=100, StartColorStr='#B5CCFA', EndColorStr='#ffffff');width:100px;height:100px;">
        漸變效果。
        endendendendendendendendendend
  </div>
  <div style="filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=5);width:100px;height:100px;">
               lsksalsslalalalalalalal
 </div>
 <div style="filter:alpha(opacity=100, finishOpacity=0,style=2);
width:100px; height:100px;background-color:Yellow;">
</div>

用CSS樣式的filter（濾鏡效果）對HTML的一些标記設定濾鏡效果

黑白照片 filter: gray;

X光照片 filter: Xray;

風動模糊 filter: blur(add=true,direction=45,strength=30);

正弦波紋 filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);

半透明效果 filter: Alpha(Opacity=50);

線型透明 filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140);

放射透明 filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200);

白色透明 filter: Chroma(Color=#FFFFFF);

降低色彩 filter: grays;

底片效果 filter: invert;

左右翻轉 filter: fliph;

垂直翻轉 filter: flipv;

投影效果 filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);

馬賽克 filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);

發光效果 filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);

柔邊效果 filter:alpha(opacity=100, finishOpacity=0,style=2

CSS的filter常用濾波器屬性及語句大全

文法：STYLE="filter:filtername(fparameter1, fparameter2...)"

　　（Filtername為濾鏡的名稱，fparameter1、fparameter2等是濾鏡的參數）

　　濾鏡說明：

　　Alpha：設定透明層次

　　blur：建立高速度移動效果，即模糊效果

　　Chroma：制作專用顔色透明

　　DropShadow：建立對象的固定影子

　　FlipH：建立水準鏡像圖檔

　　FlipV：建立垂直鏡像圖檔

　　glow：加光輝在附近對象的邊外

　　gray：把圖檔灰階化

　　invert：反色

　　light：建立光源在對象上

　　mask：建立透明掩膜在對象上

　　shadow：建立偏移固定影子

　　wave：波紋效果

　　Xray：使對象變得像被x光照射一樣

　　1、濾鏡：Alpha

　　文法：STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)"

　　說明：

　　Opacity：起始值，取值為0～100, 0為透明，100為原圖。

　　FinishOpacity：目标值。

　　Style：1或2或3

　　StartX：任意值

　　StartY：任意值

　　例子：filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")

　　2、濾鏡：blur

　　文法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"

　　說明：

　　Add：一般為1，或0。

　　Direction：角度，0～315度，步長為45度。

　　Strength：效果增長的數值，一般5即可。

　　例子：filter:Blur(Add="1",Direction="45",Strength="5")

　　3、濾鏡：Chroma

　　文法：STYLE="filter:Chroma(Color = color)"

　　說明：color：#rrggbb格式，任意。

　　例子：filter:Chroma(Color="#FFFFFF")

　　4、濾鏡：DropShadow

　　文法：STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"

　　說明：Color:#rrggbb格式，任意。

　　Offx：X軸偏離值。

　　Offy：Y軸偏離值。

　　Positive：1或0。

　　例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

　　5、濾鏡：FlipH

　　文法：STYLE="filter:FlipH"

　　例子：filter:FlipH

　　6、濾鏡：FlipV

　　文法：STYLE="filter:FlipV"

　　例子：filter:FlipV

　　7、濾鏡：glow

　　文法：STYLE="filter:Glow(Color=color, Strength=strength)"

　　說明：

　　Color：發光顔色。

　　Strength：強度(0－100)

　　例子：filter:Glow(Color="#6699CC",Strength="5")

　　8、濾鏡：gray

　　文法：STYLE="filter:Gray"

　　例子：filter:Gray

　　9、濾鏡：invert

　　文法：STYLE="filter:Invert"

　　例子：filter:Invert

　　10、濾鏡：mask

　　文法：STYLE="filter:Mask(Color=color)"

　　例子：filter:Mask (Color="#FFFFE0")

　　11、濾鏡：shadow

　　文法：filter:Shadow(Color=color, Direction=direction)

　　說明：

　　Color：#rrggbb格式。

　　Direction：角度，0－315度，步長為45度。

　　例子：filter:Shadow (Color="#6699CC", Direction="135")

　　12、濾鏡：wave

　　文法：filter: Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase，Strength=strength)

　　說明：

　　Add：一般為1，或0。

　　Freq：變形值。

　　LightStrength：變形百分比。

　　Phase：角度變形百分比。

　　Strength：變形強度。

　　例子：filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

　　13、濾鏡：Xray

　　文法：STYLE="filter:Xray"

　　例子：filter:Xray

14.顔色變化

文法：

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B5CCFA', EndColorStr='#B5CCFA');

div内容更新時自動滾到底部

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
 
<script type="text/javascript">
function add()
{
var now = new Date();
var div = document.getElementById('scrolldIV');
div.innerHTML = div.innerHTML + 'time_' + now.getTime() + '<br />';
div.scrollTop = div.scrollHeight;
}
</script>
<div id="scrolldIV" style="overflow:auto; height: 100px; width: 400px; border: 1px solid #999;">
</div>
<input type="button" value="插入一行" onclick="add();">
用js控件div的滾動條，讓它在内容更新時自動滾到底部</body>
</html>

DIV樣式彙總