使用calc()函數怎么實現滿屏背景定寬內容

這期內容當中小編將會給大家帶來有關使用calc()函數怎么實現滿屏背景定寬內容，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

<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;
}

上述就是小編為大家分享的使用calc()函數怎么實現滿屏背景定寬內容了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。