## 1\. 引言 　　本文将用一篇文章介绍position（定位），在学习position之前，我们应该去思考一个问题：什么情况下我们需要定位？如果没有定位将无法满足我们怎样的需求？我们要知道，被人类创造出来的每一个知识，都有它的用途，都要解决一些之前遇到的问题。 　　如果没有定位，我们做出来的网页将会是按部就班的自上而下、自左而右的平铺在浏览器上，外加通过margin和padding调整一下间距，还有就是通过float来浮动某些元素。做一些简单的网页这样就够了，例如N年之前的yahoo，虽然现在看来很low。 　　 　　但是有些情况下，这种按部就班的网页排版满足不了我们的要求，我们需要某些元素跑出来，悬浮在网页上面，而且需要给它指定一个位置。这时候我们就需要用到了position，而且是非用不可。如下图： 　　 ## 2\. relative 　　查资料可知道，position一共有四个可选属性：static/relative/absolute/fixed。其中static（静态定位）是默认值，即所有的元素如果不设置其他的position值，它的position值就是static，有它跟没有它一样。就不多介绍了。 　　相对定位relative可以用一个例子很轻松的演示出来。例如我们写4个，出来的样子大家不用看也能知道。        　　然后我们在第三个上面，加上position:relative并且设置left和top值，看这个有什么变化。 　　 　　上图中，大家应该要识别出两个信息（相信大部分人会忽略第二个信息） 1. 第三个发生了位置变化，分别向右向下移动了10px； 2. 其他的三个位置没有发生变化，这一点也很重要。 　　因此，relative会导致自身位置的相对变化，而不会影响其他元素的位置、大小的变化。这是relative的要点之一。还有第二个要点，就是relative产生一个新的定位上下文，下文有关于定位上下文的详细介绍，这里可以先通过一个例子来展示一下区别： 　　 　　注意看这两图的区别，下文将有解释。 ## 3\. absolute 　　说道absolute，推荐大家去看一个[视频教程](http://www.imooc.com/learn/192)，讲师对absolute讲的非常透彻，本文的一些内容也是参考了这篇教程，好东西大家一起分享吗！ 　　话归正传，咱们还是拿之前那个例子说事儿，先写一个基本的页面——4个 　　 　　然后，我们把第三个改为absolute，看看会发生什么变化。 　　 　　从上面的结果中，我们能看出几点信息： 1. absolute元素脱离了文档结构。和relative不同，其他三个元素的位置重新排列了。只要元素会脱离文档结构，它就会产生破坏性，导致父元素坍塌。（此时你应该能立刻想起来，float元素也会脱离文档结构） 2. absolute元素具有“包裹性”。之前的宽度是撑满整个屏幕的，而此时的宽度刚好是内容的宽度。 3. absolute元素具有“跟随性”。虽然absolute元素脱离了文档结构，但是它的位置并没有发生变化，还是老老实实的呆在它原本的位置，因为我们此时没有设置top、left的值。 4. absolute元素会悬浮在页面上方，会遮挡住下方的页面内容。 　　最后，通过给absolute元素设置top、left值，可自定义其内容，这个都是平时比较常用的了。这里需要注意的是，设置了top、left值时，元素是相对于最近的定位上下文来定位的，而不是相对于浏览器定位。下文马上会讲定位上下文。 　　但是有时候设置top、left值并不是定位的最佳解决方案。例如想要元素A紧跟在元素B的上方，可通过设置元素B为absolute，然后调整B的margin值来确定，这样更有效率。如下图： 　　 　　以上提到的信息，如果展开来说，内容非常多，而且用文本也不好描述，还是推荐大家去看慕课网的那篇[视频教程](http://www.imooc.com/learn/192)，讲的很有意思。 　　最后，再提几个小知识点。 1. 设置absolute会使得inline元素被“块”化，这在上一节将display时已经说过； 2. 设置absolute会使得元素已有的float失效。不过float和absolute同时使用的情况不多； 3. 上文提到了absolute会使元素悬浮在页面之上，如果有多个悬浮元素，层级如何确定？答案是“后来者居上” ## 4\. fixed 　　其实fixed和absolute是一样的，唯一的区别在于：absolute元素是根据最近的定位上下文确定位置，而fixed永远根据浏览器确定位置。 　　上文很多次提到了“定位上下文”，那么它到底是一个什么东东？答案马上揭晓。 ## 5\. 定位上下文 **5.1 relative的定位** 　　relative元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素。 　　 **5.2 fixed的定位** 　　fixed元素的定位永远是相对于浏览器边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化。 　　 **5.3 absolute的定位** 　　absolute的定位相对于前两者要复杂许多。如果为absolute设置了top、left，浏览器会根据什么去确定它的纵向和横向的偏移量呢？答案是浏览器会递归查找该元素的所有父元素，如果找到一个设置了position:relative/absolute/fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位。如下两个图所示： 　　 　　 　　上图中的“某一层祖先元素”就是该absolute元素的定位上下文。讲到这里，我们上文中的那个图，大家能看明白了吧？还有不明白的可以留言给我。 　　 ## 6\. 总结 　　我感觉position这篇文章是这一系列中最难写的文章，它的知识点比较多，而且非常难理解，因此position也是css的一个重点知识，不懂position的前端开发人员要抓紧恶补一下。 　　写了这么多，感觉还是写的不是很全面，或者不是很系统，很希望大家把自己的意见反馈给我。这个系列博客算是这个教程的第一版，我计划后期抽时间会录制一个视频版，到时候希望会更加全面系统一些。

## 1\. 引言 　　网页的所有元素，除了“块”就是“流”，而且“流”都是包含在“块”里面的（最外层的body就是一个“块”）。在本系列一开始讲《[浏览器默认样式](http://www.cnblogs.com/wangfupeng1988/p/4280801.html)》的时候，大家也都看到了浏览器默认样式中规定了html元素哪些属于“块”（剩下的就是“流”）。这部分知识非常重要也非常基础，因此在所有的前端面试题中，都会问道哪些元素是“块”哪些元素是“流”。 　　 　　其实，这部分知识都囊括在display这个样式设置中。在网上查找出display所有的属性，你会发现它有很多，但是不是每个都常用，甚至大部分你都没有用过。这个没关系，学以致用，用不到的就可以先不学，知道就行，什么时候用，什么时候再去详细学——前提是你知道有这么个东西，否则无从下手。 　　 　　看上图。常用的属性有：none、block、inline、inline-block、inherit，其中inherit是继承父元素的样式，不用多说，其他的几个会在下文详解。其他的都不常用，但是有一些还是需要点出来，其实这些已经在《[浏览器默认样式](http://www.cnblogs.com/wangfupeng1988/p/4280801.html)》一节讲到了，这里简单描述一下，详细的可以参考浏览器默认样式一节。 1. list-item：通过它可以模拟li列表样式； 2. table：也是一个“块”，但和block相比，table具有包裹性； 3. table-cell：最新的多列布局解决方案； ## 2\. inline 　　常用的inline就是文字和图片，其实inline真没什么好说的，大家可以把它想象成一个杯子里的水，它是“流”，是没有大小和形状的，它的宽度取决于父容器的宽度。 　　因此，针对inline的标签，你设置宽度和高度是无效的，通过监控可以知道，该元素实际的宽度和高度都是auto，并不是我们设定的值。 　　 　　一个很基础的问题：如何把inline元素转换成“块”元素？相信绝大部分人的回答是display:block，但是你应该知道这不是一个唯一的答案。至少我设置display:table也是可以的吧？        还有两种情况你应该去了解（如果你不知道的话）：        第一，对inline元素设置float        还是刚才那个例子，我们对span元素添加一个float:left，运行看看效果，你就会大吃一惊。从显示的效果和监控的结果上看来，span元素已经“块”化。注意，上一节刚刚讲完float，不要忘记float的“破坏性”、“包裹性”，在这里同样适用。 　　        第二，对inline元素设置position:absolute/fixed        还是有同一个例子做演示，这次在span元素上加上absolute/fixed，效果大家应该能猜到，和加上float的效果相同。至于absolute/fixed有什么特性，会在下一节介绍position时提到。 　　 ## 3\. block 　　本系列有一节重点讲解了《[盒子模型](http://www.cnblogs.com/wangfupeng1988/p/4287292.html)》，不知道大家看没看过，或者说你已经很了解盒子模型了。 　　其实对于block，我觉得就是“盒子模型”。一个元素设置了block，它就必须遵循盒子模型的规则。因此，这里也不再去详细写它了，大家可以去盒子模型那一节好好看看，就那么点内容。 ## 4\. inline-block 　　这个话题还得从《[浏览器默认样式](http://www.cnblogs.com/wangfupeng1988/p/4280801.html)》这一节开始。浏览器默认样式中规定了几个html元素为display:inline-block，回顾一下。 　　 　　初学者对于inline-block可能比较陌生，没关系，一步一步来。首先，你应该知道inline是什么样子的，就是一般的文字、图片；其次，你应该知道block是什么样子的，一般的div就是；最后，inline-block顾名思义，它既有inline的特性，又有block的特性，大家可以想想一般的button、input是什么样子的。 　　那button举例子。我们在页面中输入若干个，发现它们是“流”式排列的（可以对比一下若干个的排列方式）。但是针对一个button，我们还可以自定义修改它的形状，这样就有“块”的特征。        　　因此，inline-block的特点可以总结为：外部看来是“流”，但是自身确实一个“块”。不知道大家理解也无？ ## 5\. 总结 　　我看《css设计指南》书中关于display的内容就写了不到一页，侧面反映出display的内容不是很多，但是也看你怎么去理解和应用，如果详细品味起来，还是很有意思的。大家有意见的可以留言交流。

