day5小结

1、定位（position）
设定元素在文档中的位置。会将标签（元素）转换为块级。
2、定位分类（属性值）
1）static：静态定位，默认值，没有定位，不能设置偏移值（left/top/right/bottom），占用标准流（文档流）
2）relative：相对定位
占用标准流（文档流），它会出现在文档流中它该出现的位置，可以通过设置偏移值改变其位置，它相对于自身所占的位置做偏移
3）absolute：绝对定位
脱离文档流，相对于body做偏移。
绝对定位一般与相对定位结合使用，它相对的父级是relative定义的元素做偏移。relative的元素是absolute的父级。
在项目开发中，一般用relative+absolute结合使用。
4）fixed：固定定位
脱离文档流，相对于浏览器窗口左上角（0，0）做偏移，它于relative设定的对象没有关系，也就是说，它跟父级的定位没有任何关系。
一般在开发中用来固定导航栏。
3、z-index
当多个元素添加绝对定位，元素将会叠加在一起，使用z-index可以设置元素显示的层次。
文档流默认的z-index的值为0。
用在static和relative元素上将无效。
4、网站开发策略：先整体再局部，自顶向下，逐步细化。
1）双飞翼布局：
由三列组成，两端固定，中间自适应。

    双飞翼布局的优点：
        （1）兼容性好，兼容所有主流浏览器，包括万恶的IE6。
        （2）因为在DOM中center_panel在三列结构的最前面，因此可以实现主要内容的优先加载。
2）圣杯布局
    由三列组成，两端固定，中间自适应。外观与双飞翼布局一样。
    布局时与双飞翼比增加了定位和偏移设置。
3）侧边栏固定布局
    I）两栏布局
        a）左侧固定，右侧自适应
        b）左侧自适应，右侧固定
        c）左右都固定
    II）三栏布局
        a）左侧固定，中间自适应，右侧固定
        b）左侧自适应，中间和右侧固定
        c）左侧和中间固定，右边自适应

5、BFC&IFC
FC:Fomatting Context(格式上下文)。它是CSS2.1规范中的一个概念。它是页面中的一块渲染
区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
分为：BFC和IFC。
1）BFC：块级格式上下文
a）形成BFC的条件
i）浮动元素（float除none以外的值）
ii）定位元素（position（absolute/fixed））
iii）display（值为inline-block/table-cell/table-caption时）
iv）overflow（值为hidden/auto/scroll时）
b）BFC特性（规则）
i）内部的盒子会在垂直方向上一个接一个的放置
ii）垂直方向上的距离会叠加，值由最大margin值决定（如果不要叠加，就需要将该盒子变成一个独立的盒子）
iii）BFC的区域不会与float元素区域重叠
iv）计算BFC的高度时，浮动元素也参与计算
v）BFC就是页面上的一个独立的元素，容器里面的子元素不会影响到外面的元素
c）BFC的作用
i）解决margin重叠的问题（添加独立BFC）
ii）解决浮动高度塌陷的问题（在父级添加overflow:hidden）
iii）解决侵占浮动元素的问题（添加overflow:hidden清除浮动）
2）IFC：内联（行级）格式上下文
a）形成IFC的条件
i）font-size
ii）line-height
iii）height
iv）vertical-align
b）IFC特性（规则）
i）IFC的元素会在一行中从左至右排列
ii）在一行上的所有元素会在该区域形成一个行框
iii）行宽的高度为包含框的高度，高度为行框中最高元素的高度
iv）浮动的元素不会在行框中，并且浮动元素会压缩行框的宽度
v）行框的宽度容纳不下子元素时子元素会换下一行显示，并且会产生新行框
vi）行框的元素内遵循text-align和vertical-align
6、容器的高度：height = line-height + vertical-align