CSS学习总结

最近学习了CSS，现将一些收获归纳如下：
1.在网页设计中，要减少标签的嵌套。一般先根据要设计的网页分好层次和结构，尽量少用class 和 id选择符控制样式。
2.一般网页设计中避免使用table布局，使用div+css布局。这样容易控制每个层得样式。
3.将页面的非数据图片跟数据图片分离，非数据图片使用css控制。
我是这样做的将页面的非数据图片通过使用div的背景显示到页面上。如果是数据图片，就使用js通过img显示到页面上。
4.将页面上的小图标，使用ps将其做到一个图片上，然后使用css控制显示。因为页面上每个地址就相当于一个请求，这种小图标的数量大，如果分开显示就会给页面多了好多请求，另外如果一个图标作为一个文件，那样整个图标加起来所占的大小比一个文件大的多，这样做也减少了浏览器的开销。在页面中我是这样实现的。
先设置一个跟要使用图标大小的div。例如：<div class="icon1"></div>
//css代码
.icon1{
width:x;//图标的宽
height:y;//图标的高
background：url(iconUrl);//这个地址是所有集合到一起的图片的地址。
background-position:x1 y1;//x1、y1分别为图标在整合到一起的大的图片上左上角的坐标
}
5.div padding画线。
    一般像网页上的边框线，都是通过两个div层叠，通过下面的div的背景padding画的。我们一般开始做网页对于一些边框线，首先想到的是用border属性控制，但是每次不管怎么调，总是感觉线太粗了，或者感觉总是凹进去一些。如果将border设置为none，在所要划线的元素外面，添加一个背景div，将div的大小设置的跟元素一样，上下左右的padding的大小就是要设置的边线的大小，这样画出来的线，虽然名义上不算是边框，但是看起来要漂亮的多，当然如果能够很好的控制border的属性，那也是很好的事情，但是我试了多次，都没达到我要的效果。还有一方面，如果将一些元素放到div里面，我觉得在页面上好控制一些。
6.浏览器的兼容性问题。
    一般我们平时处理这些问题的时候，都是针对于IE6、7、8和火狐。由于各个浏览器遵循的标准有差异，所以在一些显示效果上有差异，但是IE提供了一些符合来避免
这些问题，比如：“\9”、“*”、“_”，这些符号只在IE的特点浏览器里可以识别。比如“/9”、IE8、IE7、IE6都可以识别的，而火狐不可以识别，如果是IE和火狐不兼容的问题，一般现在火狐中调好，然后把相同的属性再在其后面设置一下，然后再在其后面加个“/9”,例如：
padding:10px; //火狐中
padding:5px\9;//IE中可以识别，firefox不能识别
    一般情况下IE8和firefox都是兼容的，差异性最大其实就是firefox和IE7、IE6的不兼容问题。“*”是IE7和IE6都能识别的符号，一般是加到属性前面，也是在firefox和IE8下
调试效果，然后换IE7、IE6。例如：

padding:10px; //火狐中
padding:5px\9;//IE中可以识别，firefox不能识别
*padding:3px; //IE6、IE7都可以识别，IE8、firefox都不能识别
对于IE7和IE6的不兼容问题处理的方法同上，只是得用“_”,也是加到属性前面，例如：
padding:10px; //火狐中
padding:5px\9;//IE中可以识别，firefox不能识别
*padding:3px; //IE6、IE7都可以识别，IE8、firefox都不能识别
_padding:1px; //只要IE6可以识别，其他的都不可以识别
/*以上属性的值，我是随便设置的，具体的值，要根据调试的情况设置，我只是为了说明处理兼容性问题的方法*/
按照上面的方法设置了，基本上每个浏览器都能达到预期的效果了。
7.对于IE6中，float属性设置为left时，margin加倍的问题，只要将div的display属性设置为inline就可以了。

以上是我在这段时间学习css时，最常遇到的问题，也是我在这段时间学习的收获，写出来总结一下，大家要是有什么新的问题或者我有什么不对的地方，欢迎讨论和指正。