首頁  >  文章  >  web前端  >  談談css中的柵格佈局(圖文)

談談css中的柵格佈局(圖文)

青灯夜游
青灯夜游轉載
2021-01-13 18:53:062561瀏覽

談談css中的柵格佈局(圖文)

(學習影片分享:css影片教學

#網格佈局能將網頁分成簡單屬性的行和列,CSS頁面佈局科技讓我們可以拾取網頁中的元素,並且控制它們相對正常佈局流、週邊元素、父容器或主視窗/視窗的位置。

聖杯佈局

聖杯佈局是一種三列佈局,兩邊定寬,中間自適應:

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中的柵格佈局(圖文)

聖杯佈局的原理就是當子元素處於浮動狀態時,設定負margin,子元素會疊蓋到兄弟元素之上。  

那麼能否用現在想要將其中藍色區域再次劃分成三個區域,相信有很多種辦法。但能否透過嵌套的方式實現呢?我們可以試試看:

<!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中的柵格佈局(圖文)

柵格系統的原理

談談css中的柵格佈局(圖文)

##假設:Flowline的寬度為W,column的寬度為c,Gutter的寬度為g,Margin的寬度為m,柵格列數為N

W = c*N g*(N-1) 2m;g的寬度通常是m的兩倍,所以:

W = (c g) * N;把c g記為C,得:

W = C * N;

大部分的柵格系統都是此公式的變體。

Bootstrap的柵格系統

下面我們將一起來看常見的柵格佈局的設計和bootstrap中的設計實作。 BootStrap中合理的使用柵格佈局,必須將列放入row中,row必須放入container中。 container類別在佈局中主要有兩個作用:

  1. 在不同的寬度區間內(響應式斷點)提供寬度限制。當寬度變化時,採用不同的寬度。

  2. 提供padding,阻止內部內容碰到瀏覽器邊界。

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

談談css中的柵格佈局(圖文)

Row是column的容器,每個row中的column總和必須是12,不過我們可以透過巢狀的方式來擴充。 Row的左右margin都為-15px,用來抵消container中的padding,如下圖藍色部分所示:

談談css中的柵格佈局(圖文)

row的這種設計主要為了方便嵌套,後文會提到。

Colomn是柵格系統的主角,每個column左右padding都為15px,上文中row的負margin抵消了container的padding,所以為每個column設定padding就是為了防止內容直接觸碰邊界,同時不同的column之間擁有30px的卡槽(Gutter)。如下圖黃色部分所示:

談談css中的柵格佈局(圖文)

現在想想上文中提到的公式:W = C * N;

上文提到row的負margin設計主要為了嵌套,如果要在column中嵌套column首先要把被嵌套的column放到row中,把row放到作為容器的column中,而不需要在放置一個container。如下圖藍色所示,是放入column中的row的負margin區域。

談談css中的柵格佈局(圖文)

現在將被嵌套的column放入row中,如下圖所示,上層column就是起到了container的作用。

談談css中的柵格佈局(圖文)

更多程式相關知識,請造訪:

程式設計學習! !

以上是談談css中的柵格佈局(圖文)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:cnblogs.com。如有侵權,請聯絡admin@php.cn刪除