前兩天有朋友去面試，問到了一個對柵格化布局的理解
首先柵格化布局已經存在很久了，他們也常常會被綁定到bootstrap之類的框架上。那我們如果不需要接入整個框架，做一個自己的柵格化的布局又是怎么做的呢？
柵格化布局中需要的內容：
container 容器 ：目的是設置整個柵格化布局的寬度，通常一般這個寬度設置為100%，但是或許你想為屏幕較大的媒體設置一個最大的寬度（max-width）如果box-sizing的值不是border-box,給寬度是百分比的元素設置一個固定的padding值是一個痛苦的事情。好在設置為border-box后，方便了太多。
container{width：100%；
box-sizing：border-box；
}
row 行：行元素的目的是防止他的內部的列column元素溢出到別的行，為了實現這個目的，我們需要clearfix；來清除浮動
.row：bofore，.row：after{
content：“”，
display：table；
clear：both；
}
column列：列是柵格系統縱向排布依據，常用的PC端是12列，移動端是6列。列數越多縱向排布內容就可以越細致，但是版面內容就會變的更稠密，內容更碎。
Float inline-block display:table display:flex 這些css中所有的定位的方法.以float為例;當所有的列都是空的話,他們會疊加起來.為了避免這個,我們將會給列設置float屬性再設置最小的高度1px
[class*='col-']{
float:left;
min-height:1px;
}
列的寬度:為了得到一個列的寬度我們需要容器(container)的寬度/列的總數;以container的寬度是100%,列的寬度就是100%/6=16.6%
[class*='col-']{
float:left;
min-height:1px;
width:16.6%;
}
然后呢
.col-1{
width:16.6%
}
.col-2{
width:33.33%
}
....
.col-6{
100%
}
注意:(這里敲黑板)我們現在是6列為例,自己的項目自己設定的列的總數,自己設置)
每一列的間距
如果box-sizing的值不是border-box,給寬度是百分比的元素設置一個固定的padding值會有問題,但是box-sizing設置后,說明摒棄了ie8的瀏覽器.
container-wrap{
box-sizing:border-box;
}
[class*='col-']{
float:left;
min-height:1px;
width:16.6%;
padding:10px;
}
這樣一個簡單的柵格化的布局就好了
整體的代碼貼出啦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
list-style: none;
}
.container-wrap{
width:100%;
box-sizing: border-box;
min-width:1200px;
}
.row:bofore,.row:after{
content:"";
display: table;
clear:both;
}
[class*='col-']{
float:left;
min-height:1px;
width:16.6%
padding:10px;
}
.col-1{
width:16.6%;
}
.col-2{
width:33.3%;
}
.col-3{
width:50%;
}
.outline,.outline *{
outline: 1px solid blue;
}
</style>
</head>
<body>
<div class="container-wrap outline">
<ul class="row">
<li class="col-1">col-1</li>
<li class="col-1">col-1</li>
<li class="col-1">col-1</li>
<li class="col-1">col-1</li>
<li class="col-1">col-1</li>
<li class="col-1">col-1</li>
</ul>
<ul class="row">
<li class="col-2">col-2</li>
<li class="col-2">col-2</li>
<li class="col-2">col-2</li>
</ul>
<ul class="row">
<li class="col-3">col-3</li>
<li class="col-3">col-3</li>
</ul>
</div>
</body>
</html>
形成的效果如下:
