页面重构的常用规范

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 {width:250px}
#news {
  padding:10px;
  border:1px solid;
}

(2)

#box{

width:300px;

}

#box div{

border:10px;

padding:50px;

}

(3)

<!--[if lt IE 6]>
<style type="text/css">
  #news {width: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;
  width:250px;
  width:228px;
}

所有的浏览器都会看到并理解“width:250px”，但IE 5.*/Win不会读取下面的一行，width: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来指定左侧导航栏的宽度，因为图片的宽度是不会发生改变的。