CSS读书笔记（一）

这是开通blog后的第一篇随笔，争取养成勤于记录的好习惯，进入正文，精通CSS 高级Web标准解决方案（第二版）自认为是一本非常不错的css教程，借同事的已经读过几遍，每一遍都会有新的收获。

1.子选择器、相邻同胞选择器

　　IE7以及更高版本的IE，FF,Chrome等浏览器都支持这两个选择器。

　　子选择器：IE6可以通过后代选择器进行模仿，例：

　　　　#nav>li{/*li样式*/}

　　　　IE6:#nav li{/*li样式*/ } #nav li *{/*重写样式*/}

　　相邻同胞选择器：

　　　　h2 + p{

　　　　　　/*为h2相邻的P元素应用样式。*/

　　　　}

　　在IE7中这两个选择器会有bug，如果父元素和子元素之间有HTML注释，就会出问题。

2.伪类

　　:link和:visited称为链接伪类，只能应用于锚元素。:hover、:active和:focus称为动态伪类，理论上可以用于任何元素。大多数浏览器都支持这个功能。但是，IE6只注意应用于锚链接的:active和:hover选择器，完全忽略:focus。IE7在任何元素上都支持:hover,但是忽略:active和:focus。

3.属性选择器

　　包括IE7的现代浏览器都支持属性选择器。然而，由于IE6不支持属性选择器，可以利用这一点对IE6应用于另外的样式。

　　#header{

　　　　/*For IE6*/

　　}

　　[id="header"]{

　　　　/*For other browser*/　　

　　}

4.字号继承问题

　　如果将主体的字号的值设置之后，页面所有的内容应该是会继承的，但是在IE 和 Netscape在继承表格中的字号方面有问题。解决办法：必须指定表格应该继承字号，或者表格上单独设置字号。

5.IE6的非标准盒模型

　　在IE6中width属性不是内容的宽度，而是内容、内边距以及边框宽度的总和。（CSS3中的box-sizing属性可以定义要使用哪种盒模型，但是除了一些非常特殊的场合很少使用这个属性）

6.z-index属性只有在设置了绝对定位的元素才会生效。

7.background-position的用法。

　　background-position:left center;

　　background-position:100px 100px;

　　background-position:20% 20%;(这里的20%是指将图像上距离左上角20%的点定位到父元素上距离左上角20%的位置)

　　最好不要将像素或百分比等单位与关键字混合使用。