一个行列式布局库和一个基础库.md

一个行列式布局库和一个基础库

行列式布局这个是从菜鸟教程上拿来的，按自己需要加上了十分之N的列，适合生成方方正正的页面。有用到box-sizing:border-box;所以兼容性为IE8以上，其他浮动清浮动什么的也没啥问题。代码不多，直接粘上来了。

.row * {
    box-sizing: border-box;
}

.row:after {
    content: "";
    clear: both;
    display: block;
}

[class*="col-"] {
    float: left;
    position: relative;
}

.col-01 {
    width: 10%;
}

.col-02 {
    width: 20%;
}

.col-03 {
    width: 30%;
}

.col-04 {
    width: 40%;
}

.col-05 {
    width: 50%;
}

.col-06 {
    width: 60%;
}

.col-07 {
    width: 70%;
}

.col-08 {
    width: 80%;
}

.col-09 {
    width: 90%;
}

.col-010 {
    width: 100%;
}

.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33%;
}

.col-11 {
    width: 91.66%;
}

.col-12 {
    width: 100%;
}

然后是公司的公共库,这个嘛，是我领导以前写的，跟张鑫旭张大神写的很像。将常用的属性、赋值提取出来，用在小杂碎上不需要再单独想类名这样的使用场景。

当然了，项目做大了就该用上用SASS或LESS啦。