1 CSS简写规则，font-size和font-family为必须指定的项
2 对一个标签写样式时，可以用多个类表示不同的属性，不一定非要写在一个 类里面，特别是对于页面数比较多且写在一个样式表里面的，容易使后面的样式覆盖前面的，也不利于优化和重构。页面中引用样式表和一个样式表都是后面的覆盖前面的。
3 border的默认值为3-4个像素，如果这就是你需要的宽度，那么不需要设置。
4 IE浏览器是不认识！important的，所以它还是按照2的规则进行显示
5 一些重要的文本使你必须使用访问者电脑里没有的字体库，那么这时候用图片会更好，但是从SEO的角度来讲，即使你对图片标注了alt属性，蜘蛛对它的重视度与文本还是不可同日而语，因此，可以使用<h1><span>my heading</span></h1>
h1{
background:url(images/myheading.jpg);
}
span {
position:absolute;
left：-1000px;
}
使真正的文本跑到页面外去，即保证了美观，又有利于搜索引擎优化
6 IE浏览器的盒式模型
IE会把某些元素的border和padding不算在div内，解决这种问题的方法有几种，按推荐的有强到弱：
(1)
<div id="sidebar">
<div id="news">
...
</div>
</div>
为父容器（sidebar）设置宽度来达到效果：
#sidebar {250px}
#news {
padding:10px;
border:1px solid;
}
(2)
#box{
300px;
}
#box div{
border:10px;
padding:50px;
}
(3)
<!--[if lt IE 6]>
<style type="text/css">
#news {250px}
</style>
<![endif]-->
如果你打算使用这个方法，我建议将全部的针对IE 5.*/Win的代码都转移到一个单独的CSS文件中来加载它：
<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" href="/css/ie5.css">
<![endif]-->
(4)hack
#news {
padding:10px;
border:1px solid;
250px;
228px;
}
所有的浏览器都会看到并理解“250px”，但IE 5.*/Win不会读取下面的一行，228px，但这行会被其余的浏览器解析。所以最后，IE 5.*/Win得到的width值是250px，其他浏览器得到的是228px。这样，在全部的浏览器中我们的新闻列表的总宽度就一致了。
7 margin：0 auto可以将任何元素居中显示，但是IE6之前不行，必须在其父元素中规定text-alige:center,再在该元素中指定text-align为left
8 vertical-align:middle在表格中很有用，但是在CSS布局中就很可能会失效，解决这个问题的方法就是将盒的line-height设为跟盒的height一样高就行了。
9 父元素采用relative，子元素的任何定位都是相对于父元素的边界
10 解决左边导航栏的背景问题，只有使用一样颜色图片然后repeat-y，但是这个方法并不是很好，因为这样不能使用em来指定左侧导航栏的宽度，因为图片的宽度是不会发生改变的。