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>