南順網絡
一(yī)些有趣的(de) CSS 魔法和(hé)布局（上）
懶加載占位圖自(zì)适應
在商城中展示商品圖片時，如(rú)果圖片較多，一(yī)種比較好的(de)體驗是：會先有一(yī)個占位圖，目的(de)是為(wèi)了讓頁面無抖動，也就是所謂的(de)圖片懶加載效果。但是，當遇到适配時就比較頭痛，特别是手機的(de)橫豎屏切換。如(rú)果是通過 JavaScript 計算的(de)話，就可(kě)能會出現抖動現象。
本着能用 CSS，就不用 JS 去(qù)實現的(de)原則，就有了下面這種方案：
<div class="img-ratio"> <img src="http://via.placeholder.com/640x384"> </div>
.img-ratio {
width: 100%;
position: relative;
padding-top: 75%;
}
.img-ratio > img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}可(kě)以适配不同屏幕，隻要 UI 提供一(yī)張 4:3 的(de)占位圖即可(kě)。下圖展示了不同寬高(gāo)，但比例相同的(de) 2 張圖，都能完美地(dì)居中顯示。
它的(de)原理(lǐ)是：
根據容器的(de)寬度，按照寬高(gāo)比例，自(zì)動計算出容器的(de)實際大小，并且讓容器內(nèi)的(de)如(rú) img 等子(zǐ)元素自(zì)适應寬高(gāo)。
圖片父容器寬度 100%，父容器的(de)高(gāo)度百分比為(wèi)：100 * 3 / 4 = 75%。
圖片 absolute 并且完全鋪滿父容器。
移動端的(de)橫向滾動條
移動端的(de)界面，寸土寸金。有時為(wèi)了控制屏幕的(de)滾動長(cháng)度，會将一(yī)些模塊橫向排列。但是，橫向排列會産生一(yī)些布局問題。
比如(rú)，移動端的(de)滾動條樣式，依賴與手機浏覽器，各不相同。一(yī)種解決方案是：把滾動軸隐藏掉，但不能 overflow-x:hidden;，不然就滾不動了。然後算好每一(yī)個橫向的(de)塊的(de)寬度，讓最右側的(de)塊露出一(yī)部分，這樣用戶就知道(dào)右側的(de)屏幕之外還有內(nèi)容，可(kě)以橫向滑動。
又如(rú)果橫向滾動的(de)寬度是未知的(de)，因為(wèi)可(kě)能會随着業務的(de)需要，改變橫向模塊的(de)個數，那麽橫向排布就沒法用 float 了。因為(wèi)用了浮動，就得知道(dào)整個橫向滾動的(de)寬度，整個的(de)寬度要比浮動塊累加起來的(de)寬度更寬，才能保證浮動不換行。
所以，就有了下面這樣的(de)寫法：
<div class="wrapper"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div>
.wrapper {
width: 340px;
height: 80px;
overflow: hidden;
}
.wrapper ul {
height: 96px;
width: 100%;
white-space: nowrap;
overflow-x: scroll;
padding: 0;
margin: 0;
}
.wrapper li {
display: inline-block;
width: 80px;
height: 80px;
background-color: #ddd;
line-height: 80px;
text-align: center;
font-size: 20px;
margin-right: 10px;
}它的(de)思路是：ul 設置 white-space:nowrap;，li 設置 display:inline-block;。最外層的(de) div 利用高(gāo)度差，把橫向滾動條藏起來。
頂部導航不定寬的(de)居中展示
一(yī)些官網，有頂部導航欄，導航欄的(de)內(nèi)容區往往需要居中展示，兩旁則留白，導航欄的(de)下方可(kě)能還有根線或者陰影，作為(wèi)區分頂部與主體內(nèi)容。
.center-float {
float: left;
position: relative;
left: 50%;
}
.center-float > ul {
position: relative;
left: -50%;
}這是居中浮動的(de)一(yī)種做(zuò)法，再配合相對定位。
footer 置底
當頁面主內(nèi)容區高(gāo)度不夠時，footer 依然顯示在最下面。這裏當然不是指 position: fixed，footer是緊跟在內(nèi)容區下方的(de)。有 2 種方法。
html 結構如(rú)下：
<html> <body> <div id="content">....</div> <div id="footer">....</div> </body> </html>
1、margin & padding
html, body {
height: 100%;
}
$footer-height: 30px;
#content {
min-height: 100%;
margin-bottom: -$footer-height;
padding-bottom: $footer-height;
}
#footer {
line-height: $footer-height;
text-align: center;
}2、flex 布局
$footer-height: 30px;
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
#content {
flex: 1;
}
#footer {
line-height: $footer-height;
text-align: center; }超寬的(de)背景圖片居中
一(yī)些傳統的(de)門戶網站，它們的(de)主內(nèi)容區寬度大緻為(wèi) 980px 或 1000px 這樣的(de)經典寬度。有時候，會把較寬的(de)圖片作為(wèi)整體背景圖，居中放置，并且不要橫向滾動軸，可(kě)以這麽做(zuò)：
.wrapper { min-width: 1000px; height: 800px; background: url(test.jpg) no-repeat center top; } .mainContent { position: relative; width: 1000px; margin: 0 auto; } 複制代碼::after 實現水平垂直居中
僞元素也能用來實現居中麽？當時看到的(de)一(yī)感覺就覺得挺神奇的(de)，看下面這個例子(zǐ)：
<div class="wrapper"> <img src="test.png"> </div>
.wrapper {
width: 300px;
height: 300px;
border: 1px solid #ccc;
text-align: center; }
.wrapper::after {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.wrapper > img {
vertical-align: middle;
}水平方向很好理(lǐ)解。垂直方向，可(kě)以理(lǐ)解為(wèi) ::after 把 img 往下拉到了中間。
編輯:--史志成
