css摘抄

以下内容转载于：http://www.cnblogs.com/wangfupeng1988/p/4325007.html

 

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框架的了解，把本文这些问题介绍一下。近期工作很忙，更新起来可能会很慢，敬请期待吧！

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

 

1． 一个段子

　　开题不必太严肃，写博客也不像写书，像聊天似的写东西是最好的表达方式。

       记得之前看过一个段子，也可能是一件真事儿，这不重要。大体内容如下：一个香港的教授说：我们香港的大学和大陆的大学差的很远啊，大陆的大学连看门保安都懂得哲学，因为当你想要进入校园时，保安都会问你一个很哲学的问题“你是谁，你从哪里来，你到哪里去？”。

       看完段子的第一反映肯定是很自嘲的笑了，笑了之后就忘了，该干嘛干嘛去了。

       但是我觉得这句话确实有那么一点高达上的意思，虽然我不知道什么是哲学。“你是谁，你从哪里来，你到哪里去”，如果映射到我们这次CSS教程上，可以提这么几个问题：

1. CSS是什么，如何深入理解，它和html是个怎样的关系；
2. CSS有几种来源（5种来源）；
3. CSS要干什么事情，如何结合html实现的；

　　看过我其他教程的朋友都知道我的原则：我要写东西，必须又一个我觉得很特别而且很合理、高效的思路，如果没有我宁可不写。大部分写CSS的人一上来可能写选择器，但是我不会那样。

　　闲话不说。要想从根上了解这些问题，还是先从浏览器开始吧。

2． 浏览器是如何工作的

　　之前看过一篇文章，叫做《浏览器的工作原理：新式网络浏览器幕后揭秘》。文章言简意赅的介绍了浏览器的工作过程，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.  ……

上一节《css知多少（2）——学习css的思路》有几个人留言表示思路很好、继续期待，而且收到了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浏览器中，我们就可以设置字号和字体。

      

       用户在这里设置了字体和字号之后，它们会覆盖掉浏览器默认的样式。

       第三，<link>引用的css文件

       引用css文件，大家应该都比较熟悉了。

       第四，<style>中编写的样式代码

       <style>中编写样式也都比较熟悉。

       第五，<a style=’ ’>中编写的样式代码

       标签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/4325007.html

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

　上一节《css知多少（3）——样式来源与层叠规则》介绍了样式的五种来源，咱们再通过一张图回顾一下。

　　

　　对于上面的三层，咱们大概都比较熟悉了。下面的两层中，用户自定义样式一般也就是改一改字号大小和字体样式，也没甚好说的。而最有的说的就是浏览器的默认样式。

　　不同浏览器的默认样式多少有些区别，特别是老版本的浏览器之间，现在高级浏览器越来越向统一的标准靠拢，对前端程序猿来说是一件好事情。虽然有些许差异，但是绝大部分还是相同的，我先把代码粘贴出来 ，具体的解读咱们慢慢道来（只说重点，比较容易的或者不常用的就不说了）。

 

1．理念上的转变

　　在解读代码之前，我先把我看浏览器默认样式最大的体会给大家说一下，这个是非常重要的。就是要先从理念上重新认识html和css。

　　以前我都是认为浏览器自身本来就认识各种html标签，并且会根据规则设置标签的样子，例如p是block显示，ul有margin-left，h1粗体显示……以前以为这些标签默认的显示方式和css无关，是浏览器自己干的，css设置网页样式是加载之后又渲染的。

　　现在知道这种想法是错误的。其实浏览器加载了html之后只为一件东西——dom树，浏览器把html变为dom树结构，就完成了对html的结构化。至于后来对视图的渲染，p是block、br换行，那是整合了css之后的事情。而浏览器整合css又是另一个路线，和解析html是分开的。这里的“css”就包含了浏览器默认样式。

　　可以结合下图理解（第二节的图）：

      

　　一句话，浏览器将载入的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

　　

       先给出一个快速思考题：<table>和<div>在容器尺寸上最大区别是什么（只是容器尺寸，不考虑内容区别）？请在两秒钟内说出答案。

       答案是——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的样式而已……

　　这里需要提一句题外话：<b>和<strong>有啥区别？<i>和<em>有啥区别？——不知道的话自己去查查吧，看到许多面试题考这个。

9. inline-block

　　

