CSS优化：满幅背景，定宽内容的实现

网页设计中我们经常见以下这种效果：

通常我们的做法是：定义两层元素，外层用来实现背景，内层用来实现定宽的内容，然后通过margin：auto实现水平居中。

<footer>
  <div class="wrap">
    <!---页脚内容-->
  </div>
</footer>
<style>
footer{
  background:#333;
}
.wrap{
  max-width: 900px;
  margin: 1em auto;
}
</style>

优化

其实我们可以省略一层元素，借用 calc 来快速实现同样的效果。

<footer>
    <!---页脚内容-->
</footer>
<style>
footer{
  background:#333;
  max-width: 900px;
  padding: 1em calc(50% - 450px);
}
</style>

效果如图：
### 进一步优化

其实我们可以发现把 width 去掉实现的效果是一模一样的，因为当内边距是50%-450px时，只可能给内容留出900px（2×450px）的可用空间。只有把容器的width属性指定为900px之外（或大或小）的其他值，我们才有可能看出区别。

同时为了更好的向后兼容，即使浏览器不支持calc()，我们也至少可以得到一个相对合理的内边距，我们可以改成这样：

footer{
  padding: 1em;
  padding: 1em calc(50% - 450px);
  background: #333;
}