定位：
一、包含块简单说就是定位参考框或者定位坐标参考系，元素一旦定义了定位显示（相对、绝对、固定）都具有包含块性质，它所包含的定位元素都将以该包含块为坐标系进行定位和调整。
二、包含块是视觉格式化模型的一个重要概念，它与框模型类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。
三、原理：一个元素盒子的位置和大小有时是通过相对于一个特定的长方形来计算的，这个长方形就被称之为元素的 containing block。一个元素的 containing block 按以下方式定义：
1、用户代理选择根元素作为包含块（称之为初始 containing block）。
2、对于其它元素，除非元素使用的是绝对位置，包含块由最近的块级祖先元素盒子的内容边界组成。
3、如果元素有属性 'position:fixed'，包含块由视口建立。
4、如果元素有属性 'position:absolute'，containing block 由最近的 position 不是 static 的祖先建立，按下面的步骤：
a、如果祖先是块级元素，由祖先的 padding edge 形成。
b、如果祖先是内联元素，取决于祖先的 direction 属性。
⑴如果 direction 是 ltr（左到右），祖先产生的第一个盒子的上、左内容边界是包含块的上方和左方，祖先的最后一个盒子的下、右内容边界是包含块的下方和右方。
⑵如果 direction 是 rtl（右到左），祖先产生的第一个盒子的上、右内容边界是包含块的上方和右方，祖先的最后一个盒子的下、左内容边界是包含块的下方和左方。
如果没有祖先，根元素盒子的内容边界确定为包含块。
黑色的并没有在蓝色的旁边，所以W3C不同文档流没有可比性CSS的优先级
内联样式(inline style) > ID选择符 > 类选择符(class), 伪类(pseudo-class)和属*(attribute)选择符 > 类别(type)，伪对象(pseudo-element)
解释：
*内联样式(inline style)：元素的style属*，比如 <div style="color:red;"></div> ,其中的color:red;就是内联样式
*ID选择符：元素的id属*，比如 <div id="content"></div> 可以用ID选择符#content
*类选择符：比如<div class="box"></div>，可以使用类选择符 .box
*伪类(pseudo-class)：最常见的是锚(a)伪类，比如a:link,a:visited.
*属性选择符(attribute selectors)：比如div[class=demo],含有class为demo的div元素
*类别选择器(type selector)：HTML标签选择，比如div .demo,div元素下含有class为demo的元素
*伪对象选择器(pseudo-element selector)：比如div:first-letter,div元素下的第一个单词。
*多重CSS样式定义，属性追加重复最后优先原则
伪类，伪元素区别关系
CSS伪类用于向某些选择器添加特殊的效果。CSS伪元素用于将特殊的效果添加到某些选择器。
伪类选择器
a :link 未访问（默认）
a :visited 访问过后（点击过后）
a :hover 鼠标悬停（鼠标经过）
a :active 链接激活（鼠标按下）
注意：顺序不能打乱；
伪类的原理：如果a标签里有一个class 和几个class属性，我们可以通过改变类，改变a标签的颜色或者状态，那么我么可以假定有那么一个类
a:visited{color:red;}
X:first-chlid{};
X:nth-last-child(n) 选择器选的必须满足x和n同时满足
eg：