2018-03-20

【修真院web小课堂】实现首尾固定的三种方式

大家好，我是IT修真院成都分院第11期的学员，一枚正直纯洁善良的WEB程序员 今天给大家分享一下，实现首尾固定的三种方式。

一、背景介绍

有些界面我们需要实现首尾固定的布局，比如任务七里面的游戏界面，使用后可观赏性更强。

二、解决方案

1.absolute头尾固定布局

对head、main、foot各自使用绝对定位来实现。

2.fixed首尾固定布局

对head、main、foot各自使用绝对定位来实现。

3.弹性布局实现首尾固定布局

对head、main、foot各自使用绝对定位来实现。

三、编码实战

absolute头尾固定布局

效果图

fixed头尾固定布局

弹性头尾固定布局

关键知识点：

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、脱离文档流的定位方式

绝对定位、浮动、固定定位