《CSS那些事儿》读后感

这本书某些地方看起来并不是很严谨，有些小错，新手入门不建议选，有了基础再看不迟。

从《CSS权威指南》的谈原理，到《CSS那些事儿》的实例操作，从纸上谈兵到沙场实战，这是让自己得到质的飞跃必经阶段，阅读本书，就是一次不错的实践。

第1章讲的跟《CSS权威指南》有些重复，选择符、伪类、伪对象等；

第2章介绍Editplus编辑器，重点说了EP的语法、自动完成、用户组工具、模板、快捷键、剪辑，如果打算用EP作为编辑器的话，可以看一看。

第3章是关于盒模型的。
文中提到两点值得注意的：
①IE怪异模式的盒模型，其width(height)包含了border+padding；
②IE空标签具有高度的bug。
书中说引起怪异模式的问题来自DOCTYPE声明是否正确，这点有待验证，我是持怀疑态度的。

【IE空标签bug：对于空标签会带一个空的占位符，以默认的文字高度为基准。
解决方法为：
①在标签内嵌套一个空的行内标签，如<div><span></span></div>；
②或者加上样式{overflow：hidden}；
③或者采用font-size:0px 来解决；
④或者在DIV中加<!- ->注释；
⑤或者在DIV标签里加上
⑥设置height:0。
单纯的设置height或line-height是没有效果的。】

第4-5章为CSS的布局，这两章主要是两列、三列的布局实现方法。

【第4.3节中有个“右浮动+定位+负边距”的错误，制作demo时会发现，比较容易修改】

第6章是介绍文本样式。
这一部分如果是看过《CSS权威指南》的话，完全可以跳过，没有看的，建议去看看，比现在说的这本书更详细。
这里提到两种隐藏文字的方法：
①text-indent缩进9999px；
②line-height行高9999px。没有太多的新知识点。

【136页介绍font-weight，其中属性值“bolder”、“lighter”是相对级别关键字，并非书中所写的比normal粗或细，而是相对父元素的font-weight而言，比如，父元素定义font-weight为200，则bolder就是300，其中，normal相当于400。关于font-weight的具体介绍，建议看《CSS权威指南》比较好。】

第7章是图片处理。
三大内容：
①背景图优化，其实是讲jpg、gif、png的优劣；
②背景图的设置，也就是background各个属性值的介绍；
③CSS Sprite。

【176页讲background-position时，书中写用百分比值时以图片中心点为基准计算是错的，百分比值是同时指图片跟元素框的，比如，假设div元素宽高是200px，图片宽高是100px，则写background-position:30% 60%，是说图片从左上角开始往右30px，往下60px的这个点，跟div元素框相对应的点重合。这个相对应的点是：(200px×30%，200px60%)，即距div左上角水平60px，垂直120px。】

第8章是列表：无序列表ul、有序列表ol、定义列表dl。
这章内容很简单。我顺便补充两点：
①IE6的li里有浮动元素时，会多出一点小空隙，具体情况可以参考此文《IE6/7的Bug：纵向排列的li中加浮动元素产生向下3px的空隙》：http://blog.sina.com.cn/s/blog_6f6b4c3c0100w62d.html
②设置li的display:inline时，在FF里会出现水平方向上的空隙，最直接的解决方式是把<li>放到一行里，不要回车。不过最好还是改成float来处理吧，li本身是block元素，没必要非得把它改成inline元素。

【207页对<map>标签的说明是错误的，完全的望文生义了，<map>标签是图像映射，而不是书中所认为的“告诉浏览器该标签所包含的内容具有站点导航、地图性质的内容”。】

第9章，表单。
应该是多数人比较少接触的一部分吧，毕竟涉及到与服务器的通信。而且，表单元素的可控性较差，系统与浏览器之间的差异更让表单元素显得棘手起来。个人觉得，学习调教表单元素的最佳方法，就是上网扣好的代码研究。这一章有几个例子，初步实现表单的样式表现，可以跟着练一练。

