在Web开发时，不可避免要用到CSS，把我这几年在Web开发过程中积累的一些不常用但是很实用的CSS整理了一下，希望对大家有所帮助！
<TABLE cellSpacing=0 cellPadding=10 border=1>
<TBODY>
<TR align=middle bgColor=#cccccc>
<TD><IMG src="http://www.asp.net/images/quickstart.gif"></TD>
<TD><IMG style="FILTER: chroma(color:#FFFFFF)" src="http://www.asp.net/images/quickstart.gif"></TD></TR>
<TR align=middle>
<TD>未使用该滤镜</TD>
<TD>使用该滤镜</TD></TR></TBODY></TABLE></P><TEXTAREA id=code1 rows=4 cols=60> <table cellspacing = "0" cellpadding = "0" border = "1">
<tbody>
<tr align = "center" bgcolor = "#cccccc">
<td>
<img src = "http://www.asp.net/images/quickstart.gif"/></td>
<td>
<img style = "FILTER: chroma(color:#000000)" src = "http://www.asp.net/images/quickstart.gif"/></td>
</tr>
<tr align = "center">
<td>
未使用该滤镜</td>
<td>
使用该滤镜</td>
</tr>
</tbody>
</table>
</TEXTAREA>
<P><FONT color=#0000ff><STRONG>word-break:break-all;</STRONG> <BR>强制换行，例: </FONT></P>
<P>当未使用该样式时，虽然我设置了表格宽度为100px，但是面对这样连续的字符，表格无法自动换行，表格会被撑破:
<TABLE cellSpacing=0 cellPadding=0 width=100 border=1>
<TBODY>
<TR>
<TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD></TR></TBODY></TABLE><TEXTAREA id=code2 rows=4 cols=60> <table cellspacing = "0" cellpadding = "0" width = "100" border = "1">
<tbody>
<tr>
<td>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td></tr></tbody>
</table>
</TEXTAREA> </P>
<P>再看看使用该样式后的效果:
<TABLE style="WORD-BREAK: break-all" cellSpacing=0 cellPadding=0 width=100 border=1>
<TBODY>
<TR>
<TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD></TR></TBODY></TABLE><TEXTAREA id=code3 rows=4 cols=60> <table cellspacing = "0" cellpadding = "0" width = "100" border = "1" style = "WORD-BREAK: break-all">
<tbody>
<tr>
<td>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</tr>
</tbody>
</table>
</TEXTAREA> </P>
<P><FONT color=#0000ff><STRONG>writing-mode:tb-rl;</STRONG> <BR>用于设置文本的书写方向，可以有两个取值： <BR>lr-tb：表示左右-上下，left right - top bottom <BR>tb-rl：表示上下-右左，top bottom - right left <BR>需要 IE 5.5+ 才支持，例: </FONT></P>
<DIV style="WRITING-MODE: tb-rl">第一组垂直文字<SPAN class=clsHoriz>第一组水平文字</SPAN>第二组水平文字 <BR><SPAN style="WRITING-MODE: lr-tb">第二组水平文字</SPAN>第三组竖直文字<SPAN class=clsHoriz>第三组水平文字</SPAN> </DIV><TEXTAREA id=code4 rows=4 cols=60> <style>
.clsHoriz
{
writing-mode: lr-tb
}
</style>
<div style = "writing-mode:tb-rl">
第一组垂直文字<span class = "clsHoriz">第一组水平文字</span>第二组水平文字
<br/>
<span style = "writing-mode:lr-tb">第二组水平文字</span>第三组竖直文字<span class = "clsHoriz">第三组水平文字</span>
</div>
</TEXTAREA>
<P><FONT color=#0000ff><STRONG>text-indent:2em;</STRONG> <BR>首行缩进，例: </FONT></P>
<P style="WIDTH: 200px; TEXT-INDENT: 2em">有时候，我们需要将段落的首行缩进两个文字，一般我们都是用4个HTML的空格(&nbsp;)来实现，其实我们还可以用样式表来达到这种效果！</P><TEXTAREA id=code5 rows=4 cols=60> <p style = "text-indent:2em;width:200px;">
有时候，我们需要将段落的首行缩进两个文字，一般我们都是用4个HTML的空格(&amp;nbsp;)来实现，其实我们还可以用样式表来达到这种效果！</p></TEXTAREA>
<P></P>
<P><FONT color=#0000ff><STRONG>background-color: transparent;</STRONG> <BR>transparent表示透明色，例: </FONT></P>
<P><SPAN style="PADDING-RIGHT: 20px; PADDING-LEFT: 20px; PADDING-BOTTOM: 20px; PADDING-TOP: 20px; BACKGROUND-COLOR: #cccccc"><TEXTAREA style="BACKGROUND-COLOR: transparent"> 背景透明的TextArea</TEXTAREA> </SPAN><BR><TEXTAREA id=code6 rows=4 cols=60> <span style = "background-color: #CCCCCC; padding:20px;">
<textarea style = "background-color: transparent;">
背景透明的TextArea</TEXTAREA> </SPAN></TEXTAREA></P>
<P><FONT color=#0000ff><STRONG>border-collapse:collapse;</STRONG> <BR>它会自动把相同的边框线合并，例: </FONT></P>
<P>不使用border-collapse:collapse;
<TABLE class=gridNoCollapse cellSpacing=0 cellPadding=4 width=200 border=0>
<TBODY>
<TR>
<TD>1.1</TD>
<TD>1.2</TD></TR>
<TR>
<TD>2.1</TD>
<TD>2.2</TD></TR></TBODY></TABLE>使用border-collapse:collapse;
<TABLE class=grid cellSpacing=0 cellPadding=4 width=200 border=0>
<TBODY>
<TR>
<TD>1.1</TD>
<TD>1.2</TD></TR>
<TR>
<TD>2.1</TD>
<TD>2.2</TD></TR></TBODY></TABLE><TEXTAREA id=code7 rows=4 cols=60> <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" width = "200" class = "gridNoCollapse">
<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" width = "200" class = "grid">
<tr>
<td>
1.1</td>
<td>
1.2</td>
</tr>
<tr>
<td>
2.1</td>
<td>
2.2</td>
</tr>
</table>
</TEXTAREA> </P>
<P><FONT color=#0000ff><STRONG>background-position: 0 -78;</STRONG> <BR>设置背景图片的位置，例: </FONT><BR><A href="http://www.51js.com/viewthread.php?fpage=1&tid=15302" target=_blank>《background-position的妙用》</A> </P>
<P><FONT color=#0000ff><STRONG>table-layout: fixed;</STRONG> <BR>固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。也就是说，内容可能被裁切，例: </FONT><BR>看看我以前写的一个仿msn的htc网格中应用这个属性的效果吧，仿照MSN的网格，单元格中文字过长会自动被截取（在Table中使用样式table-layout: fixed;），鼠标移上会全部显示(使用一个浮动的层覆盖在上面)： <A href="http://cnforums.net/dotey/msncontrols/demo.htm" target=_blank>演示</A> <A href="http://cnforums.net/dotey/msncontrols/msncontrols.rar">下载</A> </P>
<P><FONT color=#0000ff><STRONG>display:inline;</STRONG> <BR>设置或检索对象是否及如何显示，inline表示内联，例: </FONT><BR>大家都知道两个表格在一起，默认是会自动换行的，但是利用display:inline;属性可以让两个表格并排在一起：
<TABLE style="DISPLAY: inline" cellSpacing=0 cellPadding=0 border=1>
<TBODY>
<TR>
<TD>表格1</TD></TR></TBODY></TABLE>
<TABLE style="DISPLAY: inline" cellSpacing=0 cellPadding=0 border=1>
<TBODY>
<TR>
<TD>表格2</TD></TR></TBODY></TABLE><BR><TEXTAREA id=code8 rows=4 cols=60><table border="1" style="display:inline;">
<tr>
<td>表格1</td>
</tr>
</table>
<table border="1" style="display:inline;">
<tr>
<td>表格2</td>
</tr>
</table>
</TEXTAREA> </P>
<P><FONT color=#0000ff><STRONG>overflow: auto;</STRONG> <BR>检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。auto : 在需要时剪切内容并添加滚动条，例: </FONT><BR>
<TABLE cellSpacing=0 cellPadding=0 border=1>
<TBODY>
<TR>
<TD>使用前的TextArea</TD>
<TD>使用后的TextArea</TD></TR>
<TR>
<TD><TEXTAREA>默认有滚动条</TEXTAREA></TD>
<TD><TEXTAREA style="OVERFLOW: auto">只有当文字超出范围时滚动条才会出现</TEXTAREA></TD></TR></TBODY></TABLE></P>
<P><FONT color=#0000ff><STRONG>font:12px/18px;</STRONG> <BR>字体大小/行高，例: </FONT><BR>
<TABLE cellSpacing=0 cellPadding=0 width=200 border=1>
<TBODY>
<TR>
<TD>未使用CSS</TD>
<TD>使用该CSS</TD></TR>
<TR>
<TD>
<P>在这里行高是系统默认的，不会受影响的 </P></TD>
<TD>
<P style="FONT-WEIGHT: normal; FONT-SIZE: 12px; LINE-HEIGHT: 18px; FONT-STYLE: normal; FONT-VARIANT: normal">这里的12px就表示字体大小，18px其实就等价于css中的line-height。</P></TD></TR></TBODY></TABLE><TEXTAREA id=code9 rows=4 cols=60><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>
</TEXTAREA> </P>
<P><FONT color=#0000ff><STRONG>clip : rect ( 0 64 64 0 ) </STRONG><BR>字体大小/行高，例: </FONT><BR>原图： <A href="http://www.webuc.net/myproject/rpg/images/girl.gif" target=_blank><IMG src="http://www.webuc.net/myproject/rpg/images/girl.gif" width=128 border=0></A><BR>裁减后： <SPAN style="WIDTH: 64px; CLIP: rect(0px 64px 64px 0px); POSITION: absolute; HEIGHT: 64px"><IMG src="http://www.webuc.net/myproject/rpg/images/girl.gif"></SPAN><SPAN style="WIDTH: 64px; HEIGHT: 64px"> </SPAN> <BR><TEXTAREA id=code12 rows=4 cols=60>原图：
<a href="http://www.webuc.net/myproject/rpg/images/girl.gif" target="_blank"><img src="http://www.webuc.net/myproject/rpg/images/girl.gif" width="128" border="0"></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>
</TEXTAREA> 可以利用这个来做<A href="http://www.webuc.net/myproject/rpg/" target=_blank>动画</A>:) </P>
<P><FONT color=#0000ff><STRONG>font-size: expression(document.body.clientWidth / 20);</STRONG> <BR>expression是IE浏览器特有的功能，可以直接执行脚本而算出css的值，例: </FONT><BR><A href="http://www.51js.com/viewthread.php?fpage=1&tid=13400&sid=8uPN9ObO" target=_blank>《CSS也能控制表格的交替颜色 》</A><BR>
<DIV>字体大小随着浏览器大小而变化，始终为浏览器宽度的1/20 </DIV><TEXTAREA id=code10 rows=4 cols=60><div style="font-size:
expression(document.body.clientWidth / 20);">
字体大小随着浏览器大小而变化，始终为浏览器宽度的1/20
</div>
</TEXTAREA><BR><FONT color=red>对于支持HTML的BBS来说，这可能会是一个安全隐患！</FONT>
<P></P>
<P><FONT color=#0000ff><STRONG>position: absolute;</STRONG> <BR>这个我想绝大多数人都知道——绝对定位，我所要说的是偶然发现的一个隐含功能，例: </FONT><BR>当给一个网页元素的CSS设置为"position: absolute;"，那么它会绝对定位，然后根据css中的left,top属性确定自己的位置。但是如果我们仅仅设置一个元素样式表的"position: absolute;"属性，而不设置其left,top属性，那么该元素会浮在其html所在位置。看个例子，我将一个tr的CSS设置为"position: absolute;"：
<TABLE cellSpacing=0 cellPadding=4 border=1>
<TBODY>
<TR style="POSITION: absolute">
<TD>第一行</TD></TR>
<TR>
<TD>第二行</TD></TR></TBODY></TABLE><TEXTAREA id=code10 rows=4 cols=60><table border="1" cellpadding="4" cellspacing="0">
<tr style="position: absolute;">
<td>第一行</td>
</tr>
<tr>
<td>第二行</td>
</tr>
</table>
</TEXTAREA><BR>第一行浮在第二行上了，这个特性可以很方便的来制作重叠效果，例如我以前写过的自定义按钮和flash播放器都用到了这个特性来实现重叠：<BR><A href="http://www.cnforums.net/dotey/button/button.htm" target=_blank>自定义按钮</A>：一个自定义按钮，底下是一个普通的Button，利用"position:absolute;"在Button上面覆盖图片，这样看起来就像自定义按钮，而实际点击确是点击底下真实的Button（<A href="http://www.cnforums.net/dotey/button/button.rar">下载</A>）<BR><A href="http://webuc.net/MyProject/flashPlayer/Player.htm" target=_blank>Flash播放器</A>：这个播放器的进度条就是通过这种方法来重叠的。（<A href="http://webuc.net/MyProject/flashPlayer/flashPlayer.rar">下载</A>） </P></span>
<br />
<div style="font-size: 14px; line-height: 25px;"><strong>作者Blog：</strong><a id="ArticleContent1_ArticleContent1_AuthorBlogLink" href="http://blog.csdn.net/madein82/" target="_blank">http://blog.csdn.net/madein82/</a></div>
<div style="font-size: 14px; line-height: 25px; color:#900;"><strong>相关文章</strong></div>
<table id="ArticleContent1_ArticleContent1_RelatedArticles" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td>
<a href="article/50/50804.shtm">这些样式表，你都用过么？</a>
</td>
</tr><tr>
<td>
<a href="article/44/44836.shtm">浏览器滚动条的参数总结</a>
</td>
</tr><tr>
<td>
<a href="article/41/41288.shtm">ASP全程讲座~~呵呵 </a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<TABLE cellSpacing=0 cellPadding=10 border=1>
<TBODY>
<TR align=middle bgColor=#cccccc>
<TD><IMG src="http://www.asp.net/images/quickstart.gif"></TD>
<TD><IMG style="FILTER: chroma(color:#FFFFFF)" src="http://www.asp.net/images/quickstart.gif"></TD></TR>
<TR align=middle>
<TD>未使用该滤镜</TD>
<TD>使用该滤镜</TD></TR></TBODY></TABLE></P><TEXTAREA id=code1 rows=4 cols=60> <table cellspacing = "0" cellpadding = "0" border = "1">
<tbody>
<tr align = "center" bgcolor = "#cccccc">
<td>
<img src = "http://www.asp.net/images/quickstart.gif"/></td>
<td>
<img style = "FILTER: chroma(color:#000000)" src = "http://www.asp.net/images/quickstart.gif"/></td>
</tr>
<tr align = "center">
<td>
未使用该滤镜</td>
<td>
使用该滤镜</td>
</tr>
</tbody>
</table>
</TEXTAREA>
<P><FONT color=#0000ff><STRONG>word-break:break-all;</STRONG> <BR>强制换行，例: </FONT></P>
<P>当未使用该样式时，虽然我设置了表格宽度为100px，但是面对这样连续的字符，表格无法自动换行，表格会被撑破:
<TABLE cellSpacing=0 cellPadding=0 width=100 border=1>
<TBODY>
<TR>
<TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD></TR></TBODY></TABLE><TEXTAREA id=code2 rows=4 cols=60> <table cellspacing = "0" cellpadding = "0" width = "100" border = "1">
<tbody>
<tr>
<td>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td></tr></tbody>
</table>
</TEXTAREA> </P>
<P>再看看使用该样式后的效果:
<TABLE style="WORD-BREAK: break-all" cellSpacing=0 cellPadding=0 width=100 border=1>
<TBODY>
<TR>
<TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD></TR></TBODY></TABLE><TEXTAREA id=code3 rows=4 cols=60> <table cellspacing = "0" cellpadding = "0" width = "100" border = "1" style = "WORD-BREAK: break-all">
<tbody>
<tr>
<td>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</tr>
</tbody>
</table>
</TEXTAREA> </P>
<P><FONT color=#0000ff><STRONG>writing-mode:tb-rl;</STRONG> <BR>用于设置文本的书写方向，可以有两个取值： <BR>lr-tb：表示左右-上下，left right - top bottom <BR>tb-rl：表示上下-右左，top bottom - right left <BR>需要 IE 5.5+ 才支持，例: </FONT></P>
<DIV style="WRITING-MODE: tb-rl">第一组垂直文字<SPAN class=clsHoriz>第一组水平文字</SPAN>第二组水平文字 <BR><SPAN style="WRITING-MODE: lr-tb">第二组水平文字</SPAN>第三组竖直文字<SPAN class=clsHoriz>第三组水平文字</SPAN> </DIV><TEXTAREA id=code4 rows=4 cols=60> <style>
.clsHoriz
{
writing-mode: lr-tb
}
</style>
<div style = "writing-mode:tb-rl">
第一组垂直文字<span class = "clsHoriz">第一组水平文字</span>第二组水平文字
<br/>
<span style = "writing-mode:lr-tb">第二组水平文字</span>第三组竖直文字<span class = "clsHoriz">第三组水平文字</span>
</div>
</TEXTAREA>
<P><FONT color=#0000ff><STRONG>text-indent:2em;</STRONG> <BR>首行缩进，例: </FONT></P>
<P style="WIDTH: 200px; TEXT-INDENT: 2em">有时候，我们需要将段落的首行缩进两个文字，一般我们都是用4个HTML的空格(&nbsp;)来实现，其实我们还可以用样式表来达到这种效果！</P><TEXTAREA id=code5 rows=4 cols=60> <p style = "text-indent:2em;width:200px;">
有时候，我们需要将段落的首行缩进两个文字，一般我们都是用4个HTML的空格(&amp;nbsp;)来实现，其实我们还可以用样式表来达到这种效果！</p></TEXTAREA>
<P></P>
<P><FONT color=#0000ff><STRONG>background-color: transparent;</STRONG> <BR>transparent表示透明色，例: </FONT></P>
<P><SPAN style="PADDING-RIGHT: 20px; PADDING-LEFT: 20px; PADDING-BOTTOM: 20px; PADDING-TOP: 20px; BACKGROUND-COLOR: #cccccc"><TEXTAREA style="BACKGROUND-COLOR: transparent"> 背景透明的TextArea</TEXTAREA> </SPAN><BR><TEXTAREA id=code6 rows=4 cols=60> <span style = "background-color: #CCCCCC; padding:20px;">
<textarea style = "background-color: transparent;">
背景透明的TextArea</TEXTAREA> </SPAN></TEXTAREA></P>
<P><FONT color=#0000ff><STRONG>border-collapse:collapse;</STRONG> <BR>它会自动把相同的边框线合并，例: </FONT></P>
<P>不使用border-collapse:collapse;
<TABLE class=gridNoCollapse cellSpacing=0 cellPadding=4 width=200 border=0>
<TBODY>
<TR>
<TD>1.1</TD>
<TD>1.2</TD></TR>
<TR>
<TD>2.1</TD>
<TD>2.2</TD></TR></TBODY></TABLE>使用border-collapse:collapse;
<TABLE class=grid cellSpacing=0 cellPadding=4 width=200 border=0>
<TBODY>
<TR>
<TD>1.1</TD>
<TD>1.2</TD></TR>
<TR>
<TD>2.1</TD>
<TD>2.2</TD></TR></TBODY></TABLE><TEXTAREA id=code7 rows=4 cols=60> <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" width = "200" class = "gridNoCollapse">
<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" width = "200" class = "grid">
<tr>
<td>
1.1</td>
<td>
1.2</td>
</tr>
<tr>
<td>
2.1</td>
<td>
2.2</td>
</tr>
</table>
</TEXTAREA> </P>
<P><FONT color=#0000ff><STRONG>background-position: 0 -78;</STRONG> <BR>设置背景图片的位置，例: </FONT><BR><A href="http://www.51js.com/viewthread.php?fpage=1&tid=15302" target=_blank>《background-position的妙用》</A> </P>
<P><FONT color=#0000ff><STRONG>table-layout: fixed;</STRONG> <BR>固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。也就是说，内容可能被裁切，例: </FONT><BR>看看我以前写的一个仿msn的htc网格中应用这个属性的效果吧，仿照MSN的网格，单元格中文字过长会自动被截取（在Table中使用样式table-layout: fixed;），鼠标移上会全部显示(使用一个浮动的层覆盖在上面)： <A href="http://cnforums.net/dotey/msncontrols/demo.htm" target=_blank>演示</A> <A href="http://cnforums.net/dotey/msncontrols/msncontrols.rar">下载</A> </P>
<P><FONT color=#0000ff><STRONG>display:inline;</STRONG> <BR>设置或检索对象是否及如何显示，inline表示内联，例: </FONT><BR>大家都知道两个表格在一起，默认是会自动换行的，但是利用display:inline;属性可以让两个表格并排在一起：
<TABLE style="DISPLAY: inline" cellSpacing=0 cellPadding=0 border=1>
<TBODY>
<TR>
<TD>表格1</TD></TR></TBODY></TABLE>
<TABLE style="DISPLAY: inline" cellSpacing=0 cellPadding=0 border=1>
<TBODY>
<TR>
<TD>表格2</TD></TR></TBODY></TABLE><BR><TEXTAREA id=code8 rows=4 cols=60><table border="1" style="display:inline;">
<tr>
<td>表格1</td>
</tr>
</table>
<table border="1" style="display:inline;">
<tr>
<td>表格2</td>
</tr>
</table>
</TEXTAREA> </P>
<P><FONT color=#0000ff><STRONG>overflow: auto;</STRONG> <BR>检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。auto : 在需要时剪切内容并添加滚动条，例: </FONT><BR>
<TABLE cellSpacing=0 cellPadding=0 border=1>
<TBODY>
<TR>
<TD>使用前的TextArea</TD>
<TD>使用后的TextArea</TD></TR>
<TR>
<TD><TEXTAREA>默认有滚动条</TEXTAREA></TD>
<TD><TEXTAREA style="OVERFLOW: auto">只有当文字超出范围时滚动条才会出现</TEXTAREA></TD></TR></TBODY></TABLE></P>
<P><FONT color=#0000ff><STRONG>font:12px/18px;</STRONG> <BR>字体大小/行高，例: </FONT><BR>
<TABLE cellSpacing=0 cellPadding=0 width=200 border=1>
<TBODY>
<TR>
<TD>未使用CSS</TD>
<TD>使用该CSS</TD></TR>
<TR>
<TD>
<P>在这里行高是系统默认的，不会受影响的 </P></TD>
<TD>
<P style="FONT-WEIGHT: normal; FONT-SIZE: 12px; LINE-HEIGHT: 18px; FONT-STYLE: normal; FONT-VARIANT: normal">这里的12px就表示字体大小，18px其实就等价于css中的line-height。</P></TD></TR></TBODY></TABLE><TEXTAREA id=code9 rows=4 cols=60><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>
</TEXTAREA> </P>
<P><FONT color=#0000ff><STRONG>clip : rect ( 0 64 64 0 ) </STRONG><BR>字体大小/行高，例: </FONT><BR>原图： <A href="http://www.webuc.net/myproject/rpg/images/girl.gif" target=_blank><IMG src="http://www.webuc.net/myproject/rpg/images/girl.gif" width=128 border=0></A><BR>裁减后： <SPAN style="WIDTH: 64px; CLIP: rect(0px 64px 64px 0px); POSITION: absolute; HEIGHT: 64px"><IMG src="http://www.webuc.net/myproject/rpg/images/girl.gif"></SPAN><SPAN style="WIDTH: 64px; HEIGHT: 64px"> </SPAN> <BR><TEXTAREA id=code12 rows=4 cols=60>原图：
<a href="http://www.webuc.net/myproject/rpg/images/girl.gif" target="_blank"><img src="http://www.webuc.net/myproject/rpg/images/girl.gif" width="128" border="0"></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>
</TEXTAREA> 可以利用这个来做<A href="http://www.webuc.net/myproject/rpg/" target=_blank>动画</A>:) </P>
<P><FONT color=#0000ff><STRONG>font-size: expression(document.body.clientWidth / 20);</STRONG> <BR>expression是IE浏览器特有的功能，可以直接执行脚本而算出css的值，例: </FONT><BR><A href="http://www.51js.com/viewthread.php?fpage=1&tid=13400&sid=8uPN9ObO" target=_blank>《CSS也能控制表格的交替颜色 》</A><BR>
<DIV>字体大小随着浏览器大小而变化，始终为浏览器宽度的1/20 </DIV><TEXTAREA id=code10 rows=4 cols=60><div style="font-size:
expression(document.body.clientWidth / 20);">
字体大小随着浏览器大小而变化，始终为浏览器宽度的1/20
</div>
</TEXTAREA><BR><FONT color=red>对于支持HTML的BBS来说，这可能会是一个安全隐患！</FONT>
<P></P>
<P><FONT color=#0000ff><STRONG>position: absolute;</STRONG> <BR>这个我想绝大多数人都知道——绝对定位，我所要说的是偶然发现的一个隐含功能，例: </FONT><BR>当给一个网页元素的CSS设置为"position: absolute;"，那么它会绝对定位，然后根据css中的left,top属性确定自己的位置。但是如果我们仅仅设置一个元素样式表的"position: absolute;"属性，而不设置其left,top属性，那么该元素会浮在其html所在位置。看个例子，我将一个tr的CSS设置为"position: absolute;"：
<TABLE cellSpacing=0 cellPadding=4 border=1>
<TBODY>
<TR style="POSITION: absolute">
<TD>第一行</TD></TR>
<TR>
<TD>第二行</TD></TR></TBODY></TABLE><TEXTAREA id=code10 rows=4 cols=60><table border="1" cellpadding="4" cellspacing="0">
<tr style="position: absolute;">
<td>第一行</td>
</tr>
<tr>
<td>第二行</td>
</tr>
</table>
</TEXTAREA><BR>第一行浮在第二行上了，这个特性可以很方便的来制作重叠效果，例如我以前写过的自定义按钮和flash播放器都用到了这个特性来实现重叠：<BR><A href="http://www.cnforums.net/dotey/button/button.htm" target=_blank>自定义按钮</A>：一个自定义按钮，底下是一个普通的Button，利用"position:absolute;"在Button上面覆盖图片，这样看起来就像自定义按钮，而实际点击确是点击底下真实的Button（<A href="http://www.cnforums.net/dotey/button/button.rar">下载</A>）<BR><A href="http://webuc.net/MyProject/flashPlayer/Player.htm" target=_blank>Flash播放器</A>：这个播放器的进度条就是通过这种方法来重叠的。（<A href="http://webuc.net/MyProject/flashPlayer/flashPlayer.rar">下载</A>） </P></span>
<br />
<div style="font-size: 14px; line-height: 25px;"><strong>作者Blog：</strong><a id="ArticleContent1_ArticleContent1_AuthorBlogLink" href="http://blog.csdn.net/madein82/" target="_blank">http://blog.csdn.net/madein82/</a></div>
<div style="font-size: 14px; line-height: 25px; color:#900;"><strong>相关文章</strong></div>
<table id="ArticleContent1_ArticleContent1_RelatedArticles" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td>
<a href="article/50/50804.shtm">这些样式表，你都用过么？</a>
</td>
</tr><tr>
<td>
<a href="article/44/44836.shtm">浏览器滚动条的参数总结</a>
</td>
</tr><tr>
<td>
<a href="article/41/41288.shtm">ASP全程讲座~~呵呵 </a>
</td>
</tr>
</table>
</td>
</tr>
</table>
回复Comments
作者:
{commentrecontent}