float内容比较多，咱们分上、下两篇来介绍，上篇已经写完，这是下篇。建议大家先把上篇看了，再来看下文，精彩内容不要掠过啊。 ## 1\. 清除float 　　《上篇》中我们提到，float具有“破坏性”，它会导致父元素“坍塌”，这将不是所要看到的。如何去避免float带来的这种影响呢（也就是我们常说的“清除浮动”） ？方法有很多种，我在这里介绍4中供大家参考，大家可根据实际情况来选择。 　　先介绍两个比较简单，但是不常用的解决方法： 1. 为父元素添加overflow:hidden 2. 浮动父元素 　　这两个方法比较简单，在这里也就不再演示了，大家有兴趣的可以自己去试试。 　　第三种方法也不是很常用，但是大家要知道clear:both这个东西。通过在所有浮动元素下方添加一个clear:both的元素，可以消除float的破坏性。 　　 　　接下来的第四种方法是大家最需要掌握的，也是我推荐的，也是bootstrap正在用的——clearfix——不知道的同学一定要去搜一下，要不然就太low了！ 　　 　　上图中，我们定义一个.clearfix类，然后对float元素的父元素应用这一样式即可，非常简单吧？注意，你可能会搜出不同版本的clearfix，有的代码比上图中的代码多，你不用理会它，就按照我的贴图的代码写就行。 　　究其原理，其实就是通过伪元素选择器，在div后面增加了一个clear:both的元素，跟第三种方法是一个道理。 ## 2\. 合理的使用float布局网页 　　《上篇》中提到，我们使用float做网页布局，是一种误解和“误用”。估计大多数人误解了float的原本设计初衷，但是这里的“误用”是要加引号的，因为这是一种无心插柳的应用。即，用float做网页布局是很合情合理的，鼓励同志们继续使用。 　　但是用float做网页布局也是有许多技巧的，准确的应用会提高网页的灵活性。下面我列举两个常用的网页布局案例，仅供大家参考，不喜勿喷，善意留言！ 　　第一，三列布局 　　博客园的主页就是经典的三列布局，很明显的左、中、右。 　　 　　对于这种布局，我给出的布局方案是： 　　 *　第二，两列布局 　　以博客园一篇文章的链接为例，它分为左、右结构 　　 　　对于这种布局的格式，我的设计方案是： 　　 ## 3\. BootStrap的栅格系统 　　如果您熟悉并使用bootstrap，那么您将不必自己去操心网页布局，因为bootstrap已经把网页分成了12列，您可以随意设置多列布局，非常方便。这就是bootstrap的栅格系统。此处不会详解栅格系统，就是简单看看栅格系统的实现，它是用float实现的。 　　 　　通过浏览器监控每个单元格的css样式，可以发现，单元格通过百分比设置了宽度，通过float:left设置了浮动。 　　 　　对于父元素的清除浮动，bootstrap使用的就是《上篇》中说的clearfix，大家可以自行检测一下试试。 　　多看看经典软件的源码是学习的一个捷径，学习css可以看看bootstrap，学习js可以看看jquery…… ## 4\. 总结 　　float内容非常多，有的css书籍中，也很难全面的讲解float这一知识点的全部内容。这就需要自己去多多看书，多多实践，多多看经典系统的源码，才能做到融会贯通，举一反十。 　　大家共勉吧。

