涉及内容：
①定位
②网站整体布局
③BFC
④IFC
①定位
设定元素在文档中的位置，会自动将标签（all）转换成块级标签
分为：1.static（默认值）静态定位,占用标准流（文档流），不能设置偏移值
2.relative：相对定位（相对于自身来进行定位），占用文档流，可以通过设置偏移值来改变它的位置，其原有的位置不能再被其它元素所占用
3 absolute：绝对定位（脱离文档流）,相对于父元素（如果父元素没有设置定位则相对于body）进行偏移，偏移之后其原有的位置会被其它元素占用,实际应用中一般是子绝父相来结合使用
4 fixed：固定定位，相对于浏览器窗口的左上角做偏移，也脱离了文档流，它与relative设定的对象无关（也就是说其父级不会影响它），一般用于固定导航栏，随着我们滚动页面该导航栏会一直显示
当多个元素应用绝对定位时元素会重叠在一起，这个时候就可以根据我们的需求来优先选择那个元素在最顶层，我们可以用z-index属性来进行设置，此属性仅在定位元素absolute上生效，static和relative无效。
具体来说：一般元素为普通流，其默认的z-index值为0，当元素脱离了普通流（我们给其设置了float或position）z-index的值为0~1之间（也可以为负值），此时将其设置大于或等于1，元素将会在定位或浮动元素之上
②网站整体布局
常用的布局方式：
1.双飞翼布局:两端固定，中间自适应。
。
。
。
。
。
。
。
。
③FC(Formatting Context)格式上下文，它是css2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了子元素如何定位，以及其他元素的关系和相互作用，它分为BFC（块级）and IFC（行级）
BFC(块级格式上下文)
形成bfc的条件：
1.必须是一个浮动元素（float：none除外）
2.定位元素（position中的absolute和fixed）
3.display（inline-block/table-cell/table-caption）
4.overflow（hidden/auto/scroll）
bfc的特性(规则)：
1.内部的盒子会在垂直方向上一个接一个的放置（块元素所具有的特性）
2.垂直方向的距离由margin的最大值来决定(解决方案：可将其中一个子盒子变成一个独立的盒子)
3.bfc的区域不会与float元素的区域重叠
4.计算bfc的高度时，浮动元素特参与计算
5.bfc就是页面上的一个独立容器，容器里面的子元素不会影响到外面元素
通过bfc可以解决：
1.解决margin重叠的问题（通过添加独立bfc）
2.解决浮动高度塌陷的问题，也就是父级元素不会被撑开（在父级元素添加overflow：hidden）
3.解决侵占浮动元素的问题，也是通过overflow：hidden，就相当于清楚浮动
IFC(行级格式上下文)
形成的条件
1.font-size
2.line-height
3.height
4.vertical-align
ifc的特性(规则)：
1.ifc的元素会在一行上，从左到右排列
2.在一行上的所有元素会在该区域形成一个行框
3.行宽的高度由包含框的高度，高度为行框中最高元素的高度
4.浮动的元素不会在行框中，并且浮动元素会压缩行框的宽度
5.行框的宽度容纳不下子元素时，子元素会自动换到下一行来显示，并且会产生新的行框
6.行框的元素类遵循text-align和vertical-align
