在過去的幾年間，有一種網頁設計手法逐漸流行起來，我將它稱作背景寬度滿屏，內容寬度固定。這個設計的一些典型特征如下。

頁面中包含多個大區塊，每個區塊都占據了整個視口的寬度，區塊的背景也各不相同。

內容是定寬的，即使在不同分辨率下的寬度不一樣，那也只是因為媒體查詢改變了這個固定的寬度值而已。在某些情況下，不同區塊的內容也可能具有不同的寬度。

有時候，整個網頁都是由這種風格的多個區塊組成的滿屏背景的定寬內容。不過在更多的情況下，頁面中只有某個特定區域是以這個風格來設計的，最典型的就是導航或頁腳。

要實現這種設計風格，最常見的方法就是為每個區塊準備兩層元素：外層用來實現滿屏的背景，內層用來實現定寬的內容。后者是通過 margin: auto實現水平居中的。舉例來說，采用這種設計的頁腳通常需要把結構代碼寫成：

<footer>
<div class="wrapper">
<!-- 頁腳的內容寫在這里 -->
</div>
</footer>

同時用 CSS 來設置這兩層元素的樣式：

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

看起來很眼熟對不對？目前絕大多數的前端工程師都是這樣寫的。難道為了這個效果就一定要添加一層額外的元素？我們能否在現代 CSS的幫助下徹底拋棄這個累贅？

我們先來想一想，margin: auto 在這個場景下到底發揮了什么作用。這條聲明所產生的左右外邊距實際上都等于視口寬度的一半減去內容寬度的一半。由于百分比在這里是基于視口寬度來解析的（假設所有祖先元素都沒有顯式指定寬度），我們可以把這個外邊距的值表達為 50% – 450px。幸好CSS3定義了這樣一個 calc() 函數，它允許我們在 CSS 中直接以這種簡單的算式來指定屬性的值。如果用 calc() 取代原先的 auto，這個內層容器的樣式就會變成：

.wrapper {
max-width: 900px;
margin: 1em calc(50% - 450px);
}

之所以要在頁腳內加一層容器元素，唯一的原因就是為了給它的margin 指定神奇的 auto 關鍵字，從而實現內容的水平居中布局。不過，現在我們已經用 calc() 替代了這個神奇的 auto，而且這個新值實際上可以作為一個通用的 CSS 長度值應用到任何一個接受長度值的屬性上。這意味著如果我們愿意，還可以把這個長度值應用到父元素的 padding 上，而整個效果是保持不變的：

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