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. 1. 块在一行显示；
   2. 行内属性标签支持宽高；
   3. 没有宽度的时候内容撑开宽度

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类型