HTMl&Css
元素水平居中
- 如果需要居中的元素为常规流中inline元素，为父元素设置
text-align: center;即可实现 - 如果需要居中的元素为常规流中block元素，1）为元素设置宽度，2）设置左右margin为auto。3）IE6下需在父元素上设置
text-align: center;,再给子元素恢复需要的值 - 如果需要居中的元素为浮动元素，1）为元素设置宽度，2）
position: relative;，3）浮动方向偏移量（left或者right）设置为50%，4）浮动方向上的margin设置为元素宽度一半乘以-1 - 如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）偏移量设置为50%，3）偏移方向外边距设置为元素宽度一半乘以-1
- 如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）设置左右偏移量都为0,3）设置左右外边距都为auto
元素竖直居中
- 需要居中元素为单行文本，为包含文本的元素设置大于
font-size的line-height：
如块级格式化上下文
(block formatting context),
创建规则：
- 根元素（html）
- 浮动元素（
float不是none） - 绝对定位元素（
position取值为absolute或fixed） display取值为inline-block,table-cell,table-caption,flex,inline-flex之一的元素overflow不是visible的元素
作用：
- 可以包含浮动元素
- 不被浮动元素覆盖
- 阻止父子元素的margin折叠
CSS元素匹配
根据css rules 与dom tree 生成render tree。浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。
然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。
举个例子，有选择器：
body.ready #wrapper > .lol233
先把所有 class 中有 lol233 的元素拿出来组成一个集合，然后上一层，对每一个集合中的元素，如果元素的 parent id 不为 #wrapper 则把元素从集合中删去。 再向上，从这个元素的父元素开始向上找，没有找到一个 tagName 为 body 且 class 中有 ready 的元素，就把原来的元素从集合中删去。至此这个选择器匹配结束，所有还在集合中的元素满足。
为什么从后往前匹配因为效率和文档流的解析方向。
1）效率，找元素的父亲和之前的兄弟比遍历所有儿子快而且方便。
2）关于文档流的解析方向，是因为现在的 CSS，一个元素只要确定了这个元素在文档流之前出现过的所有元素，就能确定他的匹配情况。应用在即使 html 没有载入完成，浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。
为什么是用集合
主要也还是效率。
基于 CSS Rule 数量远远小于元素数量的假设和索引的运用，遍历每一条 CSS Rule 通过集合筛选，比遍历每一个元素再遍历每一条 Rule 匹配要快得多。
position四个值的区别
先看下各个属性值的定义：
1、static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
2、relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。
3、absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
4、fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
static与fixed的定位方式较好理解，在此不做分析。下面对应用的较多的relative和absolute进行分析：
1、relative。定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在，依然占有原来的位置，后面的元素无法向前补充。
2、absolute。定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不在存在，相当于被提升到另一个层面去了，后面的元素会补占它的位置。
relative与absolute的主要区别：
首先，是上面已经提到过的在正常流中的位置存在与否。
其次，relative定位的层总是相对于其最近的父元素，absolute定位的层总是相对于其最近的定义为absolute或 relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。