overflow属性有四个值：visible (默认), hidden, scroll, 和auto。同样有两个overflow的姐妹属性 overflow-y 和overflow-x，它们很少被采用。

Visible

如果你不设置overflow属性，则默认的overflow属性值就是visible。所以一般而言，并没有什么理由特别的设定overflow 的属性为visible除非你想覆盖它在其它地方被设定的值。

这里需要记住的重要的事情是，尽管盒子外面的内容是可见的，内容并不会影响页面的工作流。比如：

一般来说，你至少不用为里面的内容为文字的盒子设置固定的高度，这样就不会遇到这种情况了。

Hidden

默认值visible的相反的值就是hidden。它会将所有超出盒子的所有内容都给隐藏掉。

这对应付使用动态的内容，而且可能会由于内容溢出而引起一些布局上的问题的确很有用。尽管如此，请记住用此方法隐藏的内容将彻底的看不到(除非去查看源代码)。 比如有的用户设置他们的浏览器的默认字体比你预期的要大些，你会将一些文字推到盒子的外面然后完全的隐藏之…

Scroll

设置一个盒子的overflow值为scroll将会隐藏掉渲染到盒子之外的内容，但是它将会提供一个滚动条在盒子内部滚动，从而可以查看剩下的内容。

值得注意的是，使用scroll将会同时产生水平和垂直两个滚动条，就算内容只需要其中一个。

Auto

overflow的auto值很像scroll，它唯一解决的是在你不需要的时候也会出现滚动条的问题。

清除浮动

设置overflow的一个更流行的用处是，说也奇怪，清除浮动。设置overflow并不会在该元素上清除浮动，它将清除自己(self- clear)。意思就是，应用了overflow(auto或hidden)的元素，将会扩展到它需要的大小以包围它里面的浮动的子元素(而不是叠了起来(collapsing))，假设未定义高度。就像这样：

跨浏览器的烦恼

就像CSS中的很多东东，overflow有很多的跨浏览器的蹊跷的事情。比如这些：
滚动条在盒子里面还是外面?

firefox将其放到盒子外面，而IE则将其放到里面。我认为只有IE是对的(它应该在里面的)。

看清楚这个明显的不同。

IE 8 扩展盒子的bug

IE8有很多有趣的新bug，包括一些非常严重的隐藏在网页中的。这里有更多的关于IE8的overflow的bug的介绍。

破坏浮动布局

IE 6, 7 和 8都会扭曲默认的overflow visible值并将水平的扩展一个盒子一匹配内容(比如图片)。 这对使用浮动列布局的结构非常痛苦，而且单个扩展的列就能够将其它列挤下去并使布局乱掉！

滚动条能用CSS控制吗？

IE过去在较老的版本中允许这样，但是之后就收敛了。比如许多表单元素，滚动条就不允许使用CSS控制。我在它是否是件好事情上没有任何具体的意 见，但是我可以说，在网站的所有内容上使用滚动条是很丑陋的和俗气的。如果你需要一个美化的滚动条，你或许需要寻找javascript来模拟。

IE 技巧

无论是否需要，IE都会一直显示一个垂直的滚动条，这对预防水平跳动是有些作用的，但并非总是可取的。要想在IE中移除它，可以在body元素中设置overflow为auto。

演示:

本文的演示页面，可以查看这个页面。

英文原文：The CSS Overflow Property
中文译文：CSS Overflow 属性

1. 检查html元素是否有拼写错误、是否忘记结束标记

即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。

2. 检查CSS是否书写正确

检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。

3. 用删除法确定错误发生的位置

如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。

4. 利用border属性确定出错元素的布局特性

使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。

5. float元素的父元素不能指定clear属性

MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。

6. float元素务必指定width属性

很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。
另外指定元素时尽量使用em而不是px做单位。

7. float元素不能指定margin和padding等属性

IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性（可以在float元素内部嵌套一个div来设置margin和padding）。也可以使用hack方法为IE指定特别的值。

8. float元素的宽度之和要小于100%

如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

9. 是否重设了默认的样式？

某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。

10. 是否忘记了写DTD？

如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下DTD声明。

CSS：

img.shadow {
            background: url(shadow-1000×1000.gif) no-repeat right bottom;
            padding: 5px 10px 10px 5px;
}

2、双边框效果
这应该是目前最常见的技巧，我们通过以下方式创建说边框。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/doubleborder.htm

HTML：

CSS：

img.double-border {
    border: 5px solid #ddd;
    padding: 5px; /*Inner border size*/
    background: #fff; /*Inner border color*/
}

3、图片外框效果
webdesignerwall.com上有最好的讲解，这个效果是基于在上面层叠一个有透明度的图片的技术。至于IE6的PNG透明度问题，可以参考这篇教程。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/framed.htm

HTML：

CSS：

.frame-block {
    position: relative;
    display: block;
    height:335px;
    width: 575px;
}
.frame-block span {
    background: url(frame.png) no-repeat center top;
    height:335px;
    width: 575px;
    display: block;
    position: absolute;
}

