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

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

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

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

要實現這種設計風格，最常見的方法就是為每個區塊準備兩層元素：外層用來實現滿屏的背景，內層用來實現定寬的內容。后者是通過 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;}.wrapper {}

經過這一番改造之后，我們已經把內層容器上的所有 CSS代碼都剝離干凈了。也就是說，它其實已經不需要參與布局了，我們可以安全地把它從結構代碼中去掉。終于，我們在純凈無冗余的 HTML 結構上實現了想要的設計風格。這個方案還有進一步優化的空間嗎？沒錯。你要相信，追求卓越的道路是永無止境的！

如果把 width 這一行聲明注釋掉，你會發現其實沒有影響。視覺效果是完全一樣的，而且不論視口尺寸如何變化都是如此。這是為什么呢？因為當內邊距是 50% – 450px 時，只可能給內容留出 900px（2×450px）的可用空間。只有把 width 顯式地設置為 900px 之外（或大或小）的其他值，我們才有可能看出區別。由于我們想要得到的內容寬度本來就是 900px，這一行聲明其實就是冗余的，我們可以把它去掉，讓代碼更加簡潔。

另一個可以優化的地方在于，我們可以增加一條回退樣式來增強向后兼容性。這樣即使瀏覽器不支持 calc()，我們也至少可以得到一個相對合理的內邊距：

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

終于大功告成了。我們拋棄了冗余的標簽，花費了三行 CSS 代碼，最終達成了這個完美的結果：樣式靈活、代碼簡練，還具有良好的兼容性！

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。