css---页面footer总结

正好学习页面页脚部分 看了一些文章，自己总结了一下：

一、始终位于页面下方（不随滚动条的下移而发生变化）

    height: 50px;
    width: 100%;
    bottom: 0px;
    position: fixed;

文字居中

    text-align: center;

效果：

二、始终位于文章的下方

1.绝对位置法

    position: absolute;
    bottom: 0px;

需要注意的是，如果文章少于页面则页脚也会跟随上移，解决的办法则是加一条

    min-height:100%;

2.负margin法

margin-top: -40px;
height: 30px;

该方法的使用前提是：

1、整个body必须分为两大块，如上html代码结构，一块正文内容（顶部导航栏可以放到里面写），一块页脚。

2、如果必须增加与.footer的同级的元素，则这个元素必须不增加正常文档流脱的高度，可以使该元素脱离文档流。

方法一个人看来理解起来比较绕，而且让body脱离文档流也可能会出现意料外的问题。

这种方法不破坏文档流，所有元素都是顺序定位的，因此直接就符合了“当内容多于窗口高度时页脚显示在所有内容最下面”的要求，