如今很多網(wǎng)站官網(wǎng)的設(shè)計(jì)風(fēng)格都為：
- 頁面中包含多個(gè)大的區(qū)塊叹誉，每個(gè)區(qū)塊都占據(jù)了整個(gè)視口的寬度鸯两，區(qū)塊的背景也各不相同。
-
內(nèi)容是定寬的长豁，即使不同分辨率下的寬度不一樣钧唐，那也只是因?yàn)槊襟w查詢改變了這個(gè)固定的寬度而已。在某些情況下匠襟，不同區(qū)塊的內(nèi)容也可能具有不同的寬度钝侠。
https://www.mathjax.org/
更多情況下该园，頁面中只有某個(gè)特定區(qū)域以這個(gè)風(fēng)格設(shè)計(jì)的，最典型的就是頁腳机错。如下圖：
要設(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ì)我們?cè)O(shè)計(jì)頁腳通常這樣做：
<footer>
<div class="wraper">
</div>
</footer>
.footer {
background: #333;
}
.wraper {
max-width: 900px;
margin: 1em auto;
}
缺點(diǎn)： 為了這個(gè)效果一定要多添加一層額外的元素璧亮。
解決方案
margin:auto這條聲明所產(chǎn)生的左右外邊距實(shí)際上等于視圖寬度的一半減去內(nèi)容寬度的一半萧诫。
由于百分比在這里是基于視口寬度來解析的（假設(shè)所有足下元素都沒設(shè)有顯示指定的寬度），我們可以把這個(gè)外邊距的值表達(dá)式為50% - 450px,此時(shí)我們需要CSS3中的calc()函數(shù)枝嘶，我允許我們?cè)贑SS中直接以這種簡(jiǎn)單的算式來指定屬性的值帘饶。如果用
calc()取代原來的auto。這個(gè)內(nèi)層的容器樣式就會(huì)變成：
.wraper {
max-width: 900px;
margin: 1em calc(50% - 450px);
}
之所以在頁腳要加一層元素群扶，唯一的原因就是為了給它的margin指定神奇的auto關(guān)鍵字及刻，從而實(shí)現(xiàn)內(nèi)容的水平居中布局。今我們用calc（）替代了神奇的auto竞阐，而且這個(gè)新值可以作為一個(gè)通用的CSS長(zhǎng)度值應(yīng)用到任何一個(gè)接受長(zhǎng)度值的屬性上缴饭。這意味著，只要我們?cè)敢饴嬗ǎ€可以將這個(gè)長(zhǎng)度應(yīng)用到padding上颗搂，而整個(gè)效果是保持不變的。
.footer {
max-width: 900px;
padding: 1em calc(50% - 450px);
background: #333;
}
.wraper {}
這樣我們?cè)诩儍舻臒o冗余的HTML結(jié)構(gòu)上實(shí)現(xiàn)了想要的設(shè)計(jì)風(fēng)格幕垦。
但是這個(gè)方案還是可以優(yōu)化丢氢，如果把width這一行注釋掉，你會(huì)發(fā)現(xiàn)其實(shí)并沒有什么影響先改。
原因：當(dāng)內(nèi)邊距是50%-450px時(shí)疚察，只可能給內(nèi)容留出900px之外（或大或小）的其他值仇奶，我們才能看得出區(qū)別貌嫡。由于我們想要得到的內(nèi)容寬度本來就是900px，這一行其實(shí)是冗余的猜嘱，我們可以把它去掉衅枫，讓代碼更加的DRY。
另一個(gè)優(yōu)化的地方在于朗伶，我們可以增加一條回退樣式來增強(qiáng)向后兼容性弦撩。這樣既是瀏覽器不支持calc（），我們也至少可以得到一個(gè)相對(duì)合理的內(nèi)邊距：
footer {
padding: 1em;
padding: 1em calc(50% - 450px);
background: #333;
}
我們僅花費(fèi)了三行代碼就得到了一個(gè)完美結(jié)果：樣式靈活论皆、代碼簡(jiǎn)練還具有良好的兼容性益楼！
《CSS SECRETS》