## 1\. 引言 　　对于我们所有的web前端开发人员，float是或者曾经一度是你最熟悉的陌生人——你离不开它，却整天承受着它所带给你的各种痛苦，你以为它很简单就那么一点知识，但却驾驭不了它各种奇怪的现象。 　　这就是我们又爱又恨的——float。所以，系统的学一学float是非常非常重要的。除了看书和看博客文章之外，我推荐大家去看一个奇葩（声音很有磁性，你懂得）录制的教程[《CSS深入理解之float浮动》](http://www.imooc.com/learn/121)，讲的很好很透彻。 ## 2\. 重新认识float ### 2.1.    误解和“误用” 　　既然提到“误用”，各位看官就此想想，自己平日是怎么使用float的？另外，既然“误用”加了引号，就说明这样的使用并不是真正的误用，而是误打误撞使用之后，带来了真正的效果。 　　这样一问大家，我想绝大多数用float都是为了——横向排版、或者多列布局。这样的使用是正确的，大部分人都这样使用，bootstrap的栅格系统也是使用了float来实现的，并且在css3被普及之前，多列布局的最佳解决方案也是使用float——要不然你就用table。 　　但是，这样使用确实是对float的一种误解和“误用”，因为float被设计出来的初衷是用于——文字环绕效果。即，一个图片一段文字，图片float:left之后，文字会环绕图片。 　　 　　但是，当时的多列布局和横向排版主要是依靠table实现，后来人们见见的发现，使用table将导致代码量大、混乱、不利于SEO，然后发现float+div是一个很不错的排版解决方案，于是乎——过去几年“css+div”页面排版一直是一个热门话题，也是各种高大上的面试题必考的一项。 　　初学float的同学，你如果没有从最基础的知识入手，而是从网络的零散之后或者同事同学的零散代码学起的话，你可能只知道float是用来排版的，但是你却不知道float的许多个特性，这就导致了你在使用float时的许多问题。不信请看下文。 ### 2.2.    破坏性 　　首先大家来看两个demo，如下图。第一个demo是一个简单不过的例子，显示效果也很正常。第二个demo，唯一的区别就在于加了float:left，上层的却出现了“坍塌”现象。 　　 　　不过，这就是float的“破坏性”——float破坏了父标签的原本结构，使得父标签出现了坍塌现象。导致这一现象的最根本原因在于：被设置了float的元素会脱离文档流。 　　初次接触“脱离文档流”的朋友可以这样理解：div是父亲，img是它的儿子，原本好好的父子关系，原本爷俩可以体面的展示一个包含关系的效果。直到有一天，img被设置了float。老天爷（浏览器）规定，任何float元素都不允许再呆在自己的家族中，于是img被逐出家门，断绝和div父子关系。于是乎，div没有了img儿子，也就不能再展示这种父子的包含关系，于是两者就各过各的，互不相干。——这样一说，容易理解了吧？ 　　但是，永远都不要忘记float被设计的初衷——实现文字环绕效果。当div中有文字时，文字还是会环绕在img周围的。如下图： 　　 　　好了，大家现在已经知道了float具有破坏性，可能也有很多朋友之前就知道这一特性，但是你有没有思考一下：**float****为什么会被设计成具有破坏性，为什么会脱离文档流？这一点非常重要！**其实原因非常简单——为了要实现文字的环绕效果？ 　　有人可能会问：啊？你刚才不是说了float的初衷就是实现文字环绕效果吗？和破坏性有啥关系？ 　　这时我会反问你：如果float不让父元素坍塌，能实现文字环绕效果吗？给你两个图看看你就知道了。看不明白的可以给我留言讨论。 　　 ### 2.3.    包裹性 　　“包裹性”也是float的一个非常重要的特性，大家用float时一定要熟知这一特性。咱们还是先从一个小例子看起： 　　 　　如上图，普通的div如果没有设置宽度，它会撑满整个屏幕，在之前的盒子模式那一节也讲到过。而如果给div增加float:left之后，它突然变得紧凑了，宽度发生了变化，把内容“王福朋”三个字包裹了——这就是包裹性。div设置了float之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器。 　　注意，此时div虽然体现了包裹性，但是它的display样式是没有变化的，还是block。 　　 　　说道这里咱们回顾一下，在之前的博客中，也提到了“包裹性”，是哪些样式？你可以在此思考一下，我会在博客的评论中给出答案 。 　　知道了包裹性之后，我们还是继续思考：float为什么要具有包裹性？其实答案还得从float的设计初衷来寻找，float是被设计用于实现文字环绕效果的。文字环绕图片比较好理解，但是如果想要让文字环绕一个div呢？此时div不被“包裹”起来，那么如何去实现环绕效果？ 　　道理很简单，你也可能是那种一点即通的聪明人，但是关键在于**思考**。 ### 2.4.    清空格 　　float还有一个大家可能不是很熟悉的特性——清空格。按照管理，咱还是先举例子说明。 　　 　　上图中。第一个例子，正常的img中间是会有空格的，因为多个标签会有换行，而浏览器识别换行为空格，这也是很正常的。第二个例子中，img增加了float:left的样式，这就使得img之间没有了空格，四个img紧紧挨着。 　　如果大家之前没注意，现在想想之前写过的程序，是不是有这个特性。为什么float适合用于网页排版（俗称“砌砖头”）？就是因为float排版出来的网页严丝合缝，中间连个苍蝇都飞不进去。 　　“清空格”这一特性的根本原因是由于float会导致节点脱离文档流结构。它都不属于文档流结构了，那么它身边的什么换行、空格就都和它没关系的，它就尽量的往一边去靠拢，能靠多近就靠多近，这就是清空格的本质。 　　（float内容比较多，咱们分上、下两篇来介绍，这是上篇。下篇将马上发出，敬请期待）

## 1\. 引言 　　从这一节开始，我们就进入本系列的第三部分——css呈现。本部分将描述css在页面的几种布局和呈现的特性。包括两类：文字、块。 　　第一类——文字。这部分相对比较简单一些，例如设置字号、字体、颜色、背景色、是否加粗等。重点的地方在于设置字体、设置行高、文字相关的距离都用相对值，这些东西在《[css知多少（4）——解读浏览器默认样式](http://www.cnblogs.com/wangfupeng1988/p/4280801.html)》那一节已经说过了。另外还有一个重点，就是web端最流行的字体库fontAwesome，关于它我之前有一篇文章专门讲过，请参见《[请用fontAwesome代替网页icon小图标](http://www.cnblogs.com/wangfupeng1988/p/4129500.html)》，这里就不再重复去讲了。        第二类——块。这部分的知识点非常多，重要的有：盒子模型，float，position，display。本文章讲盒子模型，后面的文章会依次介绍其他的内容。 ## 2\. 什么是“盒子” 　　说道“盒子”我还记得好几年之前，我还在上大学的时候，被人问道过“盒子模型”，我当时都不知道什么意思。回到宿舍急忙上网去查，原来就是我早就知道的margin，padding和border，但是我竟然不知道“盒子”这个词。——所以，不要只满足于网上查来的代码段、小技巧，要全面的了解一些知识体系。当然，后来我又知道，盒子模型不仅仅是margin，padding和border，还有其他的知识。 在此插一句题外话，也是我这几天思考的一点东西。我在思考：web前端的这么知识应该是怎样的一个知识体系架构？之前我以为可以以W3C为纲要，把W3C的东西学会了就够了。后来发现我错了，W3C还不全面。 　　真正全面的覆盖了web前端知识体系的东西是——浏览器内核——这并不是说让你去详细了解浏览器内核、做出一个浏览器。浏览器是web前端代码运行的一个平台，浏览器内核里有哪些模块，我们就需要去学习哪些东西。详细的先不说，以后有机会再分享。 　　这里照顾一下初学者。初学css的朋友，一开始学css基础知识的时候一定学过padding，border和margin，即内边距、边框、外边距。他们三者就构成了一个“盒子”。就像我们收到的快递，本来买了一个小小的iphone，收到的确实那么大一个盒子。因为iphone白色的包装盒和iphone机器之间有间隔层（内边距），iphone白色盒子有厚度，虽然很薄（边框），盒子和快递箱子之间还有一层泡沫板（外边距）。这就是一个典型的盒子。 　　 　　如上图，真正的内容就是这些文字，文字外围有10px的内边距，5px的border，10px的外边距。看到盒子了吧？ ## 3\. 盒子的宽度 ### 3.1.    设置了固定宽度的情况下 　　遇到这种问题，我建议在查询各种资料之前，不如先自己动手做一个实验： 　　 　　如上图，得到网页效果之后，我们可以用截图工具来量一下文字内容的宽度。发现，文字内容的宽度刚好是300px，就是我们设置的宽度。 　　因此，在盒子模型中，我们设置的宽度都是内容宽度，不是整个盒子的宽度。而整个盒子的宽度是：（内容宽度 + border宽度 + padding宽度 + margin宽度）之和。这样我们改四个中的其中一个，都会导致盒子宽度的改变。这对我们来说不友好。 　　没关系，这个东西不友好早就有人发现了，而且已经解决，下文再说。 ### 3.2.    充满父容器的情况下 　　默认情况下，div的display:block，宽度会充满整个父容器。如下图： 　　 　　但是别忘记，这个div是个盒子模型，它的整个宽度包括（内容宽度 + border宽度 + padding宽度 + margin宽度），整个的宽度充满父容器。 　　问题就在这里。如果父容器宽度不变，我们手动增大margin、border或padding其中一项的宽度值，都会导致内容宽度的减少。极端情况下，如果内容的宽度压缩到不能再压缩了（例如一个字的宽度），那么浏览器会强迫增加父容器的宽度。这可不是我们想要看到的。 ### 3.3.    包裹内容的情况下 　　这种情况下比较简单，内容的宽度按照内容计算，盒子的宽度将在内容宽度的基础上再增加（padding宽度 + border宽度 + margin宽度）之和。 　　 ## 4\. 再看盒子的宽度 　　前面提到，为盒子模型设置宽度，结果只是设置了内容的宽度，这个不合理。如何解决这一问题？答案就是：**box-sizing:border-box** 　　 　　如上图，div设置了box-sizing:border-box之后，300px的宽度是内容 + border + 边框的宽度（不包括margin），这样就比较符合我们的实际要求了。 　　建议大家在为系统写css时候，第一个样式是：        　　大名鼎鼎的bootstrap也把box-sizing:border-box加入到它的 * 选择器中，我们为什么不这样做呢？ ## 5\. 纵向margin的重叠 　　这里提到margin，不得不提一下margin的这一特性——纵向重叠。如下图，的纵向margin是16px，那么两个之间纵向的距离是多少？ 　　按常理来说应该是 16 + 16 = 32px，但是答案仍然是 16px。因为纵向的margin是会重叠的，大的会把小的“吃掉”（可以自己去实验）。        ## 6\. 用div画“三角” 　　“三角”在日常的网页中是很常见的，例如百度首页： 　　 　　以及我的开源项目wangEditor（http://www.cnblogs.com/wangfupeng1988/p/4198428.html）中的页面效果： 　　 　　你当然可以使用背景图片、fontAwesome来实现这一效果，但是你也可以用div来实现这一效果，很简单，而且可以封装通用：        ## 7\. 总结 　　这一节我们用不小的篇幅讲解了盒子模型的相关知识，比较适合初学者，但是更加适合那些没有系统学习过css的有经验的开发人员，还是那句话：建议大家系统的学习知识体系。 　　下面我们将继续这一部分，再说一说float。

