1.position属性的5个值
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。
relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
总的来说 ：
static呢，就是正常的文档流顺序，默认的，相当于没有定位!
fixed呢， 就是相对于浏览器窗口，就是你滚动条怎么滚动，他还是那个位置，就想是 “粘” 在窗口上了!
inherit呢， 就是从父元素继承 position 属性的值，
absolute呢，是脱离文档流的原来的位置是不继续占据了，如果他的父级元素中有已经定位了的不管是absolute的还是relative，它都会相对于他的父级元素来定位，如果他的父级元素中没有定位了的那么它就是相对于body来定位的。也就是说absolute的绝对是有参照物的！
relative呢，是不会脱离文档流的原来的位置也就继续占据了，它是只相对于自身原来的位置来定位的!
这里我们重点看一下position属性的三个取值定义：position:static、absolute、relative。
static:默认值
如果没有指定position属性值，支持position属性的html对象都是默认为static，可以这么理解：把html页面看作一个文档流，源代码中各个标签的先后位置就是它们所对应的对象的呈现次序，所有取值为static的对象都按照你所编写的html标签的顺序依次呈现。
relative:相对定位
此position属性值保持对象所在文档流中的位置，也就是说它具有和static相同的呈现方式，它同样占有在文档流中的固定位置，后面的对象不会侵占或覆盖；与static属性值不同的是，设置了relative的对象，可以通过top,left,right,bottom属性设定自己的新显示位置，在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
absolute:绝对定位
绝对定位元素的位置是相对于最近的已定位的父元素,若没有已定位的父元素,那么它的位置是相对于body的左上角。
2.层叠和继承
继承：从父元素继承的部分css属性，但是，例如，对 font-family 和 color 进行继承是有意义的，因为这使得您可以很容易地设置一个站点范围的基本字体，方法是应用一个字体到 <html> 元素；然后，您可以在需要的地方覆盖单个元素的字体。如果要在每个元素上分别设置基本字体，那就太麻烦了；再如，让 margin，padding，border 和 background-image 不被继承是有意义的。想象一下，如果您将这些属性设置在一个容器元素上，并将它们继承到每个子元素，然后不得不将它们全部放在每个单独的元素上，那么将会出现的样式/布局混乱。
四种css继承的选择器：（1）inherit： 该值将应用到选定元素的属性值设置为与其父元素一样。（2）initial ：该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素设置的值一样。如果浏览器默认样式表中没有设置值，并且该属性是自然继承的，那么该属性值就被设置为 inherit。（3）unset ：该值将属性重置为其自然值，即如果属性是自然继承的，那么它就表现得像 inherit，否则就是表现得像 initial。（4）revert ：如果当前的节点没有应用任何样式，则将该属性恢复到它所拥有的值。换句话说，属性值被设置成自定义样式所定义的属性（如果被设置）， 否则属性值被设置成用户代理（浏览器）的默认样式。注：initial 和 unset 不被IE支持
层叠：样式重复定义，前面，引用CSS样式，有优先级。注：!importent拥有最高的优先级
CSS 选择器主要：标签选择器，类选择器，id选择器。
1. id选择器 >> 类选择器 >> 标签选择器
2. 使用相同类型选择器（class）定义一个元素时，在style中后定义的冲突样式会覆盖先定义的样式
3.常见的居中方式：
（1）行内居中：text-align:center：只针对行内元素，对文本、图片、按钮等给父元素设置居中，另外，当块级元素被设置为display:inline也可以用，但是子元素没有被float影响，否则也设置不了；
（2）定宽的块级元素居中：可以设置左右margin值为auto实现居中；
（3）不定宽的块级元素居中：1）将要显示的元素加入到 table 标签当中，然后为 table 标签设置“左右margin”值为“auto”来实现居中； 或使用 display : table；然后设该元素“左右margin”值为“auto”来实现居中。后面的display:table; 方法会更简洁；2）改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果，这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值（变成inline-block就可以设置宽高）3）通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中；先设置父元素wrap清除浮动，clear:both;然后左浮动。定位让wrap向右偏移50%。然后定义子元素相对于父元素向左偏移50%。脱离父元素。加个边框就可以明白一些了。另外用绝对定位也是可以的。
（4）垂直居中：给一行元素设置垂直居中：父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高，指在文本中，行与行之间的 基线间的距离 )；给多行元素设置垂直居中：1）使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle；2）设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性。但这种方法兼容性比较差， IE6、7 并不支持这个样式
（5）使用css3的translate水平垂直居中元素：种方式将脱离文档流的元素，设置top：50%，left：50%，然后使用transform来向左向上便宜半个内元素的宽和高
（6）使用css3计算的方式居中元素calc：这种方式同样是将脱离文档流的元素，然后使用计算的方式来设置top和left
<div class="center">
<div class="center_text">
我是要居中的内容<br> </div>
</div>
<sytle>
.center {
position: relative;
height: 300px;
width: 1000px;
border: 1px solid #ccc;
}
.center_text{
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 150px);
width: 300px;
height: 100px;
border: 1px solid #000;
}
</sytle>