　　我相信最初学习使用inline-block的朋友都有一个困惑：inline-block到底是个啥？这时候如果你非常勤奋好学的话，你就去网上查资料，然后做各种实验。——精神可嘉，行为不可取。

　　学习还是有捷径的。看看浏览器默认样式告诉你的捷径：button、input就是inline-block！这样以点播你就会一下子明白，最起码能给你一个很好的形象的概念。看看button和input的表现，你就知道inline-block是什么样子了：

　　能被父容器居中、能设置高度宽度和margin、不会像table或div那样占一正行……——这就是inline-block——记得这是浏览器默认样式告诉你的。

10. <br>样式的疑问？？

　　

　　这里我提出自己的一个疑问。如上图，浏览器默认样式中，对br是这样设置的。

1. 这里的br:before{content:”A”}，” A”并没有显示出来啊？
2. <br>的换行到底是谁导致的，是css还是浏览器？

　　希望知道答案的朋友，不吝赐教，给我和大家分享一下，谢谢了。

11. 总结

　　大家看着是不是很过瘾？反正我写着是挺过瘾的，虽然打字、写代码、画图很累，不过很有成就感——再有你们的鼓励就更好啦！

　　

　　首先，我觉得浏览器默认样式非常重要，所有详细解读其中的重点，希望能给大家带来一些启发。没有解读到的就是一些比较容易理解的，或者不常用的（例如打印的样式设置），可以直接去看看源码。

　　其次，这里面也包含了我的一个疑问，很惭愧没有看明白。即便是一时半会儿解决不了，给别人分享一下，让你知道了一个疑问，对你来说，应该也是一个收获。

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

1. 引言

　　从本节开始，就进入本系列的第二个部分——css和html的结合——说白了就是选择器。

　　CSS中定义了样式，如何将这些样式设置到相应的html节点上？就不得不通过选择器。让浏览器知道css选择了哪一个dom节点，浏览器就会乖乖的把相应的样式渲染成视图。

　　至于css能把页面渲染成什么样子，这是本系列的第三部分。

　　第一部分讲css样式的加载和层叠，第二部分讲选择器以及选择器的等级，第三部分讲呈现的各种样式（背景、字体、定位、浮动等）。这样一个思路，也正式浏览器使用css的流程，是最有效的学习思路。（第二节中讲过，此处再回顾一遍）

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的选择器知识，知道了选择器有若干种类型。但是类型多了不一定是个好事儿，下一节就给大家说说类型太多带来的一个问题，以及解决方案。

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

1. 引言

　　上一节《css知多少（5）——选择器》最后提到，选择器类型过多将导致一些问题，是什么问题呢？咱们直接举例子说明。

　　

　　上图中，css中的两个选择器都是针对<span>的，而且两个设置的颜色不一样，这里的<span>到底听从谁的命令？

　　上面还是比较简单的，下面在来一个复杂的：

　　

　　上图中的<li>该显示成什么颜色呢？

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

　　对于下来菜单，例如选择字体、字号等，我当时在wangEditor的css中是用Class来设置的，谁知道博客园页面中有一个既有的样式，优先级高于我的：

　　

　　导致了我配置的demo中，ul的margin-left还是45px，而我写的css明明已经设置成了0px。原因就是博客园这个css选择器优先级要高于我写的优先级。

　　当然，后来我改成了id选择器，就改过了这个问题。

5. 总结

　　本节的内容是一个重点，我在许多的面试题中看到过考css优先级的问题。css优先级并不麻烦，只要你掌握了合适的方法来学习，一晚上就入门个差不多，祝君好运。

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

1. 引言

　　从这一节开始，我们就进入本系列的第三部分——css呈现。本部分将描述css在页面的几种布局和呈现的特性。包括两类：文字、块。

　　第一类——文字。这部分相对比较简单一些，例如设置字号、字体、颜色、背景色、是否加粗等。重点的地方在于设置字体、设置行高、文字相关的距离都用相对值，这些东西在《css知多少（4）——解读浏览器默认样式》那一节已经说过了。另外还有一个重点，就是web端最流行的字体库fontAwesome，关于它我之前有一篇文章专门讲过，请参见《请用fontAwesome代替网页icon小图标》，这里就不再重复去讲了。

       第二类——块。这部分的知识点非常多，重要的有：盒子模型，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的这一特性——纵向重叠。如下图，<p>的纵向margin是16px，那么两个<p>之间纵向的距离是多少？

