Page 215 - css揭秘

个 calc() 函数，它允许我们在 CSS 中直接以这种简单的算式来指定属性的
值。如果用 calc() 取代原先的 auto，这个内层容器的样式就会变成：

! .wrapper {
别忘了在 calc() 函数中用 max-width: 900px;
空白符把 - 和 + 隔起来，否则会 margin: 1em calc(50% - 450px);
产生解析错误！这个看似怪异的 }
规则是为了向前兼容：在未来，
calc() 可能会允许使用标识符， 之所以要在页脚内加一层容器元素，唯一的原因就是为了给它的
而这些标识符本身可能会包含连
字符，容易与减号混淆。 margin 指定神奇的 auto 关键字，从而实现内容的水平居中布局。不过，现
在我们已经用 calc() 替代了这个神奇的 auto，而且这个新值实际上可以作
为一个通用的 CSS 长度值应用到任何一个接受长度值的属性上。这意味着
如果我们愿意，还可以把这个长度值应用到父元素的 padding 上，而整个效
果是保持不变的：

footer {
max-width: 900px;
padding: 1em calc(50% - 450px);
background: #333;
}
.wrapper {}

如你所见，经过这一番改造之后，我们已经把内层容器上的所有 CSS
代码都剥离干净了。也就是说，它其实已经不需要参与布局了，我们可以安
全地把它从结构代码中去掉。终于，我们在纯净无冗余的 HTML 结构上实
现了想要的设计风格。这个方案还有进一步优化的空间吗？没错。你要相
信，追求卓越的道路是永无止境的！

如果把 width 这一行声明注释掉，你会发现其实没有影响。视觉效果是
完全一样的，而且不论视口尺寸如何变化都是如此。这是为什么呢？因为当
内边距是 50% - 450px 时，只可能给内容留出 900px（2×450px）的可用空
间。只有把 width 显式地设置为 900px 之外（或大或小）的其他值，我们
才有可能看出区别。由于我们想要得到的内容宽度本来就是 900px，这一行
声明其实就是冗余的，我们可以把它去掉，让代码更加 DRY。

另一个可以优化的地方在于，我们可以增加一条回退样式来增强向后兼
容性。这样即使浏览器不支持 calc()，我们也至少可以得到一个相对合理
的内边距：

footer {
padding: 1em;
padding: 1em calc(50% - 450px);
background: #333;
图 7-16 }
Mac 上流行的生产力工具 Alfred
（http://alfredapp.com）也在官网 终于大功告成了。我们抛弃了冗余的标签，花费了三行 CSS 代码，最
上广泛采用了这种设计风格 终达成了这个完美的结果：样式灵活、代码简练，还具有良好的兼容性！

184 第 7 章 结构与布局

඀ࠡ JOEC