這篇文章主要介紹CSS魔法和布局示例，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比鳳翔網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式鳳翔網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋鳳翔地區(qū)。費用合理售后完善，十載實體公司更值得信賴。

前言：布局和樣式，是每個前端的必修課。在日常的工作中，也會碰到一些特定場景的布局需求，配合上樣式，就能實現(xiàn)一些神奇的效果。我搜羅了一些日常開發(fā)中遇到的布局，以及瀏覽各大網(wǎng)站時碰巧發(fā)現(xiàn)的神奇特效寫法，在此做個分享。

由于篇幅原因，會分為 2 篇。今天，會先介紹一些有趣而又實用的布局的寫法。之后的一篇，將展現(xiàn)樣式的神奇魔法。

懶加載占位圖自適應(yīng)

在商城中展示商品圖片時，如果圖片較多，一種比較好的體驗是：會先有一個占位圖，目的是為了讓頁面無抖動，也就是所謂的圖片懶加載效果。但是，當遇到適配時就比較頭痛，特別是手機的橫豎屏切換。如果是通過 JavaScript 計算的話，就可能會出現(xiàn)抖動現(xiàn)象。

本著能用 CSS，就不用 JS 去實現(xiàn)的原則，就有了下面這種方案：

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

它的原理是：

• 根據(jù)容器的寬度，按照寬高比例，自動計算出容器的實際大小，并且讓容器內(nèi)的如 img 等子元素自適應(yīng)寬高。
• 圖片父容器寬度 100%，父容器的高度百分比為：100 * 3 / 4 = 75%。
• 圖片 absolute 并且完全鋪滿父容器。

移動端的橫向滾動條

移動端的界面，寸土寸金。有時為了控制屏幕的滾動長度，會將一些模塊橫向排列。但是，橫向排列會產(chǎn)生一些布局問題。

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

又如果橫向滾動的寬度是未知的，因為可能會隨著業(yè)務(wù)的需要，改變橫向模塊的個數(shù)，那么橫向排布就沒法用 float 了。因為用了浮動，就得知道整個橫向滾動的寬度，整個的寬度要比浮動塊累加起來的寬度更寬，才能保證浮動不換行。

所以，就有了下面這樣的寫法：

    

        
1
        
2
        
3
        
4
        
5
        
6
    

.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 設(shè)置 white-space:nowrap;，li 設(shè)置 display:inline-block;。最外層的 p 利用高度差，把橫向滾動條藏起來。

頂部導(dǎo)航不定寬的居中展示

一些官網(wǎng)，有頂部導(dǎo)航欄，導(dǎo)航欄的內(nèi)容區(qū)往往需要居中展示，兩旁則留白，導(dǎo)航欄的下方可能還有根線或者陰影，作為區(qū)分頂部與主體內(nèi)容。

.center-float {
    float: left;
    position: relative;
    left: 50%;
}

.center-float > ul {
    position: relative;
    left: -50%;
}

這是居中浮動的一種做法，再配合相對定位。

footer 置底

當頁面主內(nèi)容區(qū)高度不夠時，footer 依然顯示在最下面。這里當然不是指 position: fixed，footer是緊跟在內(nèi)容區(qū)下方的。有 2 種方法。

html 結(jié)構(gòu)如下：

    
        
....
        
....
    

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;
}

超寬的背景圖片居中

一些傳統(tǒng)的門戶網(wǎng)站，它們的主內(nèi)容區(qū)寬度大致為 980px 或 1000px 這樣的經(jīng)典寬度。有時候，會把較寬的圖片作為整體背景圖，居中放置，并且不要橫向滾動軸，可以這么做：

.wrapper {
    min-width: 1000px;
    height: 800px;
    background: url(test.jpg) no-repeat center top;
}

.mainContent {
    position: relative;
    width: 1000px;
    margin: 0 auto;
}

::after 實現(xiàn)水平垂直居中

偽元素也能用來實現(xiàn)居中么？當時看到的一感覺就覺得挺神奇的，看下面這個例子：

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

以上是“CSS魔法和布局示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！