4、水印效果
你可以通过降低主图片的透明度来让背景图片透过来显示的方法添加水印。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/watermark.htm

HTML：

CSS：

.transp-block {
    background: #000 url(watermark.jpg) no-repeat;
    width: 575px;
    height: 335px;
}
img.transparent {
    filter:alpha(opacity=75);
    opacity:.75;
}

5、为图片添加说明文字
使用绝对定位和透明度的设置来添加灵活的说明。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/caption.htm

HTML：

    
    Salone del mobile Milano, April 2008 - Peeta

CSS：

.img-desc {
    position: relative;
    display: block;
    height:335px;
    width: 575px;
}
.img-desc cite {
    background: #111;
    filter:alpha(opacity=55);
    opacity:.55;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 555px;
    padding: 10px;
    border-top: 1px solid #999;
}

HTML 5草案的前身名为Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案发布。 HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同，HTML 5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。那么我们来看一下HTML5的技术概览有哪些：

HTML5新增和移除的元素

HTML5新增了很多多媒体和交互性元素如video, audio，在HTML4当中如果要嵌入一个视频或是音频的话需要引入一大段的代码，还有兼容各个浏览器，而HTML5只需要通过引入一个标签就可以，就 像img标签一样方便。在页面布局和内容实现方面HTML5新增了很多结构化标签元素以及块级及语义元素，如果你要用HTML表示一个文件的上传进度条， 在 HTML5中你可以用progress这个元素来表示，它有一个value属性描述了已经完成了多少任务，还有一个属性max描述了这个任务一共需要多 少，还可以通过DOM接口得到这个进度条的position属性(只读)，也就是任务完成的百分比。Youtube在HTML5技术上已经做了一个尝试，http://www.youtube.com/html5(需要翻墙) 是用HTML5做的一个DEMO，从整个页面源代码来看，非常简洁。当然HTML5也对一些元素新增了一些属性，如input和textarea的 placeholder属性，相当于输入框的输入提示，script有一个async属性会影响脚本的加载和执行。对于所有的HTML共有的属性我们通常 把它称作是“全局属性”，如class, id, tabindex, title，HTML5也新增了一些全局属性，如contenteditable, contextmenu, hidden等属性。HTML5还增加了对于微数据的支持，如HTML5新增的item, itempro, subject等属性。

当然HTML5也移除了一些表示页面展现的元素，如font, center, strike等，这些本应该是CSS来做的，所以还是很好理解的，也移除了一些影响网站可访问性的元素如frame, frameset, noframe以及一些不常用的元素如acronym，而采用abbr来表示缩写。HTML5还移除了一些影响客户端兼容性的HTML熟悉，如link的 rev属性，td的scope属性；HTML5也移除了一些表示页面展现的属性如一些元素的align,bgcolor属性。

HTML5对表单的支持

HTML5 提供了强大的控件类型如url, email, date, tel等，强大的约束属性，如required表示必填，文件上传的accept属性，以及一些表单重复元素模型的支持，HTML5在提交表单的时候还可 以设置提交的方式为XML提交方式，这样服务器端接收到的数据将是XML格式，HTML5的表单被定义为“Web Forms 2.0”，目前opera9.5+对Web Forms 2.0的支持较为完美。

点此查看Web Forms 2.0 DEMO，需要Opera9.5+

HTML5 DOM变化

HTML5在DOM LEVEL 2 HTML方面很多都是继承自HTMLDocument的接口，当然HTML5在DOM上也有一些值得注意的新成员，如：支持 getElementsByClassName，可以根据class类名选择元素，getSelection()将会返回当前选中的对象，在选择器上面有 两个方法querySelector和querySelectorAll可以根据 css选择符来获取要查询的元素，相当于YUI3中的Y.one和Y.all。

HTML5的Javascript APIs

HTML5在Javascript上面新增了哪些API呢？

