重拾《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的习惯和“套路”。

发表评论

电子邮件地址不会被公开。

*