CSS的常见问题
1.css的编码风格
多行式：可读性越强，但是CSS文件的行数过多，影响开发速度，增大CSS文件的大小
一行式：可读性稍差，有效减少CSS文件的行数，有利于提高开发速度，减小CSS文件的大小
2.id和class
区别：1）同一个网页，相同的id只能出现一次，不可重复，而class可以任意出现多次
2）id的权重选择符权重为100，而class的选择符权重为10
3）原生JS提供getElementById（）方法，支持通过id对应到相关的HTMLLIElement，但原生JS不支持通过class对应到相关的HTMLLIElement
建议：尽量使用class，少用id
3.CSS hack:使CSS代码兼容不同的浏览器
1.IE条件注释法
只在IE下生效
<!--[if IE]>
<link type="text/css" href="test.css" rel="stylesheet">
<![endif]-->
只在IE 6下生效
<!--[if IE 6]>
<link type="text/css" href="test.css" rel="stylesheet">
<![endif]-->
缺点：将同一CSS选择符下的样式分散到三个文件夹去控制，增加开发和维护成本
2.选择符前缀法
原理：在CSS选择符前加一些只有特定浏览器才能识别的前缀，从而某些样式只有特定浏览器才能识别
例如"*html"前缀只对IE6生效，“*+html"前缀只对IE7生效
<style type="text/css>
.test{width:80px;} /*IE6,IE7,IE8*/
*html .test{width:60px;} /*only for IE6*/
*+html .test{width:70px;} /*only for IE7*/
</style>
选择符前缀法不能用于内联样式
缺点：向后兼容存在风险
3.样式属性前缀法
原理：在样式的属性名前加前缀，这些前缀只在特定的浏览器下才生效
例如"_"只在IE6下生效，"*"在IE6 和IE7下生效
<style type="text/css>
.test{width:80px;*width:70px;_width:60px;}
</style>
优点：比选择符前缀法聚合程度更高，代码更精简，可维护性很强
缺点：向后兼容存在风险
总结：IE条件注释法在理论上是首推的hack方法，但是它不利于开发和维护，所以事实上最流行的hack方式是选择符前缀法和样式属性前缀法，可以根据需要选择使用
4.解决超链接访问后hover样式不出现的问题
关于a标签的四种状态的排序问题，love hate原则：即l(link)ov(visited)e h(hover)a(active)te
5.hasLayout
是IE浏览器专有的属性，用于CSS的解析引擎。有时候在IE下一些复杂的CSS设置解析起来会出现Bug，其原因可能与hasLayout没有被自动触发有关，我们通过一些技巧，手动触发hasLayout属性就可以解决Bug了。
6.块级元素和行内元素的区别
块级元素：1.独占一行
2.宽度自动填满其父级元素宽度
3.支持所有CSS命令
行内元素：1.不会独占一行
2.相邻的行内元素会排列在同一行里，直到一行排不下，才会换行
3.宽度随元素的内容而变化
4.设置宽高属性无效
5.不支持上下的margin
7.display:inline-block和hasLayout
Inline-block的特点
- 块在一行显示；
- 行内属性标签支持宽高；
- 没有宽度的时候内容撑开宽度
1. 对于p标签设置display:inline-block，Firefox和IE 8都可以正常解析display:inline-block,而IE6和IE7不支持，考虑兼容性，必须舍弃这种用法
2.对于span，img，button标签，IE8和Firefox正常显示，IE6和IE7中span标签也有长宽，并且显示在一行内，display:inline-block并不是真的在IE6和IE7下生效，只是令span触发了hasLayout属性，其效果和设置zoom:1是一模一样的
实现IE6、IE7、IE8和Firefox都兼容的display:inline-block的应用，存在一些问题：
1.它只对行内元素实现display:inline-block;如果是块级元素就不行，限制我们只能使用行内元素的标签。
2.用到针对IE的hack,*vertical-align,这是不好的，能不使用hack就不要使用。
8.relative、absolute和float
文档流：z-index:0
relative特点：1.脱离文档流(z-index值大于0），但是会保留自己在z-index：0层的占位
2.如果没有定位偏移量，对元素本身没有任何影响
3.不影响元素本身的特性
4.提升层级
5.相对于自己在z-index：0层的位置进行定位
absolute的特点：1.完全脱离文档流，不会保留自己在z-index：0层的占位
2.相对于自己最近的一个设置了position:relative和position:absolute的祖先元素，如果祖先元素都没有设置position:relative和position:absolute，那么就 相对于body元素进行定位
float的特点：1.元素在z-index:0层排列
2.改变正常的文档流排列，影响到周围元素
注意：position:absolute和float会隐式的改变display类型，不论之前什么类型的元素（display:none除外)，只要设置了position:absolute和float：left或者float:right中的任意一个，都会让元素以display:inline-block的方式显示：可以设置宽高，块在一行显示，没有宽度的时候内容撑开宽度。就算我们显式地设置display:inline 或者display:block,也仍然无效，（float在IE6 下的双边距bug就是利用添加display:inline来解决）。position:relative不会隐式改变display类型