• Video/Audio: HTML5为Video和Audio提供了API来让开发者控制他们自己的用户界面，如可以播放或暂停媒体内容。
• Canvas: Canvas是一个新的HTML元素，这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做 简单的(和不那么简单的)动画。Canvas是一个神奇的东西，它给我的第一感觉就像是在用Photoshop一样，它的每一个方法跟Photoshop 是那么地相似，通过canvas.getContext(’2d’)就可以得到这个canvas的API，你可以通过fillStyle设置其填充颜色或 是通过strokeStyle设置其描边颜色，甚至它画路径的操作跟Photoshop的钢笔操作更是不谋而合。Canvas在很多网站都已经有应用，如Firefox的实时下载状态统计，甚至还可以用canvas来编写Web Game。
• Drag&Drop: 在指示设备的视觉媒体中，”Drag”的操作就是鼠标按下(mousedown)并伴随着鼠标移动(mousemove)的事件，而”Drop”则是鼠标 释放时触发的事件。在Drag&Drop里定义了DataEvent和DataTransfer接口，同时当拖拽操作发生时会触发如 dragstart, dragenter, dragleave, drop, dragend等事件。
• Web Workers: 让Javascript多线程，可以在后台做很多工作而不会阻断当前的浏览器操作。
• Geolocation: 地理位置定位，运行navigator.geolocation.getCurrentPosition(success,error)这个方法时浏览器 会提示是否要共享你的地理位置，如果选择共享，则会回调success函数，success函数有一个参数是position对象，这个position 对象有一个coords对象，coords对象包含了很多地理位置信息如latitude(维度)和longitude(经度)，这样就可以知道你的具体 位置了，这个功能在一些手机如Iphone上已经有广泛的应用了。
• Application Cache: 这是HTML5对于离线应用的支持，通过在html元素上加一个属性manifest，浏览器会提示你是否要将数据缓存到客户端，如果用户选择了允许，则 会按照指定的manifest文件列表缓存需要的文件，当你的网络不可用时，你还是可以使用这个应用的。对于离线应用，Google也开发了Google Gears浏览器扩展，不过最后Google转投HTML5可能也是看到了HTML5存储和离线应用的这种优势。
• Storage: Webkit已经实现了database storage，你可以像后端操作数据库一样查询数据并执行一些操作。还有一种存储是键值对存储，如sessionStorage和 localStorage，可以通过setItem和getItem来存储与获取值，相对于Cookie的存储来说，存储的容量要大很多。
• X-Document Messaging: 浏览器因为安全和隐私的原因，阻止了不同域之间文档的通信，虽然这是一个安全限制，但是对于那些没有危害的不同域的文档通信带来了很多问题，但是 HTML5可以实现这种跨文档通信，让我们可以不用管源域是来自哪里，同时可以防止脚本攻击。

HTML5让你心动了吗？那么HTML5什么时候会成为标准呢？据说要等到2022年，这有一个很有意思的网站http://ishtml5readyyet.com/告诉你还有多少天HTML5会真正到来。

点击查看HTML5 DEMO，需要Firefox3.5+/Safari4.0+

CSS3

CSS3对于我们Web开发者来说不只是新奇的技术，更重要的是这些全新概念的web应用给我们带来更多无限的可能性，也极大地提高了我们的开发效 率。我们将不必再依赖图片或者Javascript 去完成圆角、多背景、用户自定义字体、3D动画、渐变、盒阴影、文字阴影、透明度等提高Web设计质量的特色应用。

CSS3在选择器上面的支持

利用属性选择器我们可以根据属性值的开头或结尾很容易选择某个元素，利用兄弟选择器可以选择同级兄弟结点或紧邻下一个结点的元素，利用伪类选择器可 以选择某一类元素，CSS3在选择器上的丰富支持让我们可以灵活的控制样式，而不必为了选择某些元素给他们加上如”odd”或”even”这样的类名。

CSS3在样式上的支持

有一个调查说开发者最期待CSS3的特性是什么，最后票数最多的是“圆角”，不错，圆角这个功能可以给我们这些前端工程师省去很多时间和精力去切图 拼凑一个圆角。CSS3还支持阴影，盒阴影以及文本阴影，渐变，之前你可能是通过IE的滤镜看到过，其实CSS3实现起来更加方便。@font-face 可以自定义字体，如果用传统的方式，VD把一个带有特殊文字的设计图给你让你来实现的话你可能会把它做成一个图片，而通过CSS3用@font-face 就可以了。CSS3对于连续文本换行也新增了一个属性word-wrap,你可以设置其为normal(不换行)或break-word(换行)，这解决 了连续英文字符出现页面错位的问题，也不需要后端去截取这个连续字符。使用CSS3你还可以给边框加背景，这在iphone上也有应用的例子。CSS3在 背景上支持背景调整大小，如当你用一张大图要做一个小的元素背景时可以通过background-size来调整背景图的大小来适应这个元素。CSS3支 持opacity, rgba和hsl/a, opacity和rgba的区别是opacity设置的透明对其内容也会产生影响，而rgba只对你应用的元素产生影响。CSS3在布局上对于盒模型提供 了支持，可以设置box-sizing为content-box或border-box，应用为content-box就是正常的模式，而应用为 border-box和IE5.5的盒模型很相似，即元素的宽度包括border和padding，这个在布局上可能会比较方便，不用去管到底这个元素会 占用多大的宽度，而用content-box还需要手动计算一下这个元素实际占用的宽度。

CSS3对于动画的支持

CSS3支持的动画类型有：transform(变换)、transition(过渡)和animation(动画)。你可以对特定的属性设置 transition，transiton和animation的区别不大，animation的动画是自己定义的，面向的更多的是脚本开发者，往往更加 复杂。

为了使用大部分CSS3特性，我们不得不与原来的属性一起使用生产商专有扩展。原因是直到现在，大部分浏览器只支持部分CSS3属性。最常见的私有 属性是用于Webkit核心浏览器的(比如, Safari)， 它们以-webkit-开始，以及Gecko核心的浏览器(比如, Firefox)，以-moz-开始，还有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它们自己的属性扩展（目前只有IE8支持-ms-前缀）

