一、inline,block与inline-block的区别
display: 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时提到。
与之对应的是
display: block; 分行显示
http://www.cnblogs.com/jdonson/archive/2011/06/10/2077932.html
inline-block
我相信最初学习使用inline-block的朋友都有一个困惑：inline-block到底是个啥？这时候如果你非常勤奋好学的话，你就去网上查资料，
然后做各种实验。——精神可嘉，行为不可取。
学习还是有捷径的。看看浏览器默认样式告诉你的捷径：button、input就是inline-block！这样以点播你就会一下子明白，
最起码能给你一个很好的形象的概念。看看button和input的表现，你就知道inline-block是什么样子了：
能被父容器居中、能设置高度宽度和margin、不会像table或div那样占一正行……——这就是inline-block——记得这是浏览器默认样式告诉你的。
初学者对于inline-block可能比较陌生，没关系，一步一步来。首先，你应该知道inline是什么样子的，就是一般的文字、图片；其次，
你应该知道block是什么样子的，一般的div就是；最后，inline-block顾名思义，它既有inline的特性，又有block的特性，大家可以想想
一般的button、input是什么样子的。那button举例子。我们在页面中输入若干个<button>，发现它们是“流”式排列的（
可以对比一下若干个<div>的排列方式）。但是针对一个button，我们还可以自定义修改它的形状，这样就有“块”的特征。
因此，inline-block的特点可以总结为：外部看来是“流”，但是自身确实一个“块”。不知道大家理解也无？
二、清除
我们发现，clearfix 主要是用在浮动层的父层，而 clear 主要是用在浮动层与浮动层之间，和浮动层同一级，如果想要撑开父层的高度，
clear 就要放在最后。
三、相对定位relative如何理解，它和绝对定位absolute的最根本区别是什么？
一个在文档流内，一个在文档流外
http://www.cnblogs.com/zwl12549/archive/2007/04/19/719715.html
四、样式来源
1、内部样式
2、属性样式
3、引用样式
4、浏览器用户自定义样式
5、浏览器默认样式
注意，不同浏览器的默认样式有些地方是不一样的。例如，我们在写css时，都会首先设置 * {margin:0; padding:0;}，
这是为何？就是因为有浏览器兼容性问题。干脆，全部弄成0，这样各个浏览器就都统一了。
五、样式显示结果
即浏览器会把各个零散的整合成一个整体。
样式都是后者覆盖前者，加上这个!important就不受影响(去干扰)
六、diplay:table
先给出一个快速思考题：<table>和<div>在容器尺寸上最大区别是什么（只是容器尺寸，不考虑内容区别）？请在两秒钟内说出答案。
答案是——div宽度和父容器相同，table宽度根据内容而定——即table具有“包裹性”。
上图中，第一个div默认是block，宽度撑满整个页面。第二个div设置了display:table，宽度根据内容而定。
这就是“包裹性”。而提到“包裹性”，又不得不让我想到float和absolute。具体怎样这里无法细说，后面的文章会详细讲到，有兴趣的可以先查着。
http://www.cnblogs.com/wangfupeng1988/p/4280801.html
这个table-cell我们却能用得到，而且是用它来干一件很重要的事情——多列布局。
多列布局在css中有多重要就不用我说了吧，传统模式下大家都使用float来解决这一问题，但是float写出来的东西代码复杂，
宽度调整不灵活，浏览器兼容性有问题。所以才有了新方案——table-cell，注意，IE6、7不行！
七、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的时候，也一定要注意使用相对值，不要使用绝对值。
八、em和px
大家在设置文字高度或者与文字有关的距离，如p的margin、line-heigt（上文刚讲完，不再赘述），会用em还是用px？
——反正我之前不熟悉css时候，都是用px。因为px是固定大小，一目了然。——当然，它也不利于扩展。
因此，我们推荐大家用em。
em是什么？——em是一个浏览器识别的长度单位，但是它不是绝对的、固定的，而是相对的。大家都知道px是一个绝对的长度单位制，
它永远不会改变。浏览器默认情况下令1em === 16px。现在你知道为何p默认是16px了吧。而且你还知道了h1是p高度的两倍，
h2是p高度的1.5倍……（你知道的越来越多了。。。）
当然，我们可以通过css修改1em的值。--》例子是通过改变字体大小来实现改变em的值。
由于font-size和margin都是通过em来定义的，当em被修改时，不管字体大小修改，margin值也会跟着修改。这就是em好用之处！
从现在开始，与字体大小有关的css，全部都用em！
九、<b>与<strong>有什么区别？<i>和<em>有啥区别？
在用法上两个是没有区别的，浏览器默认都是给文字加粗，只不过<strong>更符合w3c标准，因为b是IE自创的嘛。 而且更为重要的是，
<strong>表示更为重要，而<b>只是简单加粗，搜索引擎，我这里不是说百度哈，会更看重<strong>里的内容，seo的人是深有体会的。
关于html标签中b和strong两个的区别，我也是今早上才注意的，以前都是混着用的，早上看书的时候才注意到这两个标签的区别。
用在网页上，默认情况下它们起的均是加粗字体的作用，二者所不同的是，<b>标签是一个实体标签，它所包围的字符将被设为bold（粗体），
而<strong>标签是一个逻辑标签，它的作用是加强字符的语气，一般来说，加强字符的语气是通过将字符变为bold（粗体）来实现的。
简单的说strong是web标准中xhtml的标签，strong的意思是“强调”；b是html的，b的意思是bold（粗体）。web标准主张
xhtml不涉及具体的表现形式，“强调”可以用加粗来强调，也可以用其它方式来强调，比如下划线，比如字体加大，比如红色，等等，
可以通过css来改变 strong的具体表现。并不是说有了strong，就淘汰了b，只是这个b很无辜，就因为自己表示的是字体加粗，恰巧跟strong默认
情况下强调的效果一致，其实这个strong完全可以定义成别的样式的强调效果，但是为了符合现在W3C的标准，还是推荐使用strong标签。
后一个和前一个差不多。
i：斜体文本。
em: 斜体文本 + 内容局部强调。
b：粗体文本。
strong：粗体文本 +内容全局强调。
1.i 和 b 仅用来使文本呈现粗体和斜体，区别其它文本，不会产生任何语义的变化。
2.em 是局部强调：从视觉上考虑，em 的强调是有顺序的，阅读到某处时，才会注意到，斜体文本满足这种视觉效果。
strong 是全局强调：strong 的强调是无顺序的，看见文档时，立刻就凸显出来的关键词句。粗体文本满足能满足这种视觉效果。
3.em 表示内容的着重点（stress emphasis）；strong 表示内容的重要性（strong importance）。
4.strong 不会改变所在句子的语意；em 则会改变所在句子的语义。em 是句意强调，会引起语义变化。strong
是重要性强调，与局部或全局无关，局部强调也可以用 strong，强调的是重要性，不会改变句意。
十、选择器
1.标签选择器（*是特殊情况），可但标签，也可上下文多标签；
2.属性选择器（id和class都是属性，特殊的属性）；
通用选择器 * 大家应该都比较熟悉了，最常用的就是 *{margin:0; box-sizing:border-box;}。
多标签
多标签选择器一般和html上下文有关，它有以下集中分类
1、选择一个祖先的所有子孙节点，例如 div p{…}
2、选择一个父元素的所有直属节点，例如 div > p{…}
3、选择某一个元素紧挨着的兄弟节点，例如 li + li{…}
4、选择某一个元素的所有同胞节点，例如 span ~ a{…}
5、以上各种情况的组合应用（不要组合过于复杂，编码讲求可读性第一）
伪类和伪元素--见的多，不知道之前不明白
http://www.cnblogs.com/wangfupeng1988/p/4282954.html
十一、优先级别
这个计算叫做“I-C-E”计算公式，
I——Id；
C——Class；
E——Element；
还有一个重点要注意：!important优先级最高，高于上面一切。* 选择器最低，低于一切。
http://www.cnblogs.com/wangfupeng1988/p/4285251.html
属性设置样式级别高于id
十二、内边距，边框，外边距 即padding，border和margin--box-sizing好处
因此，在盒子模型中，我们设置的宽度都是内容宽度，不是整个盒子的宽度。而整个盒子的宽度是：
（内容宽度 + border宽度 + padding宽度 + margin宽度）之和。
盒子的宽度
为盒子模型设置宽度，结果只是设置了内容的宽度，这个不合理。如何解决这一问题？答案就是：box-sizing:border-box
div设置了box-sizing:border-box之后，300px的宽度是内容 + border + 边框的宽度（不包括margin）
<div style="margin:15px;padding:10px; border:5px solid red; 70px; box-sizing:border-box">
yyyyyyyyyyyyyy
</div>
内容宽度是40px
没有设置box-sizing:border-box
内容宽度是70px
http://www.cnblogs.com/wangfupeng1988/p/4287292.html
十三、纵向margin的重叠
这里提到margin，不得不提一下margin的这一特性——纵向重叠。如下图，<p>的纵向margin是16px，那么两个<p>之间纵向的距离是多少？
按常理来说应该是 16 + 16 = 32px，但是答案仍然是 16px。因为纵向的margin是会重叠的，大的会把小的“吃掉”（可以自己去实验）。
样式 p{margin-top:50px; margin-bottom:30px;} 将会导致p之间的垂直距离是多少？ 50px;
十四、float
破坏性——“坍塌”现象 就是 子元素脱离父元素，造成父元素高度变窄。被设置了float的元素会脱离文档流。
包裹性——”包裹“按内容大小。div设置了float之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器。
注意，此时div虽然体现了包裹性，但是它的display样式是没有变化的，还是block。
体现包裹性的css样式还有：display:table、position:absolute
清空格——“清空格”这一特性的根本原因是由于float会导致节点脱离文档流结构。它都不属于文档流结构了，那么它身边的什么换行、
空格就都和它没关系的，它就尽量的往一边去靠拢，能靠多近就靠多近，这就是清空格的本质。(为什么float适合用于网页排版（俗称“砌砖头”）)
清除float
我在这里介绍4中供大家参考
1.为父元素添加overflow:hidden
2.浮动父元素
3.通过在所有浮动元素下方添加一个clear:both的元素，可以消除float的破坏性。 (同级下方)
4.接下来的第四种方法是大家最需要掌握的，也是我推荐的，也是bootstrap正在用的——clearfix (父级上--设置一个class类)
我们定义一个.clearfix类，然后对float元素的父元素应用这一样式即可，非常简单吧？注意，你可能会搜出不同版本的clearfix，
有的代码比上图中的代码多，你不用理会它，就按照我的贴图的代码写就行。
究其原理，其实就是通过伪元素选择器，在div后面增加了一个clear:both的元素，跟第三种方法是一个道理。
十五、 position
http://www.cnblogs.com/wangfupeng1988/p/4322680.html
position一共有四个可选属性：static/relative/absolute/fixed。其中static（静态定位）是默认值，
即所有的元素如果不设置其他的position值，它的position值就是static，有它跟没有它一样。
1.relative
relative会导致自身位置的相对变化，而不会影响其他元素的位置、大小的变化。这是relative的要点之一。
还有第二个要点，就是relative产生一个新的定位上下文，
2.absolute
http://www.imooc.com/learn/192
absolute元素脱离了文档结构。和relative不同，其他三个元素的位置重新排列了。只要元素会脱离文档结构，
它就会产生破坏性，导致父元素坍塌。（此时你应该能立刻想起来，float元素也会脱离文档结构）
absolute元素具有“包裹性”。之前<p>的宽度是撑满整个屏幕的，而此时<p>的宽度刚好是内容的宽度。
absolute元素具有“跟随性”。虽然absolute元素脱离了文档结构，但是它的位置并没有发生变化，还是老老实实的呆在它原本的位置，
因为我们此时没有设置top、left的值。absolute元素会悬浮在页面上方，会遮挡住下方的页面内容。
最后，通过给absolute元素设置top、left值，可自定义其内容，这个都是平时比较常用的了。这里需要注意的是，
设置了top、left值时，元素是相对于最近的定位上下文来定位的，而不是相对于浏览器定位。
下文马上会讲定位上下文。
但是有时候设置top、left值并不是定位的最佳解决方案。例如想要元素A紧跟在元素B的上方，可通过设置元素B为absolute，
然后调整B的margin值来确定，这样更有效率。
最后，再提几个小知识点。
设置absolute会使得inline元素被“块”化，这在上一节将display时已经说过；
设置absolute会使得元素已有的float失效。不过float和absolute同时使用的情况不多；
上文提到了absolute会使元素悬浮在页面之上，如果有多个悬浮元素，层级如何确定？答案是“后来者居上”
3.fixed
其实fixed和absolute是一样的，唯一的区别在于：absolute元素是根据最近的定位上下文确定位置，而fixed永远根据浏览器确定位置。
定位上下文
relative元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素。
fixed元素的定位永远是相对于浏览器边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化。
absolute的定位相对于前两者要复杂许多。如果为absolute设置了top、left，浏览器会根据什么去确定它的纵向和横向的偏移量呢？
答案是浏览器会递归查找该元素的所有父元素，如果找到一个设置了position:relative/absolute/fixed的元素，就以该元素为基准定位，
如果没找到，就以浏览器边界定位。