总结写DIV+CSS时常见的小问题

新手在用div+css进行网页设计和网页布局时，是否经常会遇到这些小问题，强人工作室就针对一些网页设计新手总结了以下几点写div+css时常会碰到的一些小问题，希望能给你们一些启发，div+css高手的请绕道~

1. ul和li属性的问题

默认的ul的内外补丁（margin、padding）都不是0，如果在li中用到的左漂浮属性（float:left;）时往往会把外部div撑大，导致页面变形，而且在ie6里，第一个li会有一个小小的缩进值，最终导致排版出问题。解决div层不被撑大时应将层的内外补丁设为0即可（margin:0;padding:0;），而解决第一个li有缩进值时则应该定义li为块状显示（display:inline;）即可

2. img属性的问题

这里牵涉的不同浏览器的问题，ie6是一直让网页设计师最头疼的一个问题。页面插入img时在ie6里有时图片显示的高度总是要大于准确值，这里不要忘了定义img显示属性：img{display:block;}

3. overflow属性的问题

此属性用的最多的地方就是文本域、注册协议等，因为文字篇幅比较大，但又不想占用大的页面篇幅，这里就可以定义好层的宽度和高度值，然后加上overflow:auto;属性。

4. float属性问题

有时会在水平方向上漂浮2个或2个以上的div层，都使用了float:left;属性，最终导致下面的层会漂浮到该水平方向上来，导致页面显示非常混乱，不注意的话在排错阶段也很难找出问题所在。对待float属性一定要谨慎，解决以上问题方法有二，第一是将这几个漂浮的层的父级层定义clear:both;属性；第二是将这几个层的宽度值加起来的值等于父级元素的宽度值，这样下面的层自然不会漂上来。

5. height值不统一

当height为1px时，在ie6中可能并不是1px而是超过1px，怎么解决呢？方法有两种，第一种是直接将该div层里的字号设为1px就可以了（font-size:1px;），第二种方法是在该div层里设置行高即可（line-height:1px;），但这里需要提醒下，在ie6里该层不能为空，可以写一个空格字符（ ）即可。

6. css编码问题

很多人写页面的时候习惯通过dw软件来创建一个html页面，但往往又忽略了其默认编码格式的设置，最终导致页面显示乱码。@charset "utf-8"注意这行代码，utf-8与gb2312是比较常用的两种编码方式，选择与之匹配的编码格式，避免出现乱码。

7. 关于选择器的选择（class和id）问题

当一个div要在页面中多次使用时，不要用id，要用class，还有就是要用引用js的时候，样式最好不要用id，因为id要留给js使用，当程序员写后台用的是.net时，最好不要用id，id要留给程序员用，前台我们就用class好了。

8. div层高度自动扩展问题

就是div层的结构很复杂，用了至少2个以上的div层，在定义好最小高及高度为自动，但最后超过层高度后导致在ff中显示为高度不自动扩展，解决ff不兼容方法很简单，只要加上：overflow:hiiden;即可。

9. 常用的兼容属性写法问题

这里具体实例不列出了，估计长篇大论的也没问会看，我就把常用到的兼容性属性列出来，具体灵活运用就靠自己啦！建议定义属性时书写顺序为FireFox在最前，其次是IE8、IE7，最后是IE6。

①!important属性只对ff生效，如：width:200px!important;width:100px;则ff里宽度显示为200px
②带“_”的属性只对ie6生效，如：color:red;_color:blue;则ie6里字体颜色为blue
③带“+”的属性只对ie7生效，写法如上
④ff什么都不识别，但样式中加上上述小符号，则优先对特定浏览器生效，例如css定义为：color:yellow;+color:blue;_color:red; 则输出效果为ff显示黄色，ie7显示为蓝色，ie6显示为红色


上海做网站上海便宜做网站上海低价做网站  www.sitezz.com

1、同意。一般来说小型网站使用*{ margin:0; padding:0;}即可。如果是大型网站考虑浏览器的执行效率，可以使用更加专业的清除外补丁和内填充的代码。
2、保留态度。如果使用display:block的话，是块状显示，如果我们需要的不是块状，那怎么办？一般来说，网站在使用装饰图片的时候，尽量使用背景图片。插入的内容图片，一般来说可以控制其外部的元素来控制大小。如果是文章内容中的。这点问题可以忽略。
3、同意。
4、同意。一般来说，在需要清除浮动的地方可以加上这个样式解决。.gehang { width:10px; height:10px; overflow:hidden; clear:both;}
5、保留态度。你这样的处理方法实在是繁琐。可以使用height:1px; overflow:hidden;来解决。
6、同意。
7、严重不同意！该用ID就用ID，该用CLASS就用CLASS。没有说CLASS走天下的道理。一般说来，固定区域使用ID，表现形式使用class。如header footer这些，使用ID会非常清晰，使用class让人摸不着头脑。另外，使用ID的优先级大于class，而解决IE6的A属性，则必须使用ID才能控制大小。（如，body里控制了链接大小而12像素，在后面如果用class来控制指定的A属性的文字大小，如果用class就必须把伪类写全，相当麻烦。如果使用ID，则可以使用#xxx a{font-size:14px}来直接控制。我们一般不会给所有的地方都加上ID，但是我们可以使用网页的BODY签名ID或者上级区域的ID来控制。非常方便。）
8、不明所以。。。一般来说，不设置高度即可-_-|||
9、除非必须，不推荐使用hack