导语
Bootstrap的12列的栅格系统大家肯定用过，但是你知道他的实现原理吗？
你能用CSS轻易的实现吗？
上面是一张规格图。在body内按照上面的规格用css实现效果(不允许使用任何第三方库)。下文主要围绕上图进行分析。
下面开始讲正题了
0. 先讲一个css属性：box-sizing(w3c上的介绍)
box-sizing 有三个值 border-box | content-box | inherit
如果值为content-box, 元素占用空间 = width + margin + padding + border;
如果值为border-box, 元素占用空间 = width, 如果有定义margin, padding, border, 则消耗width
1. 先实现DOM
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="img/avatar.jpg" width="100%" />
</div>
<div class="col-md-4">
<img src="img/avatar.jpg" width="100%" />
</div>
<div class="col-md-4">
<img src="img/avatar.jpg" width="100%" />
</div>
</div>
</div>
</body>这段代码定义了栅格系统的容器(.container), 行容器(.row)。 col-md-4, 是让这个div占(4 / 12)的列宽度。我们这里也使用12列的布局格式。
2.实现CSS
2.1 对所有元素进行初始化
这里主要定义了元素空间的计算规则
*{
margin: 0;
padding: 0;
box-sizing: border-box;/*重点*/
}
2.2 定义容器(.container)的padding
根据图片的规格要求，padding: 10px
.container{
padding: 10px;
}
2.3 定义图片所在div的大小
因为图片间隔10px, 分摊到padding-left和padding-right上，所以为5px
.col-md-4{
width: 33.3333333%;
padding-right: 5px;
padding-left: 5px;
float: left;
}
2.4 页面边距有问题！
这个时候去浏览器看下效果，细心的同学会发现第一张图片和最后一张的图片离页面边框的间隔有点大啊(此时的边距是15px, 但是一开始的要求是10px)。
2.5 利用行容器(.row)抵消边距差
分析一下就可以发现，第一个元素的间隔偏大的因为内部有 5px 的 padding-left, 最后一个也一样。这个时候，我们可以让 .row 元素 margin为负值来抵消边距差
.row{
margin-left: -5px;
margin-right: -5px;
}
2.6 大功告成。可以用浏览器看下效果啦
3.如何构建一个完整的栅格系统？
3.1 定义完整的列宽
上面的css只定义了4列的宽度，其实1-12列的宽度都需要定义。
3.2 使用媒体查询(@media)适配不同的屏幕宽度
针对不同的屏幕大小，大家可以让元素使用不同的列宽度，有兴趣的同学可以自己实现一下
3.3 其他
bootstrap里面还有col-offset等属性，这些属性大家可以去官网看一下(bootstrap栅格系统)，然后自己再实现一下。有了上面的基础，大家可以去构建属于自己的栅格系统了
314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
