omiga

html,body{overflow:hidden;}

html{}主要针对IE6，FF和IE7设置body overflow属性为hidden即可。同时亦可通过scroll属性禁用滚动条。将窗口滚动条禁用，而不是隐藏。但是通过JS控制scroll属性时，在IE6可能会失效～···所以建议还是使用overflow实现来隐藏滚动条。

呵呵，标题可能有点夸张了。但是aptana绝对是目前我见过的最好的javascript集成开发工具。虽然写js的时间很短，但是却一直为缺少一款方便高效的开发工具而郁闷不已，试过不少js开发工具，dreamweaver，editplus都用过，至少在JS方面大同小异，都不支持代码提示。除非你有相当丰富的JS开发经验，否则总会在DW或EP中写代码的时候感觉不够惬意。starer同学在找eclipse，小白同学给我推荐aptana，虽然有80多M，和我装的DW CS3差不多，但绝对没让我失望。不仅限于JS，还包括HTML，CSS都有完善的自动提示，补全，警示等功能。同时支持第三方(自定义)框架，这个我还没测试，但应该不假，而且操作极为简单。想想吧，以后你不必再一遍又一遍地去查阅冗长的AJAX或者JS框架文档了，只需简单一个鼠标动作，这些框架的语法定义全都集成在aptana的开发环境中了，多么幸福美好的一件事啊～···

aptana目前英文中文版都有了，我也才刚刚装上，很多东西还不是很清楚，所以呢就不多说了。实在是因为这个工具太棒了，忍不住要拿出来分享一下！

PS：aptana对中文支持不好，我已经彻底放弃了！

CSS3在现在看来似乎还是遥遥无期，我也一直想找份比较全面的CSS3中文资料，无赖偌大个互联网，竟然没找到一篇全面点的，大多只是只言片语。那就自己来吧，今天让我们一睹CSS3的芳容！

多色边框 colored border

多色边框的创建，目前Firefox支持。颜色显示顺序按定义顺序从内到外。

-moz-border-top-colors:#F80 #F90 #FA0 #FB0 #FC0;
-moz-border-right-colors:#F80 #F90 #FA0 #FB0 #FC0;
-moz-border-bottom-colors:#F80 #F90 #FA0 #FB0 #FC0;
-moz-border-left-colors:#F80 #F90 #FA0 #FB0 #FC0;

不支持-moz-border-colors的写法。

查看演示

图像填充边框 border-image

允许对边框进行图像填充，熟悉PS的应该比较能够容易理解。目前只有Safari支持此属性（下载Safari for windows）。填充方式有平铺方式(round)和伸展方式(strentch)。

-webkit-border-image: url(img/border.gif) 6 6 6 6 round round;

查看演示

圆角边框 border-radius

在CSS2时代圆角边框的设计方法有很多，但是相对来说都比较麻烦，css3彻底解决这一问题。在CSS3圆角边框的构建只需一句简单的CSS代码即可。同时支持对某一个角设置圆角。Firefox，Safari目前均已支持此属性。

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

查看演示

投影 box-shadow

CSS3.info称该属性是css3中最优秀的一个属性(Box-shadow, one of CSS3’s best new features)。该属性的确减少了大量的设计工作，以后的阴影效果只需CSS代码就可实现。该属性有4个参数，第一个数值为投影的水平偏移距离，第二个数值为投影的垂直偏移距离，第三个为投影的模糊范围，最后一个为投影颜色。目前仅Safari支持此属性。

-webkit-box-shadow:10px 10px 10px #888;

查看演示

背景大小 background-size

自定义背景图像的现实尺寸。Opera，Safari和Konqueror皆支持该属性，Firefox不支持。

-o-background-size: 200px 150px;
-webkit-background-size: 200px 150px;
-khtml-background-size: 200px 150px;

查看演示

多重背景 Multiple backgrounds

为对象定义多个背景，各背景之间以逗号分隔。Safari，Konqueror均支持该属性。

