DIV+CSS网页设计布局的八个问题[才子佳人博客，我的故事我讲述]

###SmallArticleTitle###

来源：xjh; 编辑：xjh; 2011-11-09

本文向大家描述一下DIV+CSS网页设计布局的八个问题，比如浮动的问题、定位问题、样式中类和ID的选择问题、浏览器兼容。

1.样式的重用性

对于布局要使用DIV+CSS,使页面中的结构与表现完全分离，结构位于html文件中，表现位于css文件中。

对于CSS文件的大小要控制,不能太大。可以对页面进行分类,来选择要包含的.css文件。

CSS布局的网页最大的特点就是样式的可重用性,利用class选择符重复将某个样式属性多次在网页中使用，以减少不断定义样式属性的烦琐工作，增加页面的可维护性。CSS里多使用Class少使用id(对于特定元素可以使用ID)。

2.浮动与清除浮动

浮动是网页布局中永远的话题，很多浏览器的兼容性问题都是因为浮动而导致的。浮动也是把双刃刀，兼容性的问题为其而产生为其而灭亡，善于利用浮动对于DIV CSS网页布局将会带来很到的帮助，例如使用负边距地方法对页面进行布局设计。

Float元素务必指定Width属性，很多浏览器在显示未指定Width的Float元素时会有bug。所以不管Float元素的内容如何，一定要为其指定Width属性。

清除浮动随浮动而出现，用来清理浮动导致的诸多问题。清除浮动的方式有很多。

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

3.定位方式的DIV CSS页面布局

定位方式的布局一般指的是绝对定位，这种布局方式对页面布局的设计精确性要求十分高，遗憾的是绝对定位的布局方式的盒模型是固定高和宽的，无法自适应，建议采用相对定位。

4.不要过多使用ID选择符

ID在一个页面中出现的次数是一次，过多使用将失去样式的可重用性的特征，对于页面的可维护性也将大打折扣。ID重复出现会导致javascript脚本行为控制失效。

5.类选择符(class)及ID选择符使用字母+数字方式命名

类选择符Class及ID选择符的命名方式很多,最好的方式是针对某个模块的功能命名，例如，对主要内容区域，可以使用#mainBox或者.mainBox而不是使用#box1或者.box1。

6.合理使用CSS布局，切勿盲目使用

对于要显示的表格数据，可以考虑使用Table表格,此时用DIV可能不合适。

7.是否重设了默认的样式

某些属性如Margin、Padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的Margin、Padding设置为0、列表样式设置为None等。如采用通配符*{ }实现。

8.DIV布局要考虑浏览器兼容的问题

要保证主流浏览器都支持,比如ie6、ie7、ie8和firefox等。

分类:网站设计 | 评论数:0 | 浏览数:106