div style常用属性

一、常用属性：

1、Height:设置DIV的高度。

2、Width:设置DIV的宽度。

例：

"width:200px;height:200px;background-color:Black;">

复制代码

3、margin:用于设置DIV的外延边距，也就是到父容器的距离。

 例：

1 "background-color:Black;width:500px;height:500px;">

2 

3 "margin:5px 10px 20px 30px;width:200px; height:200px;background-color:White;">

4 

5 

6 

7  

复制代码

说明：margin:后面跟有四个距离分别为到父容器的上-右-下-左边的距离；可以看例子中的白色DIV到黑色DIV的边距离效果。还可以分别设置这四个边的距离，用到的属性如下：

4、margin-left:到父容器左边框的距离。

5、margin-right:到父容器右边框的距离。

6、margin-top: 到父容器上边框的距离。

7、margin-bottom:到父容器下边框的距离。

例：

代码 

1 "width:500px;height:500px;background-color:Black;">

2 

3 "margin-left:50px; margin-top:50px; width:200px; height:200px;

4  

5 background- color:White;">

6  

7 

8 

9  

10  

8、padding:用于设置DIV的内边距。

例：

1 "padding:5px 10px 20px 30px;background-color:Black;width:500px;height:500px;">

2 

3 "width:200px; height:200px;background-color:White;">

4 

5  

6  

复制代码

说明：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: 下内边距。

例：

1 "padding-left:50px;padding-top:50px;width:150px;height:150px;background-color:Black;">

2 

3 "width:140px; height:140px;background-color:White;">

4 

5 

6 

7  

8  

复制代码

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

例：

代码 

1 "width:200px; height:200px;background-color:Black;">

2 

3 "position:relative; top:10px;left:10px; width:140px; height:140px;

4  

5 background-color:White;">

6  

7 

8 

9 "position:absolute; top:60px;left:60px; background-color:Silver;

10  

11 width:100px;height:100px;">

12  

13 

14 

15 "position:fixed; top:210px;left:210px; background-color:Navy;

16  

17 width:100px;height:100px;">

18  

19 

20 

21  

22 

23  "position:absolute; top:50px;left:50px; background-color:Blue;

24  

25 width:100px;height:100px;">

26  

27  

28 

29  "position:fixed; top:200px;left:200px; background-color:Navy;

30  

31 width:100px;height:100px;">

32  

33  

34 

35  "position:static; top:200px;left:100px; background-color:Yellow;

36  

37 width:100px;height:100px;">

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 "position:absolute; top:50px;left:50px; width:100px; height:100px;background-color:black;">

2 

3 

4 

5 "position:absolute; top:60px;left:60px; width:100px; height:100px; 

6 

7 background-color:Blue;z-index:1;">

8 

9 

10 

11 "position:absolute; top:70px;left:70px; background-color:Silver;width:100px;height:100px;">

12 

13 

14

说明：上例效果中如果不设z-index属性蓝色DIV应该在中间，而现在的效果蓝色在最上面了。还要说明的是用z-index属性时，position必需要指定为absolute才行。

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

例：

宋体;background-color:Yellow">

明月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？　　转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。

说明：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 "text-align:left; text-decoration:line-through blink; text-indent:30px;

2 

3 text-transform:capitalize;color:Blue; font:bold italic 14px 宋体; background-color:Yellow">

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 "font:16px 宋体;width:600px;height:200px; word-spacing:5px; line-height:20px; 

2 

3 direction:rtl; overflow:auto;background-color:Yellow">

4 

5 明月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？　　转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。

6 

7 明月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？　　转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。

8 

9 明月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？　　转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。

10 

11 明月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？　　转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。

12 

13 

33、border:设置DIV的边框样式。

例：

"border:dotted 2px black; background-color:Yellow; width:100px;height:100px;">

复制代码

说明：border后跟边框的样式、宽度、颜色等属性。还可以用以下属性分别设置。

34、border-width:设置边框的宽度。

35、border-color：设置边框的颜色。

36、border-style:设置边框的样式。

例：

代码 

1 选择样式：

2 

3 

6 

7 

none

8 

9 

dashed

10 

11 

dotted

12 

13 

groove

14 

15 

hidden

16 

17 

inset

18 

19 

outset

20 

21 

ridge

22 

23 

double

24 

25 

solid

26 

27 

28 

29 "tdd" style="border-style:none; border-width:5px; border-color:Black; width:100px;height:100px;background-color:Yellow;">

30 

31 

说明：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的背景样式。

例：

1 

2 

3 overflow:auto">

4 

5 "width:2px;height:1000px;">

6 

7 

复制代码

说明：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的不同组合。也可以以用坐标

指定具体的位置。

例：

1 >

2 

3 

4

复制代码

二、一些特殊效果：

1、cursor:设置DIV上光标的样式。

2、clip:设置剪辑矩形。

例：

代码 

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

说明：clip:rect(top right bottom left);设置上下左右的距离,但此时要把position指定为absolute。看以上效果。