background:url(img/bg_1.jpg) left top no-repeat,
url(img/bg_2.jpg) left bottom no-repeat,
url(img/bg_3.jpg) right top no-repeat,
url(img/bg_4.jpg) right bottom no-repeat;

查看演示

文本投影 text-shadow

该属性在CSS2中就被写入，但是目前只有Safari和Opera支持。其语法与box-shadow相似。

text-shadow:2px 2px 2px #000;

查看演示

文本溢出 text-overflow

可选属性值：clip，ellipsis，ellipsis-word。该属性在IE6+版本，以及Opera中有较好的支持。

text-overflow:ellipsis;

查看演示

自动换行 word-wrap

该属性本是IE的专用属性，被写入CSS3。主要用于解决长单词的自动换行，可选值normal，break-word。IE，Safari支持该属性，firefox不支持。

word-wrap:break-word;

查看演示

变化尺寸 resize

鼠标拖动改变对象大小。可选值：none | both | horizontal | vertical | inherit。Safari，Konqueror支持。

resize: both;

查看演示

外边框 outline

与outline-offset属性一起使用用于设置对象外边框。Opera，Safari和Firefox均支持该属性。

outline:2px solid #F03;
outline-offset:15px;

查看演示

高级属性选择器 Attribute selectors

属性选择器其实CSS2就有定义，并被用来作为css hack方法，因为IE6及以前版本并不支持属性选择器。CSS3中对属性选择器进行了扩展，其功能引入类似正则表达式模式。目前IE7，Firefox，safari，Opera均支持高级属性选择器。

