使用calc()函數(shù)怎么實現(xiàn)滿屏背景定寬內(nèi)容

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)使用calc()函數(shù)怎么實現(xiàn)滿屏背景定寬內(nèi)容，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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

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

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

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

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

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

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

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

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

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

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

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

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