【修真院web小课堂】实现首尾固定的三种方式
大家好，我是IT修真院成都分院第11期的学员，一枚正直纯洁善良的WEB程序员 今天给大家分享一下，实现首尾固定的三种方式。
一、背景介绍
有些界面我们需要实现首尾固定的布局，比如任务七里面的游戏界面，使用后可观赏性更强。
二、解决方案
1.absolute头尾固定布局
对head、main、foot各自使用绝对定位来实现。
2.fixed首尾固定布局
对head、main、foot各自使用绝对定位来实现。
3.弹性布局实现首尾固定布局
对head、main、foot各自使用绝对定位来实现。
三、编码实战
关键知识点：
CSS overflow 属性
实例
设置overflow属性进行滚动：
div
{
width:150px;
height:150px;
overflow:scroll;
}
属性定义及使用说明
overflow属性指定如果内容溢出一个元素的框，会发生什么。
四、更多讨论
1、这三种定位方式的优缺点
个人觉得看个人习惯，只是弹性布局在某些旧版本的浏览器上兼容性不好，要注意兼容性写法。
2、绝对定位和固定定位的区别
绝对定位是相对于浏览器窗口而言；绝对定位会随着滚动条的移动而移动；而固定定位是相对于屏幕内的网页窗口来说，滚动条移动它不动。而绝对定位是相对于父级元素。
3、绝对定位和相对定位的区别
A：相对定位（position: relative）：如果对某一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直（或水平)位置（top,right,bottom,left四值），让这个元素”相对于”它的起点进行移动。注：设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留；
B：绝对定位(position: absolute)：绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
4、脱离文档流的定位方式
绝对定位、浮动、固定定位
