DIV + CSS 布局的几点体会

这个周末，白天接待彩虹，晚上研究网页设计到很晚，总算搞清楚了几个问题。有点累，倒也值得。

IE计算div的宽度，通常会忽略margin、border和padding的宽度属性，而Safari、Firefox不会。为了保持布局跨浏览器的一致性，必须在网页的head里面加上一段!DOCTYPE声明。

另一个涉及跨浏览器一致性的布局问题是li标记的list-style，在Firefox里面被解释得比较奇怪。务必留意。

学会了嵌套DIV情况下，如果让外层div的高度自适应子div的高度。这种情况经常出现在两列布局情况下。比如一列Blog正文，一列Sidebar。往往这两列都不可能正好等高，所以它们的背景就会出现高差，如果你不希望看到结果，最容易的解决办法就是把这两列div放置到一个外层的div当中，而用这个外层div的背景来替代列背景。但在普通情况下，这个外层div并不会如我们所愿——它并不会自动适应子div的高度。
解决这个问题的关键有两点：
第一：在子div中使用float属性；
第二：不指定浮动层的position属性。

多重Style的问题。虽然目前Firefox已经支持这个CSS官方要求的特性，但实际使用的时候，遇到的问题还是不少。IE和Safari根本就不支持，如果要实现用户选择Style，就得用script来处理。script还不够，比如在一个Blog里面，用户选择了“风格二”，但他在点击链接、评论或存档文件之后，或刷新之后，又回到了缺省页面——那么又得加上Cookie来存储用户选用的那个风格表……真是麻烦啊！
所以如果我要使用多重风格，我就只会简单地在页面告诉用户：如果你想使用多重风格，请使用Firefox浏览本页。
这样算是为Firefox做广告吧？呵呵。

多重风格必须要建立在DIV+CSS基础上。如果靠Table布局，改改颜色、字体什么的没问题，但做不到比如交换左右两列的位置之类的变化。
另外一个要点：把你能想到的所有内容都用div做出来。如果在某个风格里，你不想显示某些内容，很简单，用display:none把它们隐藏就好了。