谈谈css中的栅格布局（图文）(2)-木庄网络博客

当前第2页返回上一页

<!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>

栅格系统的原理

假设：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类在布局中主要有两个作用：

在不同的宽度区间内（响应式断点）提供宽度限制。当宽度变化时，采用不同的宽度。
提供一个padding，阻止内部内容触碰到浏览器边界。

Bootstrap中使用padding代替上文中的margin。大小为15px，如下图所示，粉红色为padding大小。

Row是column的容器，每个row中的column之和必须为12，不过我们可以通过嵌套的方式扩展。Row的左右margin都为-15px，用来抵消container中的padding，如下图蓝色部分所示：

row的这种设计主要为了方便嵌套，后文中会提到。

Colomn是栅格系统的主角，每个column左右padding都为15px，上文中row的负margin抵消了container的padding，所以为每个column设置padding就是为了防止内容直接触碰边界，同时不同的column之间拥有30px的卡槽（Gutter）。如下图黄色部分所示：