那我们在开发中该如何去用CSS3呢？

我觉得首先是遵循一个优雅降级的原则，比如前面谈到的圆角，我们可以针对Firefox和Safari等这些支持圆角的浏览器中应用CSS圆角，而 那些不支持CSS圆角的浏览器则显示为直角。其次就是对于不支持CSS3的浏览器可以使用Javascript来实现，如CSS3任何元素支 持:hover伪类，我们就可以对只支持链接:hover的IE6用JS来实现。最后就是在向用户或老板推广新技术的同时也要关注他们的目标与可行性，不 能为了技术而技术。

点击查看CSS3 DEMO，需要Firefox3.5+/Safari4.0+

先晒下我最近项目中的雪碧↓

考虑本博的图片限制，图片进行了处理，还请大家谅解!

再晒下网络上的↓

1.基础
牛顿是站在巨人伽利略的肩膀上的，我们也可以这么做。首先我们要选定一个前进的基础。
请永远不要使用

* { margin: 0; padding: 0; }

这问题太多了，在此不多加表述。

目前比较流行的有Eric Meyer的重置样式和YUI的重置样式。另有Condensed Meyer Reset简化Eric Meyer的样式。有趣的是，Eric的重置样式也是源于YUI的。而那份简化版又把Eric的样式简化回YUI的样式了。但同时，糟糕的是，网上流传的比较广的(尤其是国内)都不是最新的版本。上面两个页面里直接看到的都不是最新的，Eric专门为有一个 reset.css页面。而YUI当前版本(2.7.0)的reset.css实际地址里，比上面的页面中还多一些东西。此外，我们还可以基于一些常见的框架，比较著名的比如Blueprint或者Elements CSS Framework（这个的reset也是源自于Eric Meyer的）。OK，准备工作就差不多了。以上这些都可以作为参考资料来组织我们自己的reset。我这里主要采用YUI，兼带Eric的reset。

2.默认色彩
对于页面是不是有默认背景色和前景色，YUI和Eric有着不同的看法。
YUI重置背景色为白色而文字颜色为黑色。

html {
color: #000;
background: #FFF;
}

而Eric在当前最新版中让所有颜色为透明，他认为透明才是最原始的颜色。虽然他曾一度认为也应当设置白色背景色、黑色文字颜色。至于最后为什么改了，Eric并没有给出具体理由。

这个问题我基本认为是用户自定义的更重要还是你的设计更重要的问题。我个人的观点是，如果你的设计本身就是白色背景，那么不要设置背景。一小部分中高水平的用户，他们会自定义网页默认背景色。设置成他们喜欢的背景色，比如浅蓝色。基本常见的浏览器都提供了这个简单的功能。而我们的背景色重置则会破坏用户的选择——尽管这样能保证你的设计原汁原味的呈现给所有用户。当然我知道，更高端的用户会用Stylish之类的 Firefox扩展来自定义页面。但不得不说，只会用“选项”来调背景色的用户更多，不是么？而同时，如果设计本身就有其他背景色，比如黑色、蓝色、绿色之类的，OK，这些设计当然可以设置背景色。但请不要放进reset.css里。这里是重置样式的地方，不是你设计的地方。请把你的设计放在更广袤的土地上。
所以，简单说来，NO，不要在reset中设置背景色。

那么，文字颜色呢？原则上来说，也是不应该设置文字颜色的。但是IE中的表单元素中legend这个对象比较特别，跟主题结合的比较紧密。legend会默认有自己的颜色（跟当前的主题有关）而不会继承父元素的颜色（即便设了color:inherit;）。
从某些角度来说，可以想当然地认为设置字体颜色人数远小于设置背景色的人数；以及认为就算设置了背景色，人们看到legend元素是黑色的也不会觉得奇怪。因此，YUI在其reset中设置了legend {color: #000;}是无可厚非的。
但反过来说，把这个放到typography.css或者form.css里岂不是更好？不同的页面设计，其对legend的色彩要求很可能是不同的，放在reset.css里重复定义是没有必要的。因此这条CSS规则可以作为在reset.css之后首先应当设置的规则。

3.padding和margin
曾经一度流行的* { margin: 0; padding: 0; }也就是出于这个目的。让各个元素的padding和margin都归零，尤其是那些h1和p以及ul/ol/li之类的元素，还有，body本身也是有 margin的。清除元素的padding和margin是很有用的。
YUI这样做：

body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}

而Eric这样做：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

可以看到，Eric把几乎所有的元素都写上了规则。而YUI只把有padding和margin的元素清空样式，而其他元素则不动。我个人比较偏好YUI 的做法，因为他这样可以避免给一些无关元素带上不必要的样式。导致元素过多时的性能下降。但Eric的也有可取之处，他这样写，整个reset.css可以小上不少字节，对服务器的压力会小一些。但进一步想，这种做法跟用 * 来选择所有元素还有什么区别呢？这已经几乎囊括了所有元素了！你怎么用呢？看你自己喜好了。

4.边框
YUI里：

