重拾《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的习惯和“套路”。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |