网页设计手法之“满幅的背景，定宽的内容”

设计场景

• 视图中包含多个大区块，每个区块都占据了整个视口的宽度，区块的背景也各不相同
• 内容是定宽的，即使在不同的分辨率下的宽度不一样，那也是通过媒体查询来改变的这个固定的宽度值；在某些情况下，不同区块的内容也可能具有不同的宽度

应用场景

• 整个视图都是由这种风格的多个区块组成
• 某个特定的区域以这种风格来设计，典型的是：页脚

老式解决方案

为每个区块准备两层元素：外层用来实现满幅的背景，内层用来实现定宽的内容。
以页脚举例来说，

• 结构代码

<footer>
     <div class="wrapper">
         <!-页脚的内容 ->
     </div>
</footer>

• css风格

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

新式解决方案

• 分析：margin: 0 auto;在这个应用场景下的作用？
  此条声明所产生的左右外边距 = 视口宽度的一半 - 内容宽度的一半
  css定义了一个calc()函数，它允许我们在css中以简单的算式来指定属性的值，因此可以用它来代替auto

• 结构代码

 <footer>
    <!-页脚的内容 ->
</footer>

• css风格

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

• 优化
  一层结构
  增加一条回退样式来实现浏览器的向下兼容
• 注意
  calc()函数中必须用空格把 - 和 + 符号隔开，否则会产生解析错误

《CSS SECRETS》