fieldset, img {
border: 0;
}
abbr, acronym {
border: 0;
font-variant: normal;
}

Eric已经在上一条中把所有的边框都清掉了，还是推荐用YUI的，理由同上。

5.外边框(outline)
这个就是元素获取焦点时的虚线框，在ie之外的浏览器上可以像下面Eric做的那样，通过设置outline来消除。

/* remember to define focus styles! */
:focus {
outline: 0;
}

而YUI则没有设置这一条。而在Eric的样式中，可以看到Eric的提醒：务必重新定义获取焦点后的样式！
这点其实很重要，出于可访问性的角度出发，那些不便于使用鼠标的人基本上都是用tab导航来浏览网页的。获取焦点的元素有特定样式的话可以极大帮助这类群体的用户，通常建议设置成跟:hover一样。经常设计上会因为这个虚线框而大打折扣。因此这条保留在reset中，并且作为reset.css之后及早定义的规则。

另外，对于在Firefox之类的支持outline的浏览其中，除了获取焦点的元素外，浏览器本身并没有给元素设置outline属性，所以，像Eric那样把所有元素的outline设成0，我就觉得没有太大必要了。

6.字体样式(font style/weight/size/variant)
YUI里，分成了多条：

address, caption, cite, code, dfn,
em, strong, th, var, optgroup {
font-style: inherit;
font-weight: inherit;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
abbr, acronym {
border: 0;
font-variant: normal;
}

input, button, textarea,
select, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}

/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
*font-size: 100%;
}

Eric则在他最终版的reset中去掉了关于这些的样式重置，只保留了 font-size: 100%; 同样他没有给出具体理由。
但通常情况下，我认为还是重置一下这些样式好，比如strong元素，很多时候只是语义而已，并非希望他真的加粗。可能会有背景色或者其他方式来强调。而之所以这里都用了inherit这个继承属性而不是定义 font-weight: normal; 可以在 Eric 先前的reset文章中看到。这是为了防止——父元素字体加粗了，而没有一个子元素继承加粗属性（因为设置了normal）——这种情况的发生。所以把 YUI中设置h1-h6的样式以及abbr和acronym的两句样式都改成inherit会比较好。

此外，对于h1-h6的字体大小定义，建议放到专门的typography.css里，不建议放在reset.css里。所以这里我同样倾向于用YUI的策略，全部重置。

但是很不幸，在ie6/ie7当中，不论是strong还是h1-h6,亦或是em等元素，设置了inherit均无法继承父元素属性，依然保持自己的特色。这就带来了浏览器差异，样式重置本身是为了避免浏览器差异的，但现在带来了浏览器差异，是万万不可取的。对于这个问题我考虑了很久，到底是为了统一所有浏览器都重置成normal（YUI的想法），还是放弃重置这些元素，让他们顺其自然，来保证在所有浏览器中样式一样（Eric的想法）。我最后决定采用YUI的做法。因为，无论重置成normal还是不重置，这些元素都无法继承父元素属性。既然如此，那么退而求其次，保证这些元素都恢复到普通外观，避免在设计的时候还要重置样式。
不得不说，这种妥协是仅仅针对IE6和IE7的，也许在5年后，老板和客户都不要求支持IE7的时候，我们可以放心大胆得使用inherit了。

此外，YUI并没有给code kbd samp tt 这几个元素重置字体大小。但实际上在IE中，他们都会被缩小显示。所以此处应当给予重置font-size: 100%;

7.行高(line-height)
对于行高，YUI并没有给出重置定义，而Eric则给出了重置：

body {
line-height: 1;
}

行高默认所有元素都会继承的，所以给body设置行高为1就足够了。通常行高设为1时候，英文照常阅读，但中文就无法阅读了，行间距过于紧密导致容易看错行。通常在中文环境下得设置1.4到1.5才能是用户正常阅读。我建议是1.5，这样算出来的值也是整数。比如字体大小12px的时候行高是18px，字体大小16px时行高24px。看起来也会比较舒服。此外，还有一个不设置成1的重要原因是：IE下，行高为1时，中文字顶部会被削掉几像素，字体加粗时尤为明显。所以，重置的原则是好的，但切不可重置为1。

8.列表样式
YUI用了：

li {
list-style: none;
}

Eric用了：

ol, ul {
list-style: none;
}

尽管我没有测试出YUI的有什么问题，但我始终觉得设置ol和ul会比较稳妥。而且，波及的元素更少，性能应该更高一点。虽然下载量会多3字节。

9.表格元素
在表格方面，都比较统一。均是：

/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

Eric还提醒到，需要在html中设置cellspacing=”0″ 来达到完美重置效果。
但此外YUI还设置了

caption, th {
text-align: left;
}

让caption和th元素不要居中。作为重置，是可取的。建议添加此规则。

10.上下标以及baseline
YUI写成

sup {
vertical-align: baseline;
}

sub {
vertical-align: baseline;
}