## 1\. 引言 　　上一节《[css知多少（5）——选择器](http://www.cnblogs.com/wangfupeng1988/p/4282954.html)》最后提到，选择器类型过多将导致一些问题，是什么问题呢？咱们直接举例子说明。 　　 　　上图中，css中的两个选择器都是针对的，而且两个设置的颜色不一样，这里的到底听从谁的命令？ 　　上面还是比较简单的，下面在来一个复杂的： 　　 　　上图中的该显示成什么颜色呢？ ## 2\. 特指度 　　要解决以上问题，我们需要引入一个概念——特指度（specificity）。特指度表示一个css选择器表达式的重要程度，可以通过一个公式来计算出一个数值，数越大，越重要。 　　这个计算叫做“I-C-E”计算公式， 1. I——Id； 2. C——Class； 3. E——Element； 即，针对一个css选择器表达式，遇到一个id就往特指度数值中加100，遇到一个class就往特指度数值中加10，遇到一个element就往特指度数值中加1。 下面举几个css表达式的特指度计算结果，大家也自己算一算，是不是对： |CSS选择器表达式|特指度计算结果 | |---|---| | p |1 | | p.large | 11| | P#large| 101| | div p#large | 102 | | div p#large ul.list| 113 | | div p#large ul.list li| 114| 　　还有一个重点要注意：`!important`优先级最高，高于上面一切。`* `选择器最低，低于一切。 　　好了，你现在可以返回文章一开始提出的两个问题，根据特指度计算公式计算，哪个的计算结果大，浏览器就会以哪个为优先。 ## 3\. 简版规则 　　如果你嫌上面的计算过于复杂，有一个简版规则。它只有三个规则，这三个规则能覆盖大多数情况，而且比较好记。 　　规则一，包含ID的选择器胜过包含Class的选择器，包含Class的选择器胜过包含元素的选择器；例如下图，第一个特指度更高： 　　 　　规则二，不同选择器的特指度比较时，不区分加载的顺序（相同选择器在层叠时，后加载的覆盖前加载的），例如下图，虽然后加载，但是特指度低： 　　 　　规则三，设置的样式高于继承的样式，不用考虑特指度。例如：        　　其实，大部分情况下，你通过这个简版的规则，即可判断选择器的优先级。 ## 4\. 亲身经历 　　wangEditor是我自己做的一个富文本编辑器，当我最开始在博客园上配置demo页面的时候，就遇到了css选择器优先级的问题，现在已经解决。Demo地址：[http://www.cnblogs.com/wangfupeng1988/p/4198428.html](http://www.cnblogs.com/wangfupeng1988/p/4198428.html) 　　对于下来菜单，例如选择字体、字号等，我当时在wangEditor的css中是用Class来设置的，谁知道博客园页面中有一个既有的样式，优先级高于我的： 　　 　　导致了我配置的demo中，ul的margin-left还是45px，而我写的css明明已经设置成了0px。原因就是博客园这个css选择器优先级要高于我写的优先级。 　　当然，后来我改成了id选择器，就改过了这个问题。 ## 5\. 总结 　　本节的内容是一个重点，我在许多的面试题中看到过考css优先级的问题。css优先级并不麻烦，只要你掌握了合适的方法来学习，一晚上就入门个差不多，祝君好运。

