一些有趣的 CSS 魔法和佈局(上)
前言
佈局和樣式,是每個前端的必修課。在日常的工作中,也會碰到一些特定場景的佈局需求,配合上樣式,就能實現一些神奇的效果。我搜羅了一些日常開發中遇到的佈局,以及瀏覽各大網站時碰巧發現的神奇特效寫法,在此做個分享。
由於篇幅原因,會分為 2 篇。今天,會先介紹一些有趣而又實用的佈局的寫法。之後的一篇,將展現樣式的神奇魔法。
懶載入佔位圖自適應
在商城中展示商品圖片時,如果圖片較多,一種比較好的體驗是:會先有一個佔位圖,目的是為了讓頁面無抖動,也就是所謂的圖片懶載入效果。但是,當遇到適配時就比較頭痛,特別是手機的橫豎屏切換。如果是通過 JavaScript 計算的話,就可能會出現抖動現象。
本著能用 CSS,就不用 JS 去實現的原則,就有了下面這種方案:
<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; }
可以適配不同螢幕,只要 UI 提供一張 4:3 的佔位圖即可。下圖展示了不同寬高,但比例相同的 2 張圖,都能完美地居中顯示。
它的原理是:
- 根據容器的寬度,按照寬高比例,自動計算出容器的實際大小,並且讓容器內的如 img 等子元素自適應寬高。
- 圖片父容器寬度 100%,父容器的高度百分比為:100 * 3 / 4 = 75%。
- 圖片 absolute 並且完全鋪滿父容器。
移動端的橫向滾動條
移動端的介面,寸土寸金。有時為了控制螢幕的滾動長度,會將一些模組橫向排列。但是,橫向排列會產生一些佈局問題。
比如,移動端的滾動條樣式,依賴與手機瀏覽器,各不相同。一種解決方案是:把滾動軸隱藏掉,但不能 overflow-x:hidden;
,不然就滾不動了。然後算好每一個橫向的塊的寬度,讓最右側的塊露出一部分,這樣使用者就知道右側的螢幕之外還有內容,可以橫向滑動。
又如果橫向滾動的寬度是未知的,因為可能會隨著業務的需要,改變橫向模組的個數,那麼橫向排布就沒法用 float 了。因為用了浮動,就得知道整個橫向滾動的寬度,整個的寬度要比浮動塊累加起來的寬度更寬,才能保證浮動不換行。
所以,就有了下面這樣的寫法:
<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; }
它的思路是:ul 設定 white-space:nowrap;
,li 設定 display:inline-block;
。最外層的 div 利用高度差,把橫向滾動條藏起來。
頂部導航不定寬的居中展示
一些官網,有頂部導航欄,導航欄的內容區往往需要居中展示,兩旁則留白,導航欄的下方可能還有根線或者陰影,作為區分頂部與主體內容。
.center-float { float: left; position: relative; left: 50%; } .center-float > ul { position: relative; left: -50%; }
這是居中浮動的一種做法,再配合相對定位。
footer 置底
當頁面主內容區高度不夠時,footer 依然顯示在最下面。這裡當然不是指 position: fixed,footer是緊跟在內容區下方的。有 2 種方法。
html 結構如下:
<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; }
超寬的背景圖片居中
一些傳統的入口網站,它們的主內容區寬度大致為 980px 或 1000px 這樣的經典寬度。有時候,會把較寬的圖片作為整體背景圖,居中放置,並且不要橫向滾動軸,可以這麼做:
.wrapper { min-width: 1000px; height: 800px; background: url(test.jpg) no-repeat center top; } .mainContent { position: relative; width: 1000px; margin: 0 auto; }
::after 實現水平垂直居中
偽元素也能用來實現居中麼?當時看到的一感覺就覺得挺神奇的,看下面這個例子:
<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; }
水平方向很好理解。垂直方向,可以理解為 ::after 把 img 往下拉到了中間。
總結
今天介紹的內容,主要以佈局為主,或是工作中遇到的,或者是在某個網站看到的,就研究了一把,順道在此做個分享。
它們的解法當然不唯一,如果你有更好的佈局方案,也歡迎留言,我會再做更新,期待更多的交流。
PS:歡迎關注我的公眾號 “超哥前端小棧”,交流更多的想法與技術。