div[id^="my"]{ color:#C00;}
div[id$="http"]{ color:#00F;}
div[id*="other"]{ color:#000; text-decoration:underline;}
div[id~="other"]{/*------*/}

查看演示

CSS3的新属性还有很多，部分属性目前没有任何浏览器支持，故在此不作讨论。也有部分浏览器已经支持的属性也未涉及，诸如HSL colors，HSLA colors，opacity，RGBA colors，background-origin，background-clip…诸多属性均未言及。本文内容主要参考自CSS3.info以及w3c，在此只为抛砖引玉，小作介绍，详细信息还请移步至上述两网站。

这个问题发现很久了，还是在暑期改版的时候一个页面中的问题。由于当时我的IE6绿色版有些问题，并没有出现这个bug，后来在网吧的IE6上才发现这个问题。 产生该bug需满足两个条件：

1. 浮动的仅是<embed>标签，外层并无<object>
2. 相邻浮动容器中的字符不能包含在内联元素中

产生bug的主要代码：

<!--
body{font-size:12px;}
#container{width:900px; margin:0 auto;}
h1{text-align:center;}
p{text-indent:2em; line-height:18px;}
-->
<h1>关于使用浮动&lt;embed&gt;产生重复字符的问题</h1>
<div id="container">
<object width="100" height="100" data="abt.swf" type="application/x-shockwave-flash">
<param name="src" value="abt.swf" /><param name="wmode" value="opaque" />
<param name="quality" value="high" />
</object>
<div id="content" style="margin: 0pt 15px 15px; width: 645px; float:right;">
这个问题发现很久了，还是在暑期改版的时候一个页面中的问题。由于当时我的IE6绿色版有些问题，并没有出现这个bug，后来在网吧的IE6上才发现这个
问题。产生该bug需满足两个条件：浮动的仅是<embed>标签，外层并无<object>相邻浮动容器中的字符不能包含在内联元素中。
<p style="color:#F00; font-size:14px; font-weight:bold;">大家注意看，本段文字的最后一个字符将在下一行重复显示</p>
</div>
</div>

点击查看代码演示 如上所述，产生该bug的条件，其实也隐含了解决此bug的部分方法。故解决此bug至少有以下方法。

• 使用严格的嵌套方式插入flash，可以使用<object>嵌套，或是在外层嵌套其他标记，只要不让<embed>浮动即可；
• 相邻文本嵌套在内联元素中；
• 在文本字符后添加HTML注释，即<!—->；

以下代码为使用注释方式修复此bug：

<!--
body{font-size:12px;}
#container{width:900px; margin:0 auto;}
h1{text-align:center;}
p{text-indent:2em; line-height:18px;}
-->
<h1>关于使用浮动&lt;embed&gt;产生重复字符的问题</h1>
<div id="container">
<object width="100" height="100" data="abt.swf" type="application/x-shockwave-flash"><param name="src" value="abt.swf" /><param name="wmode" value="opaque"
/>
<param name="quality" value="high" />
</object>
<div id="content" style="margin: 0pt 15px 15px; width: 645px; float:right;">
这个问题发现很久了，还是在暑期改版的时候一个页面中的问题。由于当时我的IE6绿色版有些问题，并没有出现这个bug，后来在网吧的IE6上才发现这个
问题。产生该bug需满足两个条件：浮动的仅是<embed>标签，外层并
无<object>相邻浮动容器中的字符不能包含在内联元素中。
<p style="color:#F00; font-size:14px;font-weight:bold;">大家注意看，本段文字的最后一个字符将在下一行重复显示</p>
<!--修复IE6浮动embed产生重复字符bug-->
</div>
</div>

点击查看代码演示 该bug本应该从一开就被避免，只是由于我使用了

<embed src="abt.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="opaque" menu="false" style="width:225px;height:335px;float:left;"></embed>

在页面中插入flash，所以实际中这个问题出现的几率应该是非常的小，发文志之。

使用div+css（姑且这样叫，虽然我也不喜欢，但是叫什么呢？）布局的好处不用多说，经常性地会使用到float，那么清除浮动就是必须要做的，而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。

常用的清除浮动的方法有以下三种。

此为未清除浮动源代码，运行代码无法查看到父级元素浅黄色背景。

*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}

查看完整Demo

1、使用空标签清除浮动。我用了很久的一种方法，空标签可以是div标签，也可以是P标签。我习惯用<p>，够简短，也有很多人用<br>，只是需要另外为其清除边框，但理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动，并为其定义CSS代码：clear:both。此方法的弊端在于增加了无意义的结构元素。

*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
.clr{clear:both;}

查看完整Demo

2、使用overflow属性。此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可！”zoom:1″用于兼容IE6。

*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;overflow:auto;zoom:1;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}

查看完整Demo

3、使用after伪对象清楚浮动。该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。

*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{ background:#FF9;}
#layout:after{display:block;clear:both;content:"";visibility:hidden;height:0;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}

查看完整Demo

此三种方法皆有一定弊端，使用时应择优选择，比较之下第二种方法更为可取。以上方法，并非原创，皆来源于网络，在此小作整理，原作者保留所有权利。

2009.06.02低调更新：

这篇日志总结出来一年有余了，我很高兴的看到已经被广为转载（据说有很NB的），虽然很多同学们都没有说明是转载我的，但是你们对此文毫无保留的copy还是让我们一眼就看出来了。我之所以一年之后来更新一次，不想说别的，只想说，我原文中有错误啊！你们就这样直接给整过去了，会害死人的啊！害不死人，害死花花草草也不好啊～···

错误更正：

3、使用after伪对象清楚浮动。该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的 伪对象中设置height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候 content属性的值设为”.”，但我发现为空亦是可以的。

我很惭愧地说，我在一年半前，把举世闻名的clearfix方法是写错了的，因此我才得出了clearfix方法只兼容非IE浏览器的结论。IE中是需要zoom属性来清除浮动的。所以正确写法是这样的：

*{margin:0;padding:0;}body{font:36px bold; color:#F00; text-align:center;}
#layout{zoom:1; background:#FF9;}
#layout:after{display:block;clear:both;content:"";visibility:hidden;height:0;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}

演示页面已经更新了。

关于这三种清楚浮动的方法，严格说来并不存在孰优孰虐的问题，每种方法都有优缺点。原来就指出来了，但是当初比较的结论我现在也想更正一下：第二种方法是其实是最不省心的，第一种方法是最放心的，clearfix介于两者之间！