Page 214 - css揭秘

或者像图 7-14 那样稍微含蓄一些）。不过在更多的情况下，页面中只有某个
特定区域是以这个风格来设计的，最典型的就是页脚（参见图 7-15）。

图 7-14
在行程预订网站 kayak.com 上，
这种设计风格是以一种极为含蓄
的方式应用到整个页面的

要实现这种设计风格，最常见的方法就是为每个区块准备两层元素：外层
用来实现满幅的背景，内层用来实现定宽的内容。后者是通过 margin: auto
实现水平居中的。举例来说，采用这种设计的页脚通常需要把结构代码写成：

<footer> HTML
<div class="wrapper">
<!-- 页脚的内容写在这里 -->
</div>
</footer>

同时用 CSS 来设置这两层元素的样式：

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

看起来很眼熟对不对？目前绝大多数的网页设计师 / 工程师都是这样写 图 7-13
的。难道为了这个效果就一定要添加一层额外的元素？我们能否在现代 CSS 一个华丽的爱尔兰网站柯诺苏葡
萄园酒庄（http://conosur.ie）就
的帮助下彻底抛弃这个累赘？
大量运用了这种设计手法

解决方案

我们先来想一想，margin: auto 在这个场景下到底发挥了什么作用。
这条声明所产生的左右外边距实际上都等于视口宽度的一半减去内容宽度的
一半。由于百分比在这里是基于视口宽度来解析的（假设所有祖先元素都没 图 7-15
有显式指定宽度），我们可以把这个外边距的值表达为 50% - 450px。实际 借宿网站 airbnb.com 在页脚中采
上，CSS 值与单位（第三版）（http://w3.org/TR/css-values-3/#calc）定义了一 用了这个设计

39 满幅的背景，定宽的内容 183

඀ࠡ JOEC