3、filter:滤镜效果。

例：

代码 

"width:450px;height:200px;background-color:Blue;">

"background-color:Yellow; filter:alpha(opacity=50);opacity:0.5;

float:left; width:200px;height:200px;" >

"background-color:Yellow; width:200px;height:200px;float:left;">

说明：设置透明度: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)';

* 以下是滤镜综合的例子，将以下代码复制到一个网页文件中就可看到其效果，所以就不要加以说明了。

例：

       #paneldiv div

       {

          background-Color:yellow;

          height:200px;

          width:200px;

       }

background-color:Blue;">

startx=10,starty=10,FinishX=100, FinishY=100);opacity:0.5;">

     alpha效果:

              blur效果：

              add为1代表字有阴影，0代表字全部模糊。

              abcdefghijklmnopqrstuvwxyz

       chroma效果：

       原为黄色，单击变成红色变成透明，双击变成黑色。

              fliph效果：

              ABCDEFGH

              IJKLMNOP

              此属性在设置宽高后有效

              flipv效果：

              ABCDEFGH

              IJKLMNOP

              此属性在设置宽高后有效

         gray效果：

         abcdefghijklmn

               invert效果：

               背景色变成相反颜色，如黑变成白。

               wave效果：

               Add：一般为1，或0。(0表示上下波浪) 

　　           Freq：变形值。(指定多少个波浪)

　　           LightStrength：变形百分比。(变形后的阴影。)

　　           Phase：角度变形百分比。(弯曲的角度)  Strength：变形强度。(数值越大，DIV变形就越大。)

         xray效果：

         sfasdfasdfasdfsadf

(GradientType=0, StartColorStr='#B5CCFA', EndColorStr='#ffffff');">

       progid:dximagetransform.microsoft.gradient效果：

       endendendendendendendendendend

Positive='1');width:200px;height:200px;">

         dropshadow效果：

         此效果只有在不设置背景色时有效，这时Color指定的将成为背景色。此时背上的字将是清晰的。positive为0时color将成为背景色，为1时color只是文本投影的颜色。

width:100px;height:100px;">

         glow效果：

         strength的光的强度0--100；此时不能设DIV的背景色。

height:100px;text-transform:uppercase;color:black; ">

           mask效果：

           没有明显效果,不能设背景色。

width:100px;height:100px;">

               shadow效果：

               abcdefghijklmn

background-color:red;">

       xray效果：

      sfasdfasdfasdfsadf

(GradientType=100, StartColorStr='#B5CCFA', EndColorStr='#ffffff');width:100px;height:100px;">

        渐变效果。

        endendendendendendendendendend

               lsksalsslalalalalalalal

width:100px; height:100px;background-color:Yellow;">

DIV边框样式设置

 1. 外凸边框： 

  效果：

日志文字

  代码：

日志文字

  代码说明：

  蓝色部分为可修改部分，一一说明：

  四个2表示凸起边框的宽度，用1的话不太明显，2或3比较合适；

  四个outset表示边框类型为"凸起"，如果都改成inset或者double，就分别是凹陷边框和双线边框的效果，其他效果下文会给出完整代码；

  WIDTH: 100%; 和HEIGHT: 100%表示这个框的宽度占日志宽度的百分之百，当窗口伸缩的时候，框的宽度也会随着伸缩，HEIGHT表示高度，另外，还有一种表示方法以px为单位的，表示单位为象素，例如：WIDTH: 355px 表示框的宽度为355象素，不同的版式，日志宽度是不一样，可参考这里给定的值，一般的情况下，用百分比表示就可以了，但是有的时候需要用象素来确定大小，见机行事吧；

  align=left表示框内内容的排列方式为左对齐，把left分别改成center或right分别为居中对齐和右对齐，如果想左对齐的话，可以把align=left删掉，缺省情况下是左对齐；

  ffffff表示框内的背景色，ffffff表示白色(000000表示黑色)，颜色值可参考这个表来选择，另外，将#ffffff改为 transprant即为透明背景，个人认为透明背景比较常用；为了方便复制粘贴，给出透明背景的边框代码如下：(框内红色部分为代码)

日志文字  日志文字为框内的日志内容，没有必要在代码里编辑，回到普通设计模式，双击生成的框，即可进入框内编辑文字。 

2. 内凹边框： 

  效果：

日志文字

  代码：

日志文字

  透明背景内凹边框代码：

日志文字  代码说明：

  类似上面的，略…… 

3. 双线边框：

日志文字  透明背景双线边框代码：

日志文字其实，前面的边框也可以像双线边框一样设置颜色，但个人觉得，凹凸效果的颜色还是默认比较好。 

4. 虚线边框：

日志文字

  透明背景虚线边框代码：

日志文字

5. 沟线立体效果边框

日志文字个人认为这个边框的背景色最好用透明，而且边框的粗细值不能太小，否则效果不明显 

6. 脊线立体效果边框

日志文字