似乎没有优化，不知道为何没有写到一起去。而Eric则在最开始那条中就已经定义。而其中的问题是，YUI这样定义了，但没有重置字体大小，这点是有所遗憾的。既然是重置样式，就彻底一些，所以建议改成这样的：

sup, sub {
font-size: 100%;
vertical-align: baseline;
}

同样对于Eric把所有元素都放到了Baseline上，包括上标下标。Eric的解释是，强制让设计师精确定位这些元素的垂直偏移。
11.插入和删除(ins/del)
对于这个问题，YUI直接清除了ins的下划线和del的删除线这两个文本装饰：

del, ins {
text-decoration: none;
}

而Eric保留了删除线：

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

如何取舍？我选择Eric的，为什么我这里不追求完美的样式重置了呢？很简单，我这个reset的目标是为了让我们写页面的时候尽量避免浏览器默认样式，以及不同浏览器之间默认样式差异带来的问题。而del元素删除线的文本装饰，我相信没有人会反对的。有人会加上其他样式，比如字体变淡之类的，但对于 del如此强语义的元素来说，没有什么比用删除线更能表达含义的了。而不像上面那个focus样式，未必人人喜欢虚线框。但似乎又没有什么浏览器默认不给 del元素加删除线，故这条可以省略。
所以，这里我只重置ins样式，别忘了给ins元素在等下也添加一些样式。

12.引用元素的引号
某些浏览器中，q或者blockquote前后会出现引号。这个并不是谁都喜欢的。所以需要重置他。
YUI的比较简单，只重置了q：

q:before,
q:after {
content: ”;
}

而Eric则比较周到，把q和blockquote都重置了。

blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}

OK，就决定用Eric的了，对于样式重置，细致一点周到一点总没有错。

13.链接
对于链接，YUI和Eric都没有采取样式重置，但从我思考许久后还是决定把链接样式重置放进来。究其原因，还是因为样式重置一来要彻底，二来对于链接样式并非所有设计师都喜欢用下划线装饰。因此，我还是建议把链接的下划线重置掉。

a {
text-decoration: none;
}

但这样做有点粗糙。真正有下划线样式的其实只有 :link和:visited所以改成下面这样比较好：

:link, :visited {
text-decoration: none;
}

此外，对于链接颜色，可以作为reset后急需设置的规则来处理。直接放入reset.css中不是很合适。

14.我的重置样式
总结上面种种规则，这里给出一下我的CSS重置规则，BSD协议发布，请随意使用。测试样本（这个是从YUI那里复制过来的，感谢YUI为此做出的贡献。）
下载：reset.css reset-min.css

/*
Copyright (c) 2009, Shawphy(shawphy.com). All rights reserved.

http://shawphy.com/2009/03/my-own-reset-css.html

Based on YUI http://developer.yahoo.com/yui/reset/
and Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
Licensed under the BSD License:

http://creativecommons.org/licenses/BSD/

version: 1.1 | 20090303
*/

