CSS方案总结

一、Sticky Footer效果

无论页面内容高度如何变化，footer始终在页面底部的固定位置

body { 
    display: flex; //父元素设为flex布局
    flex-flow: column; //设为列布局，否则所有元素会在一行显示
    min-height: 100vh; //设置body最小高度，让内容不足视窗高度时也能占据整个视窗
  } 

/*高度会变化的主要部分，footer就会被挤到下一行，从而实现
footer在页面高度变化时始终在页面底部的固定位置*/
.main { 
    flex: 1; 
  }

二、垂直居中

1、绝对定位实现

.main { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
}

缺点：

• 绝对定位通常不是一个很好的选择，因为它对整体的布局影响相当的大。
• 如果垂直居中元素的内容比视窗高度更高的话，它的顶部会被裁剪掉。但是这个问题可以解决，只不过需要使用一些Hack手段。
• 在一些浏览器中，可能会导致元素出现略微的模糊，那是因为元素有可能被放置在半个像素位置上。我们可以通过transform-style:preserve-3d来解决，尽管这是一个Hack手段，不能保证它不会过时。

2、在视窗中垂直居中

main { 
  width: 18em; 
  padding: 1em 1.5em; 
  margin: 50vh auto 0; 
  transform: translateY(-50%); 
}

三、流体背景，固定宽度内容

• 有多个内容部分
  ,每个内容都占据整个视窗宽度而且都有不同的背景。
• 固定宽度的内容，即使宽度会根据不同的媒体查询修改。在某些情况之下，不同的区域
  会有不同的内容宽度著作权归作者所有。
  完成这样的效果最常见的方法就是使用两个元素，一个用于流体的背景，另一个用于固定宽度的内容。后者使用margin: auto，让内容保持水平居中。例如，页脚的区域，他的结构如下：

CSS通常这样写：

footer {
    background: #333;
} 
.wrapper {
    max-width: 900px;
    margin: 1em auto;
}

四、