这些样式表，你都用过么？

1<table border="1" cellpadding="0" cellspacing="0"> <tbody> <tr align="center" bgcolor="#cccccc"> <td> <img src="http://www.asp.net/images/quickstart.gif"/></td> <td> <img src="http://www.asp.net/images/quickstart.gif" style="FILTER: chroma(color:#000000)"/></td> </tr> <tr align="center"> <td> 未使用该滤镜</td> <td> 使用该滤镜</td> </tr> </tbody> </table>

1<table border="1" cellpadding="0" cellspacing="0" width="100"> <tbody> <tr> <td> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td></tr></tbody> </table>

1<table border="1" cellpadding="0" cellspacing="0" style="WORD-BREAK: break-all" width="100"> <tbody> <tr> <td> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td> </tr> </tbody> </table>

1<style> .clsHoriz { writing-mode: lr-tb } </style>

1<div style="writing-mode:tb-rl"> 第一组垂直文字<span class="clsHoriz">第一组水平文字</span>第二组水平文字 
2 <span style="writing-mode:lr-tb">第二组水平文字</span>第三组竖直文字<span class="clsHoriz">第三组水平文字</span> </div>

1<p style="text-indent:2em;width:200px;"> 有时候，我们需要将段落的首行缩进两个文字，一般我们都是用4个HTML的空格(&amp;nbsp;)来实现，其实我们还可以用样式表来达到这种效果！</p>

 1<span style="background-color: #CCCCCC; padding:20px;"> <textarea style="background-color: transparent;"> 背景透明的TextArea
 2
 3**border-collapse:collapse;**   
 4它会自动把相同的边框线合并，例: 
 5
 6不使用border-collapse:collapse;  1.1  |  1.2   
 7---|---  
 82.1  |  2.2   
 9使用border-collapse:collapse;  1.1  |  1.2   
10---|---  
112.1  |  2.2   
12<style> .grid { border-collapse: collapse; } .grid td { border: solid 1px #cccccc; } .gridNoCollapse td { border: solid 1px #cccccc; } </style> 不使用border-collapse:collapse; <table border="0" cellpadding="4" cellspacing="0" class="gridNoCollapse" width="200"> <tr> <td> 1.1</td> <td> 1.2</td> </tr> <tr> <td> 2.1</td> <td> 2.2</td> </tr> </table> 使用border-collapse:collapse; <table border="0" cellpadding="4" cellspacing="0" class="grid" width="200"> <tr> <td> 1.1</td> <td> 1.2</td> </tr> <tr> <td> 2.1</td> <td> 2.2</td> </tr> </table>
13
14**background-position: 0 -78;**   
15设置背景图片的位置，例:    
16《background-position的妙用》 
17
18**table-layout: fixed;**   
19固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。也就是说，内容可能被裁切，例:    
20看看我以前写的一个仿msn的htc网格中应用这个属性的效果吧，仿照MSN的网格，单元格中文字过长会自动被截取（在Table中使用样式table-layout: fixed;），鼠标移上会全部显示(使用一个浮动的层覆盖在上面)： 演示 下载 
21
22**display:inline;**   
23设置或检索对象是否及如何显示，inline表示内联，例:    
24大家都知道两个表格在一起，默认是会自动换行的，但是利用display:inline;属性可以让两个表格并排在一起：  表格1   
25---  
26表格2   
27---  
28  
29<table border="1" style="display:inline;"> <tr> <td>表格1</td> </tr> </table> <table border="1" style="display:inline;"> <tr> <td>表格2</td> </tr> </table>
30
31**overflow: auto;**   
32检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。auto : 在需要时剪切内容并添加滚动条，例:    
33使用前的TextArea  |  使用后的TextArea   
34---|---  
35默认有滚动条 |  只有当文字超出范围时滚动条才会出现  
36  
37**font:12px/18px;**   
38字体大小/行高，例:    
39未使用CSS  |  使用该CSS   
40---|---  
41  
42在这里行高是系统默认的，不会受影响的 
43
44| 
45
46这里的12px就表示字体大小，18px其实就等价于css中的line-height。   
47  
48<table border="" cellpadding="" cellspacing="" width="200"> <tr> <td>未使用CSS</td> <td>使用该CSS</td> </tr> <tr> <td> <p> 在这里行高是系统默认的，不会受影响的 </p> </td> <td><p style="font:12px/18px;">这里的12px就表示字体大小，18px其实就等价于css中的line-height。</p></td> </tr> </table>
49
50**clip : rect ( 0 64 64 0 )**   
51字体大小/行高，例:    
52原图： ![](http://www.webuc.net/myproject/rpg/images/girl.gif)   
53裁减后：  ![](http://www.webuc.net/myproject/rpg/images/girl.gif)   
54原图： <a href="http://www.webuc.net/myproject/rpg/images/girl.gif" target="_blank"><img border="0" src="http://www.webuc.net/myproject/rpg/images/girl.gif" width="128"/></a><br/> 裁减后： <span style="clip:rect(0 64 64 0);width:64px;height:64px;position:absolute;"><img src="http://www.webuc.net/myproject/rpg/images/girl.gif"/></span><span style="width:64px;height:64px;"> </span> 可以利用这个来做 动画 :) 
55
56**font-size: expression(document.body.clientWidth / 20);**   
57expression是IE浏览器特有的功能，可以直接执行脚本而算出css的值，例:    
58《CSS也能控制表格的交替颜色 》   
59
60
61字体大小随着浏览器大小而变化，始终为浏览器宽度的1/20 
62
63<div style="font-size: expression(document.body.clientWidth / 20);"> 字体大小随着浏览器大小而变化，始终为浏览器宽度的1/20 </div>   
64对于支持HTML的BBS来说，这可能会是一个安全隐患！ 
65
66**position: absolute;**   
67这个我想绝大多数人都知道——绝对定位，我所要说的是偶然发现的一个隐含功能，例:    
68当给一个网页元素的CSS设置为"position: absolute;"，那么它会绝对定位，然后根据css中的left,top属性确定自己的位置。但是如果我们仅仅设置一个元素样式表的"position: absolute;"属性，而不设置其left,top属性，那么该元素会浮在其html所在位置。看个例子，我将一个tr的CSS设置为"position: absolute;"：  第一行   
69---  
70第二行   
71<table border="1" cellpadding="4" cellspacing="0"> <tr style="position: absolute;"> <td>第一行</td> </tr> <tr> <td>第二行</td> </tr> </table>   
72第一行浮在第二行上了，这个特性可以很方便的来制作重叠效果，例如我以前写过的自定义按钮和flash播放器都用到了这个特性来实现重叠：   
73自定义按钮 ：一个自定义按钮，底下是一个普通的Button，利用"position:absolute;"在Button上面覆盖图片，这样看起来就像自定义按钮，而实际点击确是点击底下真实的Button（ 下载 ）   
74Flash播放器 ：这个播放器的进度条就是通过这种方法来重叠的。（ 下载 ）</textarea></span>