## 1\. 引言 　　从本节开始，就进入本系列的第二个部分——css和html的结合——说白了就是选择器。 　　CSS中定义了样式，如何将这些样式设置到相应的html节点上？就不得不通过选择器。让浏览器知道css选择了哪一个dom节点，浏览器就会乖乖的把相应的样式渲染成视图。 　　至于css能把页面渲染成什么样子，这是本系列的第三部分。 　　第一部分讲css样式的加载和层叠，第二部分讲选择器以及选择器的等级，第三部分讲呈现的各种样式（背景、字体、定位、浮动等）。这样一个思路，也正式浏览器使用css的流程，是最有效的学习思路。（[第二节](http://www.cnblogs.com/wangfupeng1988/p/4276321.html)中讲过，此处再回顾一遍） ## 2\. 选择器 说道css选择器，大家都知道有许多种，但是真要你去掰着手指头数一数的话，你可能需要数几分钟。其实这么多选择器，完全可以分为两类： 1. 标签选择器（*是特殊情况），可但标签，也可上下文多标签； 2. 属性选择器（id和class都是属性，特殊的属性）； ### 2.1.    标签选择器 #### 2.1.1 通用选择 　　通用选择器 大家应该都比较熟悉了，最常用的就是 *{margin:0; box-sizing:border-box;}。mragin:0咱们在上一节已经说过，box-sizing:border-box将在后面的盒子模型那块再详细描述。 　　例如，我们在检测bootstrap3的样式时，也可以看到它用到了 * 选择器： 　　 #### 2.1.2 单标签 　　单标签选择器是最基础的css知识了，在上一节的浏览器默认样式中，到处都用了单标签选择。这里不再赘述，css基础薄弱的朋友，可以先去补补课。 #### 2.1.3 多标签 　　多标签选择器一般和html上下文有关，它有以下集中分类 1. 选择一个祖先的所有子孙节点，例如 div p{…} 2. 选择一个父元素的所有直属节点，例如 div > p{…} 3. 选择某一个元素紧挨着的兄弟节点，例如 li + li{…} 4. 选择某一个元素的所有同胞节点，例如 span ~ a{…} 5. 以上各种情况的组合应用（不要组合过于复杂，编码讲求可读性第一） 　　给大家列举一个比较典型的应用，如下图 　　 　　上图中的效果应该比较常见，在各个菜单之间加下划线。我之前的实现是：每个li都加一个border-bottom，在把最后一个li的border-bottom去掉。 　　其实完全没必要这样麻烦，下面一个样式设置即可解决： 　　 　　有点意思吧？ ### 2.2.    属性选择器 #### 2.2.1 特殊1：id选择 　　基础知识，不再赘述。 　　按照许多css教程上讲的，id选择器和属性选择器是不同的两个类别，为什么要把id选择器放在属性选择器下面的呢？因为css选择器是根据html节点的特性来设置的，id也是一个属性，只是它是一个比较特殊的属性，每个html节点的id不能重复。 　　由于特殊，而且比较常用，所以就单独给id选择器一个“#”，本质上就是一个属性选择器。下面两行代码的执行效果完全相同： 　　 ### 2.2.2 特殊2：class选择器 　　基础知识，不再赘述。 　　class也是一个特殊的属性，之所以把它放在属性选择器下，和上文将的id一样。 ### 2.2.3 属性选择器 　　属性选择器有两种情况： 1. 只通过属性名选择：img[title]{…      } 2. 通过属性名和属性值选择：input[type=’text’]{…} 　　这两个也是比较基础的，再次也就不再详细展开了，不了解的朋友可以去看看基础教程补补课。 ## 3\. 伪类和伪元素 　　上文提到了若干种选择器类型，伪类和伪元素可针对任何一种选择器使用。 ### 3.1.    伪类 　　伪类分为UI伪类和结构化伪类。 #### 3.1.1 UI伪类 　　UI伪类都比较简单常用，我下面简单写几句代码，就不再详细说了。 　　 #### 3.1.2 结构化伪类（IE低版本不行） 　　先问大家一个问题：如何实现一个表格间隔显示背景颜色，如图： 　　 　　最简单的方式莫过于使用结构化伪类，一句样式设置即可实现。 　　 　　结构化伪类有如下书写选项，至于什么意思，从字面意思即可理解： 　　 ### 3.2.    伪元素 　　记住，伪元素是一个非常重要的概念！其中，:before和:after 非常常用。 　　首先，咱们先看看:before和:after是怎么回事儿。 　　 　　上图中，我们可以看到，可以为元素前后添加内容。这里的“内容”还可以写成unicode编码的方式，如下图：        　　另外，除了可以添加内容外，你还可以自定义执行内容的样式，如下图： 　　 　　以上大体了解了两者的基本用法，下面给家介绍两个典型的应用场景： 　　第一，大家都知道fontAwesome吧，web最流行的icon字体库。这些小图标的应用就是通过伪元素来实现的，如下图： 　　 　　（不知道fontAwesome也没关系，我们在讲到css字体时，会详细介绍） 　　第二，清除浮动的样式大家都知道吧？这就是一个很典型的伪元素应用场景： 　　 　　（在讲到css浮动时，会专门讲解clearfix） ## 4\. 选择器的扩展 　　选择器本来是css的一种规则，用于为css选择html节点的。但是聪明的人类还是通过选择器创造出了其他领域非常伟大的作品。 * jQuery        jQuery被推广流行的根本原因就是它的“Query”——基于css选择器的“Query”。现在的浏览器都支持querySelectAll()方法了，其实这就是W3C“抄袭”的jQuery的设计。        相信各位web前端人员对jquery都比较熟悉了，这里点一下即可。 * zen-Coding 　　jquery可以通过一段css选择器表达式从既有的html结构中选择符合表达式的dom组，但是zen-coding反其道而行之——可以根据css选择器表达式创造出html节点。不得不佩服这帮人的创造力。 　　 　　如果你还没用过zen-coding，无论你以后用不用，建议你也一定要去体验一下！ ## 5\. 总结 　　本节总结了css的选择器知识，知道了选择器有若干种类型。但是类型多了不一定是个好事儿，下一节就给大家说说类型太多带来的一个问题，以及解决方案。

