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

頁面中包含多個(gè)大區(qū)塊，每個(gè)區(qū)塊都占據(jù)了整個(gè)視口的寬度，區(qū)塊的背景也各不相同。

內(nèi)容是定寬的，即使在不同分辨率下的寬度不一樣，那也只是因?yàn)槊襟w查詢改變了這個(gè)固定的寬度值而已。在某些情況下，不同區(qū)塊的內(nèi)容也可能具有不同的寬度。

有時(shí)候，整個(gè)網(wǎng)頁都是由這種風(fēng)格的多個(gè)區(qū)塊組成的滿屏背景的定寬內(nèi)容。不過在更多的情況下，頁面中只有某個(gè)特定區(qū)域是以這個(gè)風(fēng)格來設(shè)計(jì)的，最典型的就是導(dǎo)航或頁腳。

要實(shí)現(xiàn)這種設(shè)計(jì)風(fēng)格，最常見的方法就是為每個(gè)區(qū)塊準(zhǔn)備兩層元素：外層用來實(shí)現(xiàn)滿屏的背景，內(nèi)層用來實(shí)現(xiàn)定寬的內(nèi)容。后者是通過 margin: auto實(shí)現(xiàn)水平居中的。舉例來說，采用這種設(shè)計(jì)的頁腳通常需要把結(jié)構(gòu)代碼寫成：

同時(shí)用 CSS 來設(shè)置這兩層元素的樣式：

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

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

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

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