css知多少（1）――我来问你来答

1. 引言

　　各位前端或伪前端（比如作者本人）的同志们，css对你们来讲不是很陌生。比如我，在几年之前上大学的时候，给外面做网站就用css，而且必须用css。这样算下来也得6年多了，有些功能可能驾轻就熟，有些功能可能需要上网查查，看似能应付得了工作的事情――我之前也是（现在工作上不做开发了，只是业余还写代码）。

　　世界上没有绝对简单的东西，只是我们认为它是简单的。就像我们公司现在的开发情况，开发的大环境刚刚转入B/S，开发领导之前都是用.net做C/S的，在我看来，他们就觉得js、css就是那末回事儿，没多精深。但是我还是抱着畏敬的态度，买了1本《CSS设计指南（第3版）》，不管自己会的，还是不会的，我都统统看1遍。书邮回来以后，我花了3个晚上看完了。我有个习惯，就是做1件事情1定要又1个结果，不能觉得自己头脑里明白了就算了，1定要写出来，乃至做出例子来才算完。因而乎，就写几篇博客呗。利己利人。

　　下面我把在看书进程中遇到的自己认为比较重要的（掌握不牢固）或之前不懂的，都先列出来，出几个题目，各位看官可以试着想一想。如果您都会了，那您基础很牢固，没得说；如果你有些不会的，着急你就赶快自己查查答案，不着急你就等着我后面的博客介绍。

　　闲话说了很多，现在开始！

2. 问题

　　01. 有些阅读器不完全支持css3，现在可以用哪一个工具去检测阅读器是不是支持，和支持哪些项？

　　提示：Mo****zr

　　02. 经常使用的html标签，它们的display属性1般默许为block和inline。有哪些经常使用标签的display不是block和inline，这些标签显示的时候和block/inline有何区分？

　　提示：table，input, textarea

　　03. 是不是用过@import？

　　（比较简单）

　　04. 1个表格的第1行显示红色背景，最后1行显示蓝色背景，中间行使用灰色/白色间隔的背景，如何写？

　　提示：结构化伪类（比较简单）

　　05. 伪元素 ::before、::after 是不是用过？都是在哪些地方用的？

　　提示：清除浮动、为1个div增加1个“3角”  重要 

　　06. css――层叠样式表，其中的“层叠”该如何理解？  重要 

　　提示：层叠，即1层1层叠加起来，关键是知道1共有几层，每层都是甚么

　　07. 对“特指度（specificity）”了解多少，知道“I-C-E”的计算规则吗？  重要 

　　提示：参考http://www.cnblogs.com/netlyf/archive/2009/06/19/1506427.html

　　08. 特指度理解不是很麻烦，关键是分析多个css选择符和计算麻烦。有1个简单的解决方案，4句口诀，叫做“查理版简单层叠要点”，是不是了解？  重要 

　　提示：例如，“包括ID的选择符要胜过包括类的选择符...”

　　09. 搜索“阅读器默许样式”，找到它，打开看看，里面是阅读器默许的所有样式，你是不是都能看得懂。 重要 

　　提示：例如 display:table 和 display:block 有何区分？

　　10. 在你开发的系统的第1个css文件的第1行，就要写上 * {margin:0; padding:0} ，这是为什么？

　　提示：阅读器兼容性（比较简单）

　　11. 样式 p{margin-top:50px; margin-bottom:30px;} 将会致使p之间的垂直距离是多少？

　　提示：垂直外边距……水平外边距……――比较简单的基础知识

　　12. “盒子模型”大家都了解了（不知道赶快去恶补！！），盒子模型的width实际上是指内容的宽度，不包括padding、border、margin。其实这样对我们做css布局是很不利的，有甚么方法可让width是全部的宽度？  重要 

　　提示：box-sizing（注意IE低版本的兼容性）

　　13. float的1些影响会让我们常常哭笑不得（特别是初学者），其实了解了float的设计初衷，或许你就会理解这些东西。float的设计初衷是甚么？

　　提示：就简单的1句话……

　　14. float具有“包裹性”――例如：<p>abc</p> 和 <p style='float:left'>abc</p> 二者的宽度是不1样的，不信可以为 p 加上背风景试试。是不是理解这类“包裹性”？试着想一想，还有哪些元素（或css属性）也有这类“包裹性”？  重要 

　　提示：和第13问题有密切关系

　　15. float还有1个表象是“破坏性”，它会致使父元素高度塌陷，这个大家应当都知道吧？那末这是为什么呢？另外，还有哪一个css属性，也致使这类“破坏性”   重要 

　　提示：float和absolute都将致使元素脱离文档流

　　（针对13、14、15问题，可以参考教程http://www.imooc.com/learn/121和http://www.imooc.com/learn/192，讲的很好，只是讲师的声音很有“磁性”，要忍受住）

　　16. css清除浮动有3种方法，是不是知道。你平时是怎样清除浮动的？业内最经常使用的经典清除浮动样式是甚么？ 重要 

　　提示：搜索“clearfix”

　　17. 相对定位relative如何理解，它和绝对定位absolute的最根本区分是甚么？

　　提示：1个在文档流内，1个在文档流外

　　18. “定位上下文”是不是知道？ 重要 

　　19. 经典的网页3列布局如何实现？如果不斟酌IE6、7，最好的实现多列布局的方式是甚么？ 重要 

　　提示：table-cell

　　20. 是不是用过inline-block，IE6、7如何兼容？

　　提示：比较简单，百度便可

3. 结束

　　当前就总结了这么多问题，大家可以对比着问题想一想答案。如果你觉得还有写比较重要的知识，可以给我留言，我将会斟酌加入进来。

　　另外，接下来我将写1个关于css重点知识的简短的系列文章，和结合我做过的wangEditor富文本框和对bootstrap框架的了解，把本文这些问题介绍1下。近期工作很忙，更新起来可能会很慢，敬请期待吧！

-------------------------------------------------------------------------------------------------------------

欢迎关注我的微博。

也欢迎关注我的教程：

《从设计到模式》《深入理解javascript原型和闭包系列》《微软petshop4.0源码解读视频》《json2.js源码解读视频》

-------------------------------------------------------------------------------------------------------------

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