　上一节《[css知多少（3）——样式来源与层叠规则](http://www.cnblogs.com/wangfupeng1988/p/4277959.html)》介绍了样式的五种来源，咱们再通过一张图回顾一下。 　　 　　对于上面的三层，咱们大概都比较熟悉了。下面的两层中，用户自定义样式一般也就是改一改字号大小和字体样式，也没甚好说的。而最有的说的就是浏览器的默认样式。 　　不同浏览器的默认样式多少有些区别，特别是老版本的浏览器之间，现在高级浏览器越来越向统一的标准靠拢，对前端程序猿来说是一件好事情。虽然有些许差异，但是绝大部分还是相同的，我先把代码粘贴出来 ，具体的解读咱们慢慢道来（只说重点，比较容易的或者不常用的就不说了）。  浏览器默认样式 ## 1．理念上的转变 　　在解读代码之前，我先把我看浏览器默认样式最大的体会给大家说一下，这个是非常重要的。就是要先从理念上重新认识html和css。 　　以前我都是认为浏览器自身本来就认识各种html标签，并且会根据规则设置标签的样子，例如p是block显示，ul有margin-left，h1粗体显示……以前以为这些标签默认的显示方式和css无关，是浏览器自己干的，css设置网页样式是加载之后又渲染的。 　　现在知道这种想法是错误的。其实浏览器加载了html之后只为一件东西——dom树，浏览器把html变为dom树结构，就完成了对html的结构化。至于后来对视图的渲染，p是block、br换行，那是整合了css之后的事情。而浏览器整合css又是另一个路线，和解析html是分开的。这里的“css”就包含了浏览器默认样式。 　　可以结合下图理解（[第二节](http://www.cnblogs.com/wangfupeng1988/p/4276321.html)的图）：        　　一句话，浏览器将载入的html变为dom树，但是此时没有任何显示样式。所以显示的样式，都是css定义的，浏览器只会通过css来渲染视图样式。 　　——多好的设计：指责单一，开放封闭！ ## 2．block元素 　　 　　为何默认情况下p、h1、ul、div都是block显示，就是这里定义的。所以，不要再说div天生就是block——这句话应该换成：浏览器默认样式天生规定了div是block——所以才导致了div是block！是默认样式规定的，不是浏览器的内核规定的。 　　没有设置block的元素，默认为inline显示。 ## 3\. display: list-item 　　 　　我们在使用display时，常用的值一般是：inline/block/inline-block，用不到list-item。那这里的list-item到底有什么作用？我们不妨亲自试一试：        　　看到没有，出现了ul-li中的效果了吧，如果再加一个margin-left是不是就跟ul-li一样了？ 　　所以，ul-li为什么会默认显示成那种样子？——list-item才是“罪魁祸首”。 ## 4\. diplay:table 　　        先给出一个快速思考题：和在容器尺寸上最大区别是什么（只是容器尺寸，不考虑内容区别）？请在两秒钟内说出答案。        答案是——div宽度和父容器相同，table宽度根据内容而定——即table具有“包裹性”。        举一个例子：  　　        上图中，第一个div默认是block，宽度撑满整个页面。第二个div设置了display:table，宽度根据内容而定。这就是“包裹性”。而提到“包裹性”，又不得不让我想到float和absolute。具体怎样这里无法细说，后面的文章会详细讲到，有兴趣的可以先查着。        各位思考一下，你们做的项目中，哪些地方想要这种“包裹性”，而不是写死宽度或者用js计算宽度？如果想不到，我给大家截个图提醒一下。如下图：        ## 5\. display: table-cell 　　 　　上面的截图中，我们看到了眼花缭乱的好多display，而且都是和table相关的。从字面意思上我们能看出，这是浏览器为了渲染一个完整的表格，而需要的许多显示方式（PS：看似一个简单的表格，渲染规则就这么多，这就提醒我们思考问题的严谨性和逻辑性）。 　　这里的大部分都是我们一直都不会用到的，用不到的了解即可，没必要深究。但是这个table-cell我们却能用得到，而且是用它来干一件很重要的事情——多列布局。 　　多列布局在css中有多重要就不用我说了吧，传统模式下大家都使用float来解决这一问题，但是float写出来的东西代码复杂，宽度调整不灵活，浏览器兼容性有问题。所以才有了新方案——table-cell，注意，IE6、7不行！ 　　简单举个例子：        　　记得我刚学html时候，不会用div + css做多列布局，我就用table做多列布局。而今，你可以用table-cell，像用table一样做多列布局，做出来的效果和table做出来的效果是一模一样的。 ## 6\. body样式 　　 　　在body中，定义了两个样式，如上图。 　　第一，在默认情况下，页面中的文字不会直接顶到浏览器的边框，这就是因为默认样式为body设置了margin的缘故。这里需要注意个问题，不同浏览器为body设置的margin值可能不一样，因此大家都知道在css中用 *{margin:0} 来解决这一兼容性问题。 　　之前已经提到过，*选择器的级别要低于body标签选择器，但是*{margin:0}依然有效的原因，就是浏览器偷偷的做了优先级的手脚。如果在正常情况下，*选择器在遇到标签选择器时，是不会起作用的，及时它是“后加载”的。例如：        　　第二，浏览器默认样式还为body设置了line-height，line-height这个值1.12是对英文比较友好，中文状态下就显得有点拥挤。Line-height是具有继承性的，在body中设置了，body下面所有的文字都会继承生效。 　　另外注意，这里的line-height: 1.12是一个相对值，即是文字高度的1.12倍。看到这里，我们在写line-height的时候，也一定要注意使用相对值，不要使用绝对值。如下：        　　上图是编写line-height的三种形式，大家觉得哪种形式最好？区别是什么？ 1. 情况1：永远按照文字的1.4倍计算，不管文字的高度如何，可适应任何变化； 2. 情况2：永远按照1.4em计算，随着em的值改变，不管文字高度如何（此时文字高度可能已经通过绝对的px值该表了大小，而不是随em改变的）； 3. 情况3：就是25px，绝对的。 　　相信看到这里大家会发现，通过一个line-height我能能窥探到的道道有很多。如果大家看懂了这三种情况，从软件设计和系统扩展的角度说，当然我们都会选择第一种。 ## 7\. em和px 　　大家在设置文字高度或者与文字有关的距离，如p的margin、line-heigt（上文刚讲完，不再赘述），会用em还是用px？——反正我之前不熟悉css时候，都是用px。因为px是固定大小，一目了然。——当然，它也不利于扩展。 　　因此，我们推荐大家用em。而且浏览器的默认样式也建议我们这样书写： 　　 　　如上图，它设置了h1字体大小2em、纵向margin是0.67em，h2字体大小1.5em、纵向大小0.75em……p的纵向margin是1.12em，字体大小1em（上图中没有，但在整个文件中有） 　　em是什么？——em是一个浏览器识别的长度单位，但是它不是绝对的、固定的，而是相对的。大家都知道px是一个绝对的长度单位制，它永远不会改变。浏览器默认情况下令1em === 16px。现在你知道为何p默认是16px了吧。而且你还知道了h1是p高度的两倍，h2是p高度的1.5倍……（你知道的越来越多了。。。） 　　当然，我们可以通过css修改1em的值。 　　 　　由于font-size和margin都是通过em来定义的，当em被修改时，不管字体大小修改，margin值也会跟着修改。这就是em好用之处！ 　　从现在开始，与字体大小有关的css，全部都用em！ ## 8\. 粗体和斜体 　　 　　上图中，标注了在整个html中，哪些元素设置了粗体/斜体。重点还是一个思维转换的问题：h1不是天生的粗体，而是设置了font-weight:bolder的样式而已…… 　　这里需要提一句题外话：和有啥区别？和有啥区别？——不知道的话自己去查查吧，看到许多面试题考这个。 ## 9\. inline-block 　　 　　我相信最初学习使用inline-block的朋友都有一个困惑：inline-block到底是个啥？这时候如果你非常勤奋好学的话，你就去网上查资料，然后做各种实验。——精神可嘉，行为不可取。 　　学习还是有捷径的。看看浏览器默认样式告诉你的捷径：button、input就是inline-block！这样以点播你就会一下子明白，最起码能给你一个很好的形象的概念。看看button和input的表现，你就知道inline-block是什么样子了： 　　能被父容器居中、能设置高度宽度和margin、不会像table或div那样占一正行……——这就是inline-block——记得这是浏览器默认样式告诉你的。 ## 10\. 样式的疑问？？ 　　 　　这里我提出自己的一个疑问。如上图，浏览器默认样式中，对br是这样设置的。 1. 这里的br:before{content:”A”}，” A”并没有显示出来啊？ 2. 的换行到底是谁导致的，是css还是浏览器？ 　　希望知道答案的朋友，不吝赐教，给我和大家分享一下，谢谢了。 ## 11\. 总结 　　大家看着是不是很过瘾？反正我写着是挺过瘾的，虽然打字、写代码、画图很累，不过很有成就感——再有你们的鼓励就更好啦！ 　　首先，我觉得浏览器默认样式非常重要，所有详细解读其中的重点，希望能给大家带来一些启发。没有解读到的就是一些比较容易理解的，或者不常用的（例如打印的样式设置），可以直接去看看源码。 　　其次，这里面也包含了我的一个疑问，很惭愧没有看明白。即便是一时半会儿解决不了，给别人分享一下，让你知道了一个疑问，对你来说，应该也是一个收获。

上一节《[css知多少（2）——学习css的思路](http://www.cnblogs.com/wangfupeng1988/p/4276321.html)》有几个人留言表示思路很好、继续期待，而且收到了9个赞，我还是比较欣慰的。没看过的朋友建议先去看看上一节。 　　这一节就开始实践上一节的思路！ ## 1\. “层叠”的概念 　　CSS——层叠样式表，其中的“层叠”是什么意思呢？层叠就是浏览器对多个样式来源进行叠加，最终确定结果的过程。举一个简单的例子：  　　        上图中有两个样式来源，第一个是引用的css1.css，第二个是自己在style中编写的样式。“层叠”是个叠加的过程，可通过下图表示：  　　        上面用一个简单的例子来说明了层叠的过程，形象的体验一下。        **层叠是CSS****的核心机制**，理解了它才能以最经济的方式写出最容易改动的CSS，让文档外观在达到设计要求的同时，也给用户留下一些空间，让他们根据需要更改文档的显示效果，例如调整字号。——摘自《CSS设计指南》 ## 2．样式来源        上文中提到，css之所以有“层叠”的概念，是因为有多个样式来源。其实css的样式来源有5个，开发人员只能接触到后面3个。 　　 **第一，浏览器默认样式表**        当你不为html设置任何样式时，显示在浏览器上，b标签会显示粗体、p有纵向margin、h1字号比p大一倍……这是为什么呢？        因为浏览器自带一个默认的样式，如果html中没有为标签设置样式，则浏览器会按照自己的样式来显示。但是浏览器默认样式的级别是最低的，一旦有其他地方设置了标签样式，浏览器默认样式就会被冲掉。        注意，不同浏览器的默认样式有些地方是不一样的。例如，我们在写css时，都会首先设置 * {margin:0; padding:0;}，这是为何？就是因为有浏览器兼容性问题。干脆，全部弄成0，这样各个浏览器就都统一了。        此处先把默认样式的代码贴出来 ，我们下一节专门解说默认样式，有很多值得玩味的地方。  浏览器默认样式  **第二，用户样式表**        在一些新闻网站中，经常看到可以设置字体大小的快捷菜单，例如下图就是搜狐新闻中的设置。  　　        这些是给一些有视觉障碍的人看的，反正我是没用过，我也有视觉障碍，不过我是通过近视镜来解决的。        其实浏览器也有这样的设置，例如chrome浏览器中，我们就可以设置字号和字体。               用户在这里设置了字体和字号之后，它们会覆盖掉浏览器默认的样式。 **第三，引用的css文件**        引用css文件，大家应该都比较熟悉了。 **第四，中编写的样式代码**        中编写样式也都比较熟悉。 **第五，中编写的样式代码**        标签style属性中编写样式，也都用过吧。        后面这三种是咱们程序开发中比较常用的，这里就不多说了，不了解的朋友需要去补一补基础知识了。 ## 3．层叠的规则 　　由于样式的来源不同，浏览器在加载样式时，需要计算出最终的样式值，这样才能显示出正确的界面效果——浏览器会通过叠加和覆盖这两种方式来生成最终的样式值。        下面是举例说明：  　　        如上图，不同来源的两个样式，第一个样式设置了font-weight，第二个没有，浏览器会把它叠加在一起，即浏览器会把各个零散的整合成一个整体。第一个样式color:red，第二个样式color:blue，浏览器会让后者覆盖前者，最终结果还是color:blue。        覆盖的默认规则是后者覆盖前者，但是又一个特殊情况——!important。  　　        如上图。虽然color:blue是后来者，但是它没有居上，因为前者color:red跟着!important。这就像得到一个尚方宝剑，有最高执行权，其他人统统让路，否则佛挡杀佛。 ## 4．总结 　　本文主要讲解了css的5个来源，以及浏览器叠加样式的过程和方法，这是学习css最基础的知识。下一节将带领大家一起看看浏览器默认样式到底是什么样子的，我们又能从其中学到些什么东西？其中有很多好玩的东东，敬请期待！

两周之前写过该系列的[第一篇](http://www.cnblogs.com/wangfupeng1988/p/4237249.html)，其实当时只是一个想法，这段时间迟迟未更新，是在思考一个解决过程。现在初有成效，就开更吧。 ## 1． 一个段子 　　开题不必太严肃，写博客也不像写书，像聊天似的写东西是最好的表达方式。        记得之前看过一个段子，也可能是一件真事儿，这不重要。大体内容如下：一个香港的教授说：我们香港的大学和大陆的大学差的很远啊，大陆的大学连看门保安都懂得哲学，因为当你想要进入校园时，保安都会问你一个很哲学的问题“你是谁，你从哪里来，你到哪里去？”。        看完段子的第一反映肯定是很自嘲的笑了，笑了之后就忘了，该干嘛干嘛去了。        但是我觉得这句话确实有那么一点高达上的意思，虽然我不知道什么是哲学。“你是谁，你从哪里来，你到哪里去”，如果映射到我们这次CSS教程上，可以提这么几个问题： 1. CSS是什么，如何深入理解，它和html是个怎样的关系； 2. CSS有几种来源（5种来源）； 3. CSS要干什么事情，如何结合html实现的； 　　看过我其他教程的朋友都知道我的原则：我要写东西，必须又一个我觉得很特别而且很合理、高效的思路，如果没有我宁可不写。大部分写CSS的人一上来可能写选择器，但是我不会那样。 　　闲话不说。要想从根上了解这些问题，还是先从浏览器开始吧。 ## 2． 浏览器是如何工作的 　　之前看过一篇文章，叫做《[浏览器的工作原理：新式网络浏览器幕后揭秘](http://ux.sohu.com/topics/50972d9ae7de3e752e0081ff)》。文章言简意赅的介绍了浏览器的工作过程，web前端程序猿最好了解一下。在此另外推荐一本书《WebKit技术内幕》，笔者很早就关注这本书，已列入近期的读书计划。        文章中的内容暂且不详细提，我们先“断章取义”的只说CSS相关的部分。          上图是webkit内核渲染html和css的流程图。大家可以从图中看到，html的解析是一条线，css的解析是一条线，两者会在某一点结合，形成最终的视图。        如果我们以CSS为重点看，从上图中我们可以总结出学习CSS的三个突破点。 1. **浏览器如何加载和解析CSS——CSS的5个来源；** 2. **CSS和html如何结合起来——选择器；** 3. **CSS能控制那些显示方式——盒子模式、浮动、定位、背景、字体等；** 　　看到这里，不知道有没有朋友觉得很兴奋？因为我们在学习CSS之前，首先是分析浏览器如何加载、处理、使用CSS的，我们按照这个思路去写CSS的教程。而不是一上来就照本宣科的从id选择器开始。 我这段时间为何一直没有写博客，其实是在冥思苦想一个更加合理、高效的思路和框架。我如果写出来的东西和别人的一样，那我自己也觉得没意思。        本系列文章也是按照这个思路和框架，一步一步展开的。 ## 3． CSS的加载过程        CSS——Cascading Style Sheets——层叠样式表。“样式表”大家比较好理解，那何为“层叠”呢？从字面意思来看，层叠肯定是需要多层叠加起来。而这个“多层CSS”到底有几层，每一层是什么，我们程序猿用到的将是哪些层？这几个问题将是我们讨论的重点。        另外，这么多层次叠加，如果出现冲突怎么处理，以哪个为准？这也是我们讨论的重点。        最后，在这些层次中有一个“浏览器默认样式”层，即浏览器默认的各个html元素的样式。这次我们像浏览器这位“机器人”学习一下，看看它写出来的css能给我们什么帮助。 ## 4． CSS和HTML的结合 　　CSS如何与html结合呢——当然是通过选择器。CSS提供了多种多样的选择器类型，而且每个级别都在不断的增加新的选择器类型，使得选择器更加灵活易用。本系列将拿出一篇文章专门讲解选择器。 　　聪明的人类也通过css提供的选择器在其他临近的方面开疆拓土，例如jquery，zen-coding。 　　对css选择器来说，有一个很重要的话题——级别。在大部分web前端面试题中，你都会看到css选择器级别的判断问题。《css设计指南》书中给出了一个概念——特指度，而且给出了计算公式和计算规则，还给出了一个简单的背诵口诀。想的真周到。        最后，与选择器关联密切的还有伪类和伪元素，我们也将拿出一篇文章专门讲解伪类和伪元素，以及它们最典型的用法。 ## 5． 页面呈现 　　页面呈现可以分为两类——文字，块。 1. 针对文字来说，我们可以设置字体、字号、加粗、斜体、背景色等等； 2. 对于块来说情况比较多，有盒子模型、浮动、定位、display、背景等； 　　本系列会拿出很大的篇幅去讲解其中的基础知识，以及他们的一些重点应用。 ## 6． 布局 　　布局是css的重头戏，每个系统的布局都有其各自的特点。无好无坏，肯定是各有优缺点，不妨拿出几个比较典型的例子来一起分析一下。例如： 1. 经典三列布局 2. Bootstrap栅格布局 3. 百度首页布局 4. 微博布局 5. 人人网布局 6. 瀑布流布局 7. …… ## 7． 下一步 　　下面的文章将会一步一步展开本文的描述，从实例和代码中慢慢道来。继续期待吧！

## 1\. 引言 　　各位前端或者伪前端（比如作者本人）的同志们，css对你们来说不是很陌生。比如我，在几年之前上大学的时候，给外面做网站就用css，而且必须用css。这样算下来也得六年多了，有些功能可能轻车熟路，有些功能可能需要上网查查，看似能应付得了工作的事情——我之前也是（现在工作上不做开发了，只是业余还写代码）。 　　世界上没有绝对简单的东西，只是我们认为它是简单的。就像我们公司现在的开发情况，开发的大环境刚刚转入B/S，开发领导以前都是用.net做C/S的，在我看来，他们就觉得js、css就是那么回事儿，没多高深。但是我还是抱着敬畏的态度，买了一本《CSS设计指南（第三版）》，不管自己会的，还是不会的，我都统统看一遍。书邮回来之后，我花了三个晚上看完了。我有个习惯，就是做一件事情一定要又一个结果，不能觉得自己脑子里明白了就算了，一定要写出来，甚至做出例子来才算完。于是乎，就写几篇博客呗。利己利人。 　　下面我把在看书过程中遇到的自己认为比较重要的（掌握不牢固）或者之前不懂的，都先列出来，出几个题目，各位看官可以试着想想。如果您都会了，那您基础很牢固，没得说；如果你有些不会的，着急你就赶紧自己查查答案，不着急你就等着我后面的博客介绍。 　　闲话说了很多，现在开始！ ## 2\. 问题 >[info]**01\. 有些浏览器不完全支持css3，现在可以用哪个工具去检测浏览器是否支持，以及支持哪些项？** 　　提示：`Mo****zr` >[info]**02\. 常用的html标签，它们的display属性一般默认为block和inline。有哪些常用标签的display不是block和inline，这些标签显示的时候和block/inline有何区别？** 　　提示：table，input, textarea >[info]**03\. 是否用过@import？** （比较简单） >[info]**04\. 一个表格的第一行显示红色背景，最后一行显示蓝色背景，中间行使用灰色/白色间隔的背景，如何写？** 　　提示：结构化伪类（比较简单） >[info]**05\. 伪元素 ::before、::after 是否用过？都是在哪些地方用的？** 　　提示：清除浮动、为一个div增加一个“三角”  重要  >[info]**06\. css——层叠样式表，其中的“层叠”该如何理解？  重要** 　　提示：层叠，即一层一层叠加起来，关键是知道一共有几层，每一层都是什么 >[info]**07\. 对“特指度（specificity）”了解多少，知道“I-C-E”的计算规则吗？  重要** 　　提示：参考http://www.cnblogs.com/netlyf/archive/2009/06/19/1506427.html >[info]**08\. 特指度理解不是很麻烦，关键是分析多个css选择符和计算麻烦。有一个简单的解决方案，四句口诀，叫做“查理版简单层叠要点”，是否了解？  重要**  　　提示：例如，“包含ID的选择符要胜过包含类的选择符...” >[info]**09\. 搜索“浏览器默认样式”，找到它，打开看看，里面是浏览器默认的所有样式，你是否都能看得懂。 重要** 　　提示：例如 display:table 和 display:block 有何区别？ >[info]**10\. 在你开发的系统的第一个css文件的第一行，就要写上 `* {margin:0; padding:0}` ，这是为何？** 　　提示：浏览器兼容性（比较简单） >[info]**11\. 样式 p{margin-top:50px; margin-bottom:30px;} 将会导致p之间的垂直距离是多少？** 　　提示：垂直外边距……水平外边距……——比较简单的基础知识 　　**12\. “盒子模型”大家都了解了（不知道赶紧去恶补！！），盒子模型的width其实是指内容的宽度，不包括padding、border、margin。其实这样对我们做css布局是很不利的，有什么方法可以让width是全部的宽度？  重**要 　　提示：box-sizing（注意IE低版本的兼容性） >[info]**13\. float的一些影响会让我们经常哭笑不得（特别是初学者），其实了解了float的设计初衷，也许你就会理解这些东西。float的设计初衷是什么？** 　　提示：就简单的一句话…… >[info]**14\. float具有“包裹性”——例如：abc 和 abc 两者的宽度是不一样的，不信可以为 p 加上背景色试试。是否理解这种“包裹性”？试着想想，还有哪些元素（或css属性）也有这种“包裹性”？**  重**要**  　　提示：和第13问题有密切关系 >[info]**15\. float还有一个表象是“破坏性”，它会导致父元素高度塌陷，这个大家应该都知道吧？那么这是为何呢？另外，还有哪个css属性，也导致这种“破坏性”   重**要 　　提示：float和absolute都将导致元素脱离文档流 　　（针对13、14、15问题，可以参考教程[http://www.imooc.com/learn/121](http://www.imooc.com/learn/121)和[http://www.imooc.com/learn/192](http://www.imooc.com/learn/192)，讲的很好，只是讲师的声音很有“磁性”，要忍耐住） >[info]**16\. css清除浮动有三种方法，是否知道。你平时是怎么清除浮动的？业内最常用的经典清除浮动样式是什么？ 重要** 　　提示：搜索“clearfix” >[info]**17\. 相对定位relative如何理解，它和绝对定位absolute的最根本区别是什么？** 　　提示：一个在文档流内，一个在文档流外 >[info]**18\. “定位上下文”是否知道？ 重要** >[info]**19\. 经典的网页三列布局如何实现？如果不考虑IE6、7，最好的实现多列布局的方式是什么？ 重要** 　　提示：table-cell >[info]**20\. 是否用过inline-block，IE6、7如何兼容？** 　　提示：比较简单，百度即可 ## 3\. 结束 　　当前就总结了这么多问题，大家可以对照着问题想想答案。如果你觉得还有写比较重要的知识，可以给我留言，我将会考虑加入进来。 　　另外，接下来我将写一个关于css重点知识的简短的系列文章，以及结合我做过的wangEditor富文本框以及对bootstrap框架的了解，把本文这些问题介绍一下。近期工作很忙，更新起来可能会很慢，敬请期待吧！

> 原文：http://www.cnblogs.com/wangfupeng1988/p/4325007.html 作者：王福鹏，开源项目——**[wangEditor](https://github.com/wangfupeng1988/wangEditor)**的作者。 　《css知多少》系列就此完结了。常来光顾的朋友可能会觉得突然：css的知识点还有很多，怎么突然就完了，还没讲完呢？这样说是对的。不过**凡事都有一个定位**，如果盲目求多，定位模糊，那样就没有目的没有方向了。 　　我的身份不是前端开发人员，而是产品经理。我规划的产品是一款项目管理软件，我也是一个PMP。我深知一个项目一定要有目标、范围、进度和质量要求。一旦达到，项目即可结束，准备下一个项目的启动。我接下来，要继续优化我的富文本编辑器[wangEditor](https://github.com/wangfupeng1988/wangEditor)。还要把我之前写的《[深入理解javascript原型和闭包](http://www.cnblogs.com/wangfupeng1988/p/4001284.html)》做一次修订，录制成视频教程。另外，我还想录制一个MS Project的使用教程，发挥一下我PMP的作用。Project是一款非常强大的项目进度管理软件，但是真正能用得好的项目经理，并不多。 　　闲话不扯，书归正传。 　　《css知多少》的读者建议是了解css基础知识（或者刚刚入门），但是没有系统学习、归纳、总结过的人，还有那些整天忙于coding、bug、加班当饭吃的，而没有时间去看书学习的码工们。《css知多少》里虽然内容不多，但是都是我觉得应该讲的基础，那些不需要讲的基础我就没有讲。所以，如果你是css大牛，那你不必看了（来给我指正一下我也欢迎啊！）；如果你css都没有入门，那你也不用看了，我是从来不会写入门教程的。 　　我的经历告诉我：学习有捷径。**学习的捷径之一就是多看看别人是怎么理解这些知识的**。举两个例子。如果你喜欢《水浒》，千万不要只读原著当故事看，一定要读一读各代名家的批注和点评，看他们是如何理解的。之前学C#时，看《CLR via C#》晦涩难懂，但是我又通过看《你必须知道的.net》而更加了解了。因为后者就是中国一个80后写的，我通过他对C#的了解，作为桥梁和阶梯，再去窥探比较高达上的书籍和知识。 　　——《css知多少》也是一样的。 **最后，真诚的希望你能借助别人的力量来提高自己**。我也一直在这样要求我自己。