css中的柵格布局是什么-創(chuàng)新互聯(lián)

這篇文章主要介紹css中的柵格布局是什么，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

鄱陽(yáng)ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書(shū)銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書(shū)合作）期待與您的合作！

柵格布局能將網(wǎng)頁(yè)分成簡(jiǎn)單屬性的行和列，CSS頁(yè)面布局技術(shù)允許我們拾取網(wǎng)頁(yè)中的元素，并且控制它們相對(duì)正常布局流、周邊元素、父容器或者主視口/窗口的位置。

圣杯布局

圣杯布局是一種三列布局，兩邊定寬，中間自適應(yīng)：

css：

* {
        box-sizing: border-box;
    }
    html, body{
        width: 100%;
        height: 100%;
        margin: 0;
    }
    .container{
        width:100%;
    }
    .container:after{
        display: table;
        content:".";
        clear:both;
    }
    
    .container .cl{
        float:left;
        border: 1px solid red;
        height: 200px;
    }
    
    .main{
        width:100%;
        padding 0 290px 0 320px;
        background-color: blue;
    }
    .sub{
        width: 320px;
        margin-left:-100%;
        background-color: white;
    }
    .extra{
        width: 290px;
        margin-left:-290px;
        background-color: yellow;
    }

CSS

HTML：

<body>
<div class="container">
    <div class="cl main">
    </div>
    <div class="cl sub"></div>
    <div class="cl extra"></div>
</div>
</body>

css中的柵格布局是什么

圣杯布局的原理就是當(dāng)子元素處于浮動(dòng)狀態(tài)時(shí)，設(shè)置負(fù)margin，子元素會(huì)疊蓋到兄弟元素之上?！　?/p>

那么能否用現(xiàn)在想要將其中藍(lán)色區(qū)域再次劃分成三個(gè)區(qū)域，相信有很多種辦法。但能否通過(guò)嵌套的方式實(shí)現(xiàn)呢？我們可以試一下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="window-target" content="_top">
<title>Writing to Same Doc</title>
<style type="text/css">
    * {
        box-sizing: border-box;
    }
    html, body{
        width: 100%;
        height: 100%;
        margin: 0;
    }
    .container{
        width:100%;
    }
    .container:after{
        display: table;
        content:".";
        clear:both;
    }
    
    .container .cl{
        float:left;
        border: 1px solid red;
        height: 200px;
    }
    
    .main{
        width:100%;
        padding: 0 290px 0 320px;
        background-color: blue;
    }
    .sub{
        width: 320px;
        margin-left:-100%;
        background-color: white;
    }
    .extra{
        width: 290px;
        margin-left:-290px;
        background-color: yellow;
    }
</style>
</head>
<body>
<div class="container">
    <div class="cl main">
        <div class="container">
            <div class="cl main"></div>
            <div class="cl sub"></div>
            <div class="cl extra"></div>
        </div>
    </div>
    <div class="cl sub"></div>
    <div class="cl extra"></div>
</div>

</body>
</html>

css中的柵格布局是什么

柵格系統(tǒng)的原理

css中的柵格布局是什么

假設(shè)：Flowline的寬度為W，column的寬度為c，Gutter的寬度為g，Margin的寬度為m，柵格列數(shù)為N

W = c*N + g*(N-1) + 2m；g的寬度通常為m的兩倍，所以：

W = (c+g) * N；把c+g記為C，得：

W = C * N;

大部分的柵格系統(tǒng)都是此公式的變體。

Bootstrap的柵格系統(tǒng)

下面我們將一起來(lái)看一下常見(jiàn)的柵格布局的設(shè)計(jì)和bootstrap中的設(shè)計(jì)實(shí)現(xiàn)。BootStrap中合理的使用柵格布局，必須將列放入row中，而row必須放入container中。container類在布局中主要有兩個(gè)作用：

在不同的寬度區(qū)間內(nèi)（響應(yīng)式斷點(diǎn)）提供寬度限制。當(dāng)寬度變化時(shí)，采用不同的寬度。
提供一個(gè)padding，阻止內(nèi)部?jī)?nèi)容觸碰到瀏覽器邊界。

Bootstrap中使用padding代替上文中的margin。大小為15px，如下圖所示，粉紅色為padding大小。

css中的柵格布局是什么

Row是column的容器，每個(gè)row中的column之和必須為12，不過(guò)我們可以通過(guò)嵌套的方式擴(kuò)展。Row的左右margin都為-15px，用來(lái)抵消container中的padding，如下圖藍(lán)色部分所示：

css中的柵格布局是什么

row的這種設(shè)計(jì)主要為了方便嵌套，后文中會(huì)提到。

Colomn是柵格系統(tǒng)的主角，每個(gè)column左右padding都為15px，上文中row的負(fù)margin抵消了container的padding，所以為每個(gè)column設(shè)置padding就是為了防止內(nèi)容直接觸碰邊界，同時(shí)不同的column之間擁有30px的卡槽（Gutter）。如下圖黃色部分所示：

css中的柵格布局是什么

現(xiàn)在想想上文中提到的公式：W = C * N;

上文提到row的負(fù)margin設(shè)計(jì)主要為了嵌套，如果要在column中嵌套column首先要把被嵌套的column放到row中，把row放到作為容器的column中，而不需要在放置一個(gè)container。如下圖中藍(lán)色所示，是放入column中的row的負(fù)margin區(qū)域。

css中的柵格布局是什么

現(xiàn)在將被嵌套的column放入row中，如下圖所示，上層column便是起到了container的作用。

css中的柵格布局是什么

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

網(wǎng)站名稱：css中的柵格布局是什么-創(chuàng)新互聯(lián)
鏈接URL：http://www.jbt999.com/article36/ccpppg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、外貿(mào)建站、網(wǎng)站收錄、全網(wǎng)營(yíng)銷推廣、服務(wù)器托管、移動(dòng)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容