关键词：

1. 引言

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

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

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

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

2. 问题

　　01. 有些浏览器不完全支持css3，现在可以用哪个工具去检测浏览器是否支持，以及支持哪些项？

　　提示：Mo****zr

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

　　提示：table，input, textarea

　　03. 是否用过@import？

　　（比较简单）

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

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

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

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

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

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

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

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

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

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

　　09. 搜索“浏览器默认样式”，找到它，打开看看，里面是浏览器默认的所有样式，你是否都能看得懂。 重要 

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

　　10. 在你开发的系统的第一个css文件的第一行，就要写上 * {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的一些影响会让我们经常哭笑不得（特别是初学者），其实了解了float的设计初衷，也许你就会理解这些东西。float的设计初衷是什么？

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

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

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

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

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

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

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

　　提示：搜索“clearfix”

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

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

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

　　19. 经典的网页三列布局如何实现？如果不考虑IE6、7，最好的实现多列布局的方式是什么？ 重要 

　　提示：table-cell

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

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

3. 结束

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

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

css知多少——选择器的优先级（转）

1.引言　　上一节《css知多少（5）——选择器》最后提到，选择器类型过多将导致一些问题，是什么问题呢？咱们直接举例子说明。　　　　上图中，css中的两个选择器都是针对<span>的，而且两个设置的颜色不一样，这里的... 查看详情

css知多少（10）——display（转）

1.引言　　网页的所有元素，除了“块”就是“流”，而且“流”都是包含在“块”里面的（最外层的body就是一个“块”）。在本系列一开始讲《浏览器默认样式》的时候，大家也都看到了浏览器默认样式中规定了html元素哪些... 查看详情

css知多少——float下篇（转）

　　float内容比较多，咱们分上、下两篇来介绍，上篇已经写完，这是下篇。建议大家先把上篇看了，再来看下文，精彩内容不要掠过啊。1.清除float　　《上篇》中我们提到，float具有“破坏性”，它会导致父元素“坍塌”，这... 查看详情

overflow知多少（转）

最近在研究OOCSS，当打开template.css阅读第一行时，震惊了，第一眼居然没看懂。。。。。。以下就是OOCSS下的template.css第一行代码：12.bodyoverflow:hidden;_overflow:visible;_zoom:1;.mainoverflow:hidden;_overflow:visible;_zoo 查看详情

如何在存储过程中执行set命令我来答

1.EXEC使用EXEC命令两种用种执行存储程另种执行态批处理所讲都第二种用　　面先使用EXEC演示例,代码1DECLARE@TableNameVARCHAR(50),@SqlNVARCHAR(MAX),@OrderIDINT;SET@TableName=‘Orders‘;SET@OrderID=10251;SET@sql=　　　　‘SELECT*FROM‘+QUOTENAME(@TableNam 查看详情

android底层原理你知多少？你来说说handler吧！(代码片段)

0.前言做Android开发肯定离不开跟Handler打交道，它通常被我们用来做主线程与子线程之间的通信工具，而Handler作为Android中消息机制的重要一员也确实给我们的开发带来了极大的便利。可以说只要有异步线程与主线程通信... 查看详情

高尔夫模拟器投影仪的最佳位置我来答

如果您正在考虑将备用卧室或地下室改造成室内的高尔夫球场，那么您将需要一台安装在安全位置的击球屏幕投影仪——但要为室内高尔夫创造身临其境的体验。最具挑战性的问题之一是安装投影仪的位置，以便它可以&#... 查看详情

[转]梦里babel知多少(代码片段)

平时开发中，经常需要用到ES6/ES7的语法。那么就需要用到Babel来对代码进行转码处理。 之前用Vue比较多，所以以Vue-cli作为参考来分析。 第一张图是几个月前的Vue-cli生成的 第二个图是今天使用Vue-cli生成的Babel-core顾... 查看详情

css知多少（11）——position

1.引言　　本文将用一篇文章介绍position（定位），在学习position之前，我们应该去思考一个问题：什么情况下我们需要定位？如果没有定位将无法满足我们怎样的需求？我们要知道，被人类创造出来的每一个知识，都有它的用途... 查看详情

九种浏览器端缓存机制知多少（转）

浏览器缓存（BrowserCaching）是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制，有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据，整体上加速网页展示给用户。浏览器端缓存的机制种类较多... 查看详情

overflow知多少

本文地址: http://www.hicss.net/some-overflow-knowledge/最近在研究OOCSS，当打开template.css阅读第一行时，震惊了，第一眼居然没看懂。。。。。。以下就是OOCSS下的template.css第一行代码：12.body{overflow:hidden;_overflow:visible;_zoom:1;}.main{overflo 查看详情

css选择器优先级（转）

...//www.w3.org/TR/css3-selectors/#specificity1.引言　　上一节《css知多少（5）——选择器》最后提到，选择器类型过多将导致一些问题，是什么问题呢？咱们直接举例子说 查看详情

工作两年简历写成这样，谁要你呀！(代码片段)

...次相亲。不认识你之前我要看脸(简历)、见了面我要走心(我来问你来答)。那么简历写不好，相应的内容又没做好准备，你不失败谁失败。二、我的简历都石沉大海这是一份模拟真实的简历，如下；这份简历有哪些问题：简历格... 查看详情

事件总线知多少

ImplementinganeventbuswithRabbitMQforthedevelopmentortestenvironmentAbpEventBus  查看详情

事件总线知多少

ImplementinganeventbuswithRabbitMQforthedevelopmentortestenvironmentAbpEventBus  查看详情

国内最火的htmlcssjavascript开源项目top榜，你知多少？

对于开发者而言，想要着手前端开发，HTML、CSS和JavaScript是三项必备的基础技能。而如何事半功倍地掌握好这些知识？通过了解当下火热的开源项目不乏为最佳学习姿势。本文盘点国内评分最高且收藏量超过100的前端技术开源项... 查看详情

网页制作知多少

网页制作知多少一、通用模板：<!DOCTYPEhtml><htmllang=”en”>  <head>      <meta charset=”UTF-8”/>    &nb 查看详情

css知识体系你知多少？（前端技术）

1、有些浏览器不完全支持css3，现在可以用哪个工具去检测浏览器是否支持，以及支持哪些项？modernizr:检测浏览器对HTML5和CSS3特性（至于modernizr的介绍，可以看我另外一篇博文HTML5系列四（特征检测、Moderni... 查看详情