重拾《CSS权威指南》

第一次看《CSS权威指南》已是两年前的事了，记得当时是想通过此书对CSS有个系统的了解。现在，再阅此书，希望我能继续有所收获。 记录下似曾相识或者根本记不得的知识点。

一、知识点

1.替换元素与非替换元素

替换元素指元素的内容部分不是由文档内容直接显示的，像img元素靠的是src、input元素取决于type类型。 反之为非替换元素，绝大多数都是非替换元素。

2.伪类

细分下，:link和:visited是应用于超链接的伪类，以及:focus、:hover和:active是动态伪类，以前这块都是一起记的。

还有:first-child以及:lang()。

3.伪元素

4个，分别是:first-letter、:first-line、:before和:after，前两个基本忘了。

4.继承

继承都是从祖先元素继承到后代元素上，唯有应用到body元素的背景样式可以传递到html元素上。

5.长度单位

绝对长度单位：英寸(in)、厘米(cm)、毫米(mm)、点(pt)和派卡(pc)。绝对单位在定义打印文档的样式表时更有用，在Web设计中往往不是最佳的做法。

相对长度单位：em、ex和px。

em和px的关系在博客上也有对应的文章，不过这儿谈到了在手机上长度的显示，这儿还需通过其他途径研究下。

url() 中url和括号之间不能有空格，记得media query中左括号前必须有空格，刚好相反。

6.字体

font-weight是可以继承的。font-size也是可以继承的，会计算取整后给后代元素继承，要考虑下取证错误。

text-indent只能作用与块级元素；line-height是可以继承的。

vertical-align只能应用于行内元素和替换元素，如图像和表单输入元素，且不能继承，不会影响块级元素中内容的对其。基线是1/4em处，图像中心点是1/2em和1/4em之间。当我们给vertical-align设置百分比是按照行高计算的，使元素按照基线上移或下移。 white-space用于处理空白符，会影响文档中的空格、换行和tab字符的处理。

7.基本视觉格式化

没有设置高度（或padding、border）的块级元素，计算高度时会忽略子元素的margin（仅接近父元素的那层）。

块级元素（行内块级元素）或行内替换元素都是有width和height属性的。宽高不能作用到行内非替换元素。

行内块元素自动调整宽度大小。

8.内边距、边框和外边距

给子元素的宽高边距设置百分比时，都是参考父元素的宽高（非定位元素）。

上下边距不能改变行内非替换元素的行高（左右会生效），能改变的只有line-height、font-size和vertical-align。

元素的背景会在外边框边界处停止，因为背景不会延伸到外边距以内，而边框就在外边距内部。

9.浮动和定位

一个元素浮动时，其他内容会“环绕”该元素。

要浮动一个非替换元素，则必须为该元素声明一个width，否则该元素的宽度会无限趋于0。

浮动元素的外边距不会合并。

10.表布局

由于有两种不同的方式可以得到表的宽度，因此用table-layout来选择用哪种方法计算表的宽度。固定布局：fixed，自动布局：auto（默认）。

利用display: table-cell外加vertical-align: middle属性可以实现垂直居中。

11.用户界面样式

轮廓（outline）不参与到文档流中，不会影响布局，他只可能覆盖外边距。

二、总结

一些不常用的属性并没有去关注，要用的时候，去查询下，很快会记住的。像media-query也没去看下，准备放到CSS3中一并看了。

CSS2中较常用的属性都有了更进一步的了解了，不过这个与能写出一流H+C是不成正比的。需要的还是不断的尝试和敲代码，不断的形成自己写CSS的习惯和“套路”。