一些有趣的 CSS 魔法和佈局（上）

時間 2019-11-06

標籤一些有趣 css 佈局欄目 CSS 简体版

原文原文鏈接

前言

佈局和樣式，是每一個前端的必修課。在平常的工做中，也會碰到一些特定場景的佈局需求，配合上樣式，就能實現一些神奇的效果。我搜羅了一些平常開發中遇到的佈局，以及瀏覽各大網站時碰巧發現的神奇特效寫法，在此作個分享。html

因爲篇幅緣由，會分爲 2 篇。今天，會先介紹一些有趣而又實用的佈局的寫法。以後的一篇，將展示樣式的神奇魔法。前端

懶加載佔位圖自適應

在商城中展現商品圖片時，若是圖片較多，一種比較好的體驗是：會先有一個佔位圖，目的是爲了讓頁面無抖動，也就是所謂的圖片懶加載效果。可是，當遇到適配時就比較頭痛，特別是手機的橫豎屏切換。若是是經過 JavaScript 計算的話，就可能會出現抖動現象。瀏覽器

本着能用 CSS，就不用 JS 去實現的原則，就有了下面這種方案：bash

<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 張圖，都能完美地居中顯示。app

它的原理是：佈局

根據容器的寬度，按照寬高比例，自動計算出容器的實際大小，而且讓容器內的如 img 等子元素自適應寬高。
圖片父容器寬度 100%，父容器的高度百分比爲：100 * 3 / 4 = 75%。
圖片 absolute 而且徹底鋪滿父容器。

移動端的橫向滾動條

移動端的界面，寸土寸金。有時爲了控制屏幕的滾動長度，會將一些模塊橫向排列。可是，橫向排列會產生一些佈局問題。flex

好比，移動端的滾動條樣式，依賴與手機瀏覽器，各不相同。一種解決方案是：把滾動軸隱藏掉，但不能 overflow-x:hidden;，否則就滾不動了。而後算好每個橫向的塊的寬度，讓最右側的塊露出一部分，這樣用戶就知道右側的屏幕以外還有內容，能夠橫向滑動。網站

又若是橫向滾動的寬度是未知的，由於可能會隨着業務的須要，改變橫向模塊的個數，那麼橫向排布就無法用 float 了。由於用了浮動，就得知道整個橫向滾動的寬度，整個的寬度要比浮動塊累加起來的寬度更寬，才能保證浮動不換行。ui

因此，就有了下面這樣的寫法：url

<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>
複製代碼

一、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;
}
複製代碼

二、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 往下拉到了中間。