body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
fieldset, img {
border: 0;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
address, caption, cite, code, dfn,
em, strong, th, var, optgroup {
font-style: normal;
font-weight: normal;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
abbr, acronym {
border: 0;
font-variant: normal;
}

input, button, textarea,
select, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
code, kbd, samp, tt {
font-size: 100%;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
*font-size: 100%;
}
body {
line-height: 1.5;
}
ol, ul {
list-style: none;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th {
text-align: left;
}
sup, sub {
font-size: 100%;
vertical-align: baseline;
}
/* remember to highlight anchors and inserts somehow! */
:link, :visited , ins {
text-decoration: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}

15.完成一个初步的CSS框架
之前提到了，样式重置作为一个所有项目可以使用的共性存在，而不同的项目应当有其个性。当然还有其他一些共性，不属于样式重置的部分，但同样重要。再往下讲就可以做一个CSS框架了。CSS框架所要考虑的内容远比一个CSS Reset要考虑的多很多，这里只是点到为止，不做更多展开。

layout.css
首先除了reset.css之外要建立的layout.css，这里目前主要推荐放入.clearfix。清除浮动很重要。但这不属于样式重置，放在布局当中正合适。

.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

此外，layout.css中还可以放入自己常用的布局，比如 #wrap{margin:0 auto;width:960px;}之类的规则。看个人喜好而定。

typography.css
这里可以放置很多规则，非常重要的是以下三个：
:focus, a, ins
这三个是被重置掉的，但又很重要的内容，建议在reset之后立即在typography中设定全站样式，保持样式统一。
ins可以单独设置， :focus 最好设置成跟 :hover一样，而a的样式还是按照LoVe,HAte的法则来设置。

h1-h6系列也是之前被重置掉的。可以考虑在这里设置样式。按站点特性来定。我个人是不喜欢全局定义hx系列的字体大小的，统一为100%我觉得挺好。

接下来要设置的是font-family属性，可以参考射雕的文章。另外，小麦的文章中提到，表单元素的字体在IE中都不能继承父元素的字体，所以要单独设置。

至于其他需要全局设置的，可以参考前文中的叙述，找到相应的部分添加到typography.css中即可。这样就可以在保证reset.css通用性的情况下，使不同的项目又有个性。尽量保证reset.css在所有项目中都是一样的。有利于项目的开发。最后不要忘记在写表格的时候加 cellspacing=”0″ 来达到完美重置效果。

16.样式下载
注：reset-min.rar为压缩过的重置样式表。

reset.rar

reset-min.rar

1.属性为0

书写原则是如果CSS属性值为0，那么你不必为其添加单位(如:px/em)，你可能会这样写:

padding: 10px 5px 0px 0px;

优化为:

padding: 10px 5px 0 0;

2.背景(background)

背景(background)属性可能会包含设置背景色、背景图、背景图的位置和背景图重复方式的参数，你可能会写成:

background-image: url(”logo.png”);
background-position: top center;
background-repeat: no-repeat;

优化为：

background:url(logo.png) top center no-repeat;

3.颜色(color)

颜色(color)属性在CSS通常指定为一个十六进制的值,一个#加6位数，他的简写方式是如果颜色值由成对儿出现的三对而数字组成，你可以省略掉没对中的一个数字。

　　#FFFFFF 可以写成 #FFF, #336699 可以写成 #369;

这种简写技巧只适用于成对出现的颜色值，其它颜色值不适用这种技巧，比如:

　　#010101, #F20000, #FFF000

4.外边距/空白边(Margin)/内边距(Padding)

声明CSS magin值得时候通常会写成这样:

margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;
———————————-
padding-top:0px;
padding-right:10px;
padding-bottom:0px;
padding-left:10px;
优化为：

margin:0 10px 0px 10px;

padding:0 10px 0px 10px;

当你生命padding、margin、border(还有一些其他属性)时，记得要把按照顺时针的方向来声明属性值，也就是按照上-右-下-左的方向。关于这些属性还有另一个更加简单的写法，看看属性中上和下、左和右是否值是相等的，如果是那么就可以进一步优化了，你可以省略掉后两个值，剩下的两个值前者指上下，后者指左右:

margin:0 10px;

padding:0 10px;

5.边框(Border)

边框的简写方式相比其它生命来说会比较复杂，很多CSSer一开始都容易记混它的简写顺序，如果你想声明一个1像素宽的实线黑色边框，可能会写成:

border-width:1px;
border-style:solid;
border-color:#000;

优化为：

border:1px solid #000;

注意:这里的颜色值已经使用了上面讲过的颜色简写方法了哦。

我们还可以为四个边设置不同的宽度:

border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;

优化为：

border: 1px 2px 3px 4px;

6.文字(font)

文字属性也有很多可能会用到的属性值，像背景一样，你可能会声明这种复杂的文字样式:

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5;
font-family:宋体, Arial, sans-serif;

优化为：

font:italic small-caps bold 12px/1.5 宋体, Arial, sans-serif;

7.公有属性(public)

一般大家可能会这样写：

ul { margin:0; padding:0; }
li{ margin:0; padding:0; }
img { margin:0; padding:0; }

优化为：

ul,li,img { margin:0; padding:0; }

希望以上的编写技巧，能够让你的css代码简洁不少。

欢迎转载：注明出处,”UED,紫枫-80後” ，珍惜他人的劳动成果！^-^

下面是一张样图：

本文的目的并不是讲CSS Sprite如何让一个网站更快，而是说一些使用CSS Sprite的时候的一些最佳实践。

不要等到你完成切片之后才开始sprite.

如果你边切图边写CSS，然后等你完成了整个网站之后再来拼接这些图片到一个Sprite中，你就不得不完全重写你的CSS，你也必须要花费很多的时间来用PS拼接大量的图片——这是件令人倍感纠结的事情。但是如果边切图边整合，就会比较容易些。

把图片放到它要显示的地方的相对的地方

这个小技巧貌似比较难理解。我直到创建一个比较大的sprite的时候才理解到这一点。比如，如果我们希望一个图片出现在一个元素的左侧：

将那个图片放到sprite图片的右边(本文开始的那个sprite图片)。这样的话，当你通过CSS移动背景图片的位置的时候，基本上不可能有其它的小图片意外的出现在它的附近。使用Sprite的时候常常遇到的一个问题是图片会出现在它不该出现的位置。

定位时避免使用bottom或right等

当使用CSS sprite的时候，只用background-position: bottom -300px或background-position: right -200px;非常容易。这刚开始的时候是可行的，但是问题是，当你在宽度上或高度上扩展相关sprite图片的时候，原先设置的位置可能是错的，因为那个图片已经不再Sprite图片的底部或右部了。使用确切的位置来避免这个问题。

给每个图片足够的空间

就像你在本文顶部的实例图片看到的那样，那些小图片都被预留了足够的空间。为什么不把他们塞到一块来让sprite图片更小呢？ 因为使用这些图片的元素通常都会有大量的内容而且可能会需要扩展的间距，以至于其它图片不会意外出现。

例子：

例子中的每个条目都有个带数字的图片作为背景图片。如果你仔细看了上面的那张图片，你可以看到这三个数字图片是如何错开排列的，这样如果内容增多，其它图片就不会意外出现。

不用担心Sprite图片的像素大小

如果你的网站经过良好的设计，那么你将会有一大堆的图片来整合进到sprite里面，这样你就需要你个非常大的sprite来恰当的放置这些图片。这是很不错的。sprite里的空白不会占用太多的文件大小。

1. 隐藏图片

《img src=“1.jpg” style=“display： none” /》

结论：只有Opera不产生请求。

注意：用visibility： hidden隐藏图片时，在Opera下也会产生请求。

2. 重复图片

《img src=“1.jpg” /》

《img src=“1.jpg” /》

结论：所有浏览器都只产生一次请求。

3. 重复背景

《style type=“text/css”》

.test1 { background： url（1.jpg） }

.test2 { background： url（1.jpg） }

《/style》

《div class=“test1”》test1《/div》

《div class=“test2”》test2《/div》

结论：所有浏览器都只产生一次请求。

4. 不存在的元素的背景

《style type=“text/css”》

.test1 { background： url（1.jpg） }

.test2 { background： url（2.jpg） } /* 页面中没有class为test2的元素 */

《/style》

《div class=“test1”》test1《/div》

结论：背景仅在应用的元素在页面中存在时，才会产生请求。这对CSS框架来说，很有意义。

5. 隐藏元素的背景

《style type=“text/css”》

.test1 { background： url（1.jpg）; display： none; }

.test2 { background： url（2.jpg）; visibility： hidden; }

《/style》

《div class=“test1”》test1《/div》

结论：Opera和Firefox对于用display： none隐藏的元素背景，不会产生HTTP请求。仅当这些元素非display： none时，才会请求背景图片。

6. 多重背景

《style type=“text/css”》

.test1 { background： url（1.jpg）; }

.test1 { background： url（2.jpg）; }

《/style》

《div class=“test1”》test1《/div》

结论：除了基于webkit渲染引擎的Safari和Chrome，其它浏览器只会请求一张背景图。

注意：webkit引擎浏览器对背景图都请求，是因为支持CSS3中的多背景图。

7. hover的背景加载

《style type=“text/css”》

a.test1 { background： url（1.jpg）; }

a.test1:hover { background： url（2.jpg）; }

《/style》

《a href=“#” class=“test1”》test1《/a》

结论：触发hover时，才会请求hover状态下的背景。这会造成闪烁，因此经常放在同一张背景图里通过翻转来实现。

注意：在图片no-cache的情况下，IE每次hover状态改变时，都会产生一次新请求。很糟糕。

8. JS里innerHTML中的图片

《script type=“text/javascript”》

var el = document.createElement（‘div’）;

el.innerHTML = ‘《img src=“1.jpg” /》’;

//document.body.appendChild（el）;

《/script》

结论：只有Opera不会马上请求图片。

注意：当添加到DOM树上时，Opera才会发送请求。

9. 图片预加载

最常用的是JS方案：

《script type=“text/javascript”》

new Image（）.src = ‘1.jpg’;

new Image（）.src = ‘2.jpg’;

《/script》

在无JS支持的环境下，可以采用隐藏元素来预加载：

《img src=“1.jpg” style=“visibility： hidden; height： 0; width： 0” /》

总结

对于隐藏图片和隐藏元素的背景，Opera不会产生请求。

对于隐藏元素的背景，Firefox也不会产生请求。

对于尚未插入DOM树的img元素，Opera不会产生请求。

基于webkit引擎的Safari和Chrome，支持多背景图。

其它情景，所有主流浏览器保持一致。

对图片请求的处理上，个人觉得Opera走在前列。

—————————————————————————————————————————

以上总结了那么多，主要的一点，是让大家明白，浏览器请求一张图片的速度，比请求多张要快，大大提高页面下载速度。所以，我们可以把页面用到的所有图片放在一张大的透明图上面，通过css里面的background位移来定位图片。

先看下实例：

QQ腾讯官网：

网易163：

新浪博客：

以上官网都是利用了背景图片定位技术。

看看他们怎么实现的。
/*
#def div,#s1 div,#s2 div,#s3 div,#s4 div,#s5 div,#s6 div,#s7 div,#s8 div,#s9 div,#sar div
{background-image:url(http://mat1.gtimg.com/www/iskin09/skinbt.png);background-repeat:no-repeat;}
#def div{background-position:0 0;}
#s1 div{background-position:0 -11px;}
#s2 div{background-position:0 -22px;}
#s3 div{background-position:0 -33px;}
#s4 div{background-position:0 -44px;}
#s5 div{background-position:0 -55px;}
#s6 div{background-position:0 -66px;}
#s7 div{background-position:0 -77px;}
#s8 div{background-position:0 -88px;}
#s9 div{background-position:0 -99px;}
*/

参考“CSS背景属性Background详解”

写个demo给大家看看。。

演示效果：

demo

只看代码：

欢迎转载：注明出处,”UED,紫枫-80後” ，珍惜他人的劳动成果！^-^