display:inline 在同一行，并且宽度就等于文字内容的宽度且设置宽度无用 display:inline-block 既有行级元素的特性，也有块级元素的特性，因此在同一行，能设置宽高，margin，padding
display:block 块级元素会自动换新行，占领一行,可以设置宽高，margin，padding
引入css的2种方式
link 语法结构 <link href="CSSurl路径" rel="stylesheet" type="text/css" /> 实例 <head><link href="https://i.cnblogs.com/123456.css" rel="stylesheet" type="text/css" /></head>
@import 语法结构 @import + 空格+ url(CSS文件路径地址); 实例 在html中 <style type="text/css">@import url(CSS文件路径地址);</style> 在css中 @import url(CSS文件路径地址);
神奇的伪元素, css有一系列的伪元素，如:before，:after，:first-line，:first-letter等
http://www.cnblogs.com/wonyun/p/5807191.html
:before 标签前面增加 :after 标签后面增加 :first-line 标签内容第一行样式 :first-letter 标签内容第一个字母
CSS选择符以及优先级计算
行内样式（Inline Style），如<span style="color:red">...</span>；
ID选择符（ID selectors），如#myid；
类、属性选择符、伪类（Classes, attributes and pseudo-classes），如 .class {...}、[href$=dudo.org]、:hover；
类型（elements)、伪类型选择符(pseudo-elements)，如 p {...}、:first-line {...}；
他们的优先级怎么来测量呢？如前所述，它们每一类都有不同的数值表示，其中：
行内样式为：1000
ID选择符为：0100
类选择符为：0010
类型选择符为：0001
这里要指出的是，所有这些数值都不是10进制数字，1000只是代码，它是一个行内样式，
例如，body #wrap p {...}，那么它的优先级指数就是 1+100+1=102，而body div #wrap p {...}的优先级指数就是 1+ 1 +100 + 1 =103。
再看一下其它的例子：
* { } 0
li:first-line { } 2 (one element, one pseudo-element)
ul ol+li { } 3 (three elements)
ul ol li.red { } 13 (one class, three elements)
style=”” 1000 (one inline styling)
div p { } 2 (two HTML selectors)
div p.sith { } 12 (two HTML selectors and a class selector)
body #darkside .sith p { } 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)
看这段代码：
<html> <head> <style type="text/css"> #wrap #content {color: blue;} #content {color: red;} </style> </head> <body> <div id="wrap"> <div id="content">this is a text here</div> </div> </body> </html>
代码将显示蓝色。
CSS机制： 继承，层叠，特指
一个简单的记分规则，即对每个选择符都要按下面的 ICE 公式计算三个值：I-C-E（ID-Class-Element）
针对这个公式的计分办法如下：
1.选择符中有一个ID，就在I的位置加1；
2.选择符中有一个类，就在C的位置加1；
3.选择符中有一个元素（标签）名，就在E的位置上加1；
4.得到一个三位数。
P{} //0-0-1 特指度=1
p.largetext{} //0-1-1 特指度=11
p#largetext{} //1-0-1 特指度=101
body p#largetext{} //1-0-2 特指度=102
body p#largetext ul.mylist{} //1-1-3 特指度=113
body p#largetext ul.mylist li{} //1-1-4 特指度=114
查理版简单层叠要点
规则一： 包含 ID 的选择符胜过包含类的选择符，包含类的选择符胜过包含标签名的选择符。
规则二： 如果几个不同来源都为同一个标签的同一个属性定义了样式，行内样式胜过嵌入样式，嵌入样式胜过链接样式。在链接的样式表中，具有相同特指度的样式，后声明的胜过先声明的。
规则三： 设定的样式胜过继承的样式，此时不用考虑特指度（即显式设定优先）。
下面简单解释一下规则三。
比如下面的标记：
<div id="cascade_demo">
<p id="inheritance_fact">Inheritance is <em>weak</em> in the Cascade</p>
</div>
和下面的规则：
div#cascade_demo p#inheritance_fact {color:blue;} - 2 - 0 - 2 （高特指度）
会导致单词 weak 变成蓝色，因为它从父元素 p 那里继承了这个颜色值。
但是，只要我们再给 em 添加一条规则 em {color:red;}
- 0 - 0 - 1 （低特指度）
em 就会变成红色。因为，虽然它的特指度低（0-0-1），但 em 继承的颜色值，会被为它明确（显式）指定的颜色值覆盖，就算（隐式）遗传该颜色值的规则的特指度高（2-0-2）也没有用。
在style属性后面增加 !important 让该属性持有最高的优先级！
为什么要清除浮动？
.cc{
border: 1px solid green;
//overflow: hidden;
}
<div class="cc">清除浮动的办法<img style="float: left;" src="http://zh.learnlayout.com/images/ilta.png"/></div>
你会发现图片溢出了DIV容器,这时，我们把//overflow: hidden;注释打开，就会发现已经闭合了浮动效果。
bootstrap清除浮动代码
.clearfix:after{ content: ''; display: table; clear: both; } .clearfix{ *zoom:1;/*兼容ie低版本*/ }
<br>的换行样式
br: before{ content: '\00A'; } :before, :after{ white-space: pre-line; }
br中content:'\00A'其实是在元素内容前面加上换行键，因为换行键的ASCII码是0A；然后设置white-space，这个属性是用来设置对于元素中空格和换行的处理方式，pre-line则表示合并多个空格并且保留换行，所以就达到了换行的效果；如果没有white-space属性设置的话，则不能自动换行。
position
relateive: 与自身元素有关
absolute：文档流外，会使inline元素'块'话，定义的top left属性，会递归寻找父元素，如果发现有设置position:relative/absolute/fixed,以这个为参照标准
fixed: 元素的定位永远是相对于浏览器边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化。
<div>1</div> <div style="position: fixed;">2</div> <div>3</div>
<div>1</div> <div>2</div> <div>3</div>
以上2种显示效果，第一种的 2 会和 3 发生重叠，而第2种则依次排列。