第10章--表格，曾经风靡一时，如今却是风烛残年。表格很少用到，东西又多，没必要花大量时间研究，看个大概，在需要的时候查查手册就可以了。

第11章介绍两个CSS滤镜。
①透明滤镜，主要在于实现背景透明文字不透明，结果发现是，作者把背景跟文字分配到两个层，背景的那个层设置透明滤镜，然后发现我被耍了。
②AlphaImageLoader滤镜，解决IE6不能正常显示PNG-24图片的滤镜，不过貌似需要通过hack来保证各种浏览器显示的一致。
更多的滤镜就要靠自己了，下载CSS滤镜手册研究吧。
站内下载--[xhtml+CSS] [电子书籍] 样式表滤镜中文手册：
http://www.w3cfuns.com/forum.php?mod=viewthread&tid=2340&fromuid=1439

【滤镜的使用需要把握到哪个程度，希望有经验的童鞋能给个说明】

第12章，常见的tab选项卡。
这个很实用，推荐看看练练。
这章还提到一篇关于各浏览器对百分比取值处理的文章，
《百分比的细节--容器大小篇》地址：http://www.blueidea.com/tech/web/2007/4651.asp
你知道各浏览器对33%*123px最后取值多少吗？看看这篇文章会让你了解的。

第13章制作了一个简单的纯CSS相册效果，主要还是想让读者知道CSS的潜力。关键点在于a:hover的运用。文中提到IE6的一个bug：如果要使a:hover img生效，必须先设置改变a:hover的属性值。

第14章，分析了两种怪异导航效果的实现。
第一种不规则图形背景图，如梯形、菱形，例子我没做，因为我看完代码后感觉不实用，实现方式也不是很好。如果你做了的话，记得分享下心得。
第二种是有叠加出现，关键点在于相对定位换背景图跟负边距制造叠加效果，这一种代码量较少，也好看。

第15章新闻列表。
左边标题，右边时间，这就是新闻列表的常见形式。为了使在一固定宽度范围内，时间完整显示，标题多余字“隐藏”起来，利用了类似页面布局的方法，对标题添加右边距制造空白，对时间添加负的左边距使其拉进标题留的空白上。这个技巧应该掌握。

第16章幻灯片效果模拟，如果加上js脚本的话，可以实现轮播效果。这个是纯CSS实现，所以没轮播功能。这个效果利用页面内跳转的锚链接实现点击切换效果，有兴趣的可以跟着做做，很简单的。

第17章再谈浮动与清除。
CSS两大难点——定位、浮动，都是对文档流会有影响的，问的人特别多啊。浮动的控制简单，使用率最高，但造成的兼容性问题也是最多的。
记得自己一开始做网页时，到处可见的float，简直可以泛滥来表达了，初学者也往往容易陷入这个泥坑中，慎用float吧，童鞋们！——离题了。
这一章解释了浮动的原理和清除浮动的方法，辅助例子选得很恰当，讲解也浅显易懂。适合不了解浮动与清除或了解不透彻的人阅读。

第18章是制作一个活动页面的实例过程，我把这种页面称为专题页面。制作过程考虑了诸多因素，步骤也清晰，作者这种工作方式也是值得学习的。

附录内容就不说了，怎么学，还得靠自己，书里有句话说得好：不断的做，不断的想，不断的实践。这是成为大师的必经之路。

这本书讲的内容也就这么多，如果发现对某一方面感兴趣的可以下载电子书查阅。作者网站有该书的勘误表。阅读时遇到不理解的可以查查，但最好还是到w3cfuns论坛问问，能帮你的人更多。

最后，还有件事值得一提——养成正确的习惯。
本书对每个例子都遵循如下步骤：①分析原理；②输入基本、语义化的Html代码；③由外到内、由粗到细的美化，完成CSS样式表。
养成良好的习惯，能提高你的效率，别小看“习惯”，它会影响你一辈子。