　　按常理来说应该是 16 + 16 = 32px，但是答案仍然是 16px。因为纵向的margin是会重叠的，大的会把小的“吃掉”（可以自己去实验）。

      

6. 用div画“三角”

　　“三角”在日常的网页中是很常见的，例如百度首页：

　　

　　以及我的开源项目wangEditor（http://www.cnblogs.com/wangfupeng1988/p/4198428.html）中的页面效果：

　　

　　你当然可以使用背景图片、fontAwesome来实现这一效果，但是你也可以用div来实现这一效果，很简单，而且可以封装通用：

      

7. 总结

　　这一节我们用不小的篇幅讲解了盒子模型的相关知识，比较适合初学者，但是更加适合那些没有系统学习过css的有经验的开发人员，还是那句话：建议大家系统的学习知识体系。

　　下面我们将继续这一部分，再说一说float。

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

1. 引言

　　对于我们所有的web前端开发人员，float是或者曾经一度是你最熟悉的陌生人——你离不开它，却整天承受着它所带给你的各种痛苦，你以为它很简单就那么一点知识，但却驾驭不了它各种奇怪的现象。

　　这就是我们又爱又恨的——float。所以，系统的学一学float是非常非常重要的。除了看书和看博客文章之外，我推荐大家去看一个奇葩（声音很有磁性，你懂得）录制的教程《CSS深入理解之float浮动》，讲的很好很透彻。

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，唯一的区别就在于<img>加了float:left，上层的<div>却出现了“坍塌”现象。

　　

　　不过，这就是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>标签会有换行，而浏览器识别换行为空格，这也是很正常的。第二个例子中，img增加了float:left的样式，这就使得img之间没有了空格，四个img紧紧挨着。

　　如果大家之前没注意，现在想想之前写过的程序，是不是有这个特性。为什么float适合用于网页排版（俗称“砌砖头”）？就是因为float排版出来的网页严丝合缝，中间连个苍蝇都飞不进去。

　　“清空格”这一特性的根本原因是由于float会导致节点脱离文档流结构。它都不属于文档流结构了，那么它身边的什么换行、空格就都和它没关系的，它就尽量的往一边去靠拢，能靠多近就靠多近，这就是清空格的本质。

　　

　　（float内容比较多，咱们分上、下两篇来介绍，这是上篇。下篇将马上发出，敬请期待）

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

　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. 引言

　　网页的所有元素，除了“块”就是“流”，而且“流”都是包含在“块”里面的（最外层的body就是一个“块”）。在本系列一开始讲《浏览器默认样式》的时候，大家也都看到了浏览器默认样式中规定了html元素哪些属于“块”（剩下的就是“流”）。这部分知识非常重要也非常基础，因此在所有的前端面试题中，都会问道哪些元素是“块”哪些元素是“流”。

　　

　　其实，这部分知识都囊括在display这个样式设置中。在网上查找出display所有的属性，你会发现它有很多，但是不是每个都常用，甚至大部分你都没有用过。这个没关系，学以致用，用不到的就可以先不学，知道就行，什么时候用，什么时候再去详细学——前提是你知道有这么个东西，否则无从下手。

　　

　　看上图。常用的属性有：none、block、inline、inline-block、inherit，其中inherit是继承父元素的样式，不用多说，其他的几个会在下文详解。其他的都不常用，但是有一些还是需要点出来，其实这些已经在《浏览器默认样式》一节讲到了，这里简单描述一下，详细的可以参考浏览器默认样式一节。

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

　　本系列有一节重点讲解了《盒子模型》，不知道大家看没看过，或者说你已经很了解盒子模型了。

　　其实对于block，我觉得就是“盒子模型”。一个元素设置了block，它就必须遵循盒子模型的规则。因此，这里也不再去详细写它了，大家可以去盒子模型那一节好好看看，就那么点内容。

4. inline-block

　　这个话题还得从《浏览器默认样式》这一节开始。浏览器默认样式中规定了几个html元素为display:inline-block，回顾一下。

　　

　　初学者对于inline-block可能比较陌生，没关系，一步一步来。首先，你应该知道inline是什么样子的，就是一般的文字、图片；其次，你应该知道block是什么样子的，一般的div就是；最后，inline-block顾名思义，它既有inline的特性，又有block的特性，大家可以想想一般的button、input是什么样子的。

