sass实战演练06 - 把布局拆分为12列(2):拆分和偏移

css知识点

box-sizing: border-box;

让border和padding也加入总宽度的计算之内

*{
margin: 0;
padding: 0;
font-size: 14px;
box-sizing: border-box;
};

1.拆分为12列

@for $i from 1 through 12{
.col-xs-#{$i}{
float: left;
width: 100% * ($i / 12);
border: 1px solid red;
}
}

编译之后的css如下：

.col-xs-1 {
float: left;
width: 8.33333%;
border: 1px solid red; }

.col-xs-2 {
float: left;
width: 16.66667%;
border: 1px solid red; }

.col-xs-3 {
float: left;
width: 25%;
border: 1px solid red; }

.col-xs-4 {
float: left;
width: 33.33333%;
border: 1px solid red; }

.col-xs-5 {
float: left;
width: 41.66667%;
border: 1px solid red; }

.col-xs-6 {
float: left;
width: 50%;
border: 1px solid red; }

.col-xs-7 {
float: left;
width: 58.33333%;
border: 1px solid red; }

.col-xs-8 {
float: left;
width: 66.66667%;
border: 1px solid red; }

.col-xs-9 {
float: left;
width: 75%;
border: 1px solid red; }

.col-xs-10 {
float: left;
width: 83.33333%;
border: 1px solid red; }

.col-xs-11 {
float: left;
width: 91.66667%;
border: 1px solid red; }

.col-xs-12 {
float: left;
width: 100%;
border: 1px solid red; }

在HTML模板里使用：

<div class="col-xs-6">第一列</div>
<div class="col-xs-6">第二列</div>

浏览器预览：



2.如何设置列的偏移？

有时候我们并不需要在一行中放满12列，比如我只放1列，且需要div往右偏移2列

我们定义规则如下：

col-xs-offset-xxx

其中xxx可以是1-12，其实所谓的便宜就是让该div的外边界设置一个相应的值就可以了

加入：

@for $i from 1 through 12{
.col-xs-#{$i}{
float: left;
width: 100% * ($i / 12);
border: 1px solid red;
}
.col-xs-offset-#{$i}{
margin-left: 100% * ($i / 12);
}
}

编译成css之后，我们来到模板上实验一下：

<div class="col-xs-1 col-xs-offset-4">第一列</div>
<div class="col-xs-1">第二列</div>

<div class="col-xs-1 col-xs-offset-1">第一列</div>
<div class="col-xs-1">第二列</div>