　　那button举例子。我们在页面中输入若干个<button>，发现它们是“流”式排列的（可以对比一下若干个<div>的排列方式）。但是针对一个button，我们还可以自定义修改它的形状，这样就有“块”的特征。

      

　　因此，inline-block的特点可以总结为：外部看来是“流”，但是自身确实一个“块”。不知道大家理解也无？

5. 总结

　　我看《css设计指南》书中关于display的内容就写了不到一页，侧面反映出display的内容不是很多，但是也看你怎么去理解和应用，如果详细品味起来，还是很有意思的。大家有意见的可以留言交流。

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

1. 引言

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

　　如果没有定位，我们做出来的网页将会是按部就班的自上而下、自左而右的平铺在浏览器上，外加通过margin和padding调整一下间距，还有就是通过float来浮动某些元素。做一些简单的网页这样就够了，例如N年之前的yahoo，虽然现在看来很low。

　　

　　但是有些情况下，这种按部就班的网页排版满足不了我们的要求，我们需要某些元素跑出来，悬浮在网页上面，而且需要给它指定一个位置。这时候我们就需要用到了position，而且是非用不可。如下图：

　　

2. relative

　　查资料可知道，position一共有四个可选属性：static/relative/absolute/fixed。其中static（静态定位）是默认值，即所有的元素如果不设置其他的position值，它的position值就是static，有它跟没有它一样。就不多介绍了。

　　相对定位relative可以用一个例子很轻松的演示出来。例如我们写4个<p>，出来的样子大家不用看也能知道。

      

　　然后我们在第三个<p>上面，加上position:relative并且设置left和top值，看这个<p>有什么变化。

　　

　　上图中，大家应该要识别出两个信息（相信大部分人会忽略第二个信息）

1. 第三个<p>发生了位置变化，分别向右向下移动了10px；
2. 其他的三个<p>位置没有发生变化，这一点也很重要。

　　因此，relative会导致自身位置的相对变化，而不会影响其他元素的位置、大小的变化。这是relative的要点之一。还有第二个要点，就是relative产生一个新的定位上下文，下文有关于定位上下文的详细介绍，这里可以先通过一个例子来展示一下区别：

　　

　　注意看这两图的区别，下文将有解释。

3. absolute

　　说道absolute，推荐大家去看一个视频教程，讲师对absolute讲的非常透彻，本文的一些内容也是参考了这篇教程，好东西大家一起分享吗！

　　话归正传，咱们还是拿之前那个例子说事儿，先写一个基本的页面——4个<p>

　　

　　然后，我们把第三个<p>改为absolute，看看会发生什么变化。

　　

　　从上面的结果中，我们能看出几点信息：

1. absolute元素脱离了文档结构。和relative不同，其他三个元素的位置重新排列了。只要元素会脱离文档结构，它就会产生破坏性，导致父元素坍塌。（此时你应该能立刻想起来，float元素也会脱离文档结构）
2. absolute元素具有“包裹性”。之前<p>的宽度是撑满整个屏幕的，而此时<p>的宽度刚好是内容的宽度。
3. absolute元素具有“跟随性”。虽然absolute元素脱离了文档结构，但是它的位置并没有发生变化，还是老老实实的呆在它原本的位置，因为我们此时没有设置top、left的值。
4. absolute元素会悬浮在页面上方，会遮挡住下方的页面内容。

　　最后，通过给absolute元素设置top、left值，可自定义其内容，这个都是平时比较常用的了。这里需要注意的是，设置了top、left值时，元素是相对于最近的定位上下文来定位的，而不是相对于浏览器定位。下文马上会讲定位上下文。

　　但是有时候设置top、left值并不是定位的最佳解决方案。例如想要元素A紧跟在元素B的上方，可通过设置元素B为absolute，然后调整B的margin值来确定，这样更有效率。如下图：

　　

　　以上提到的信息，如果展开来说，内容非常多，而且用文本也不好描述，还是推荐大家去看慕课网的那篇视频教程，讲的很有意思。

　　

　　最后，再提几个小知识点。

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的前端开发人员要抓紧恶补一下。

　　写了这么多，感觉还是写的不是很全面，或者不是很系统，很希望大家把自己的意见反馈给我。这个系列博客算是这个教程的第一版，我计划后期抽时间会录制一个视频版，到时候希望会更加全面系统一些。

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