没有flexbox弹性盒子，但我们还有table

[CommanderXL]

由于项目要兼容到IE9，因此将之前flex布局全部给换掉。今天leader让我看了kitecss这个css框架(里面的一些布局方式能比较好的兼容IE8+，里面有一些比较好的栅格布局，垂直居中等方案)。然后具体的学习了里面的一些css技巧和方法，总结如下：

github地址

##display:table
源码里面很多将父元素display属性设为display: table。这个时候再将子元素display属性设置为inline-block属性后，运用text-align属性即可进行水平居中，水平靠左，水平靠右。

##负margin
负margin的使用技巧和应用场景其实还是挺广泛的，比如使用float和负margin现实圣杯布局，双飞燕布局等等。

具体的使用技巧和参照文章：
由浅入深漫谈margin属性
不要告诉我你懂margin
我知道你不知道负margin

然后在kitecss里面的时候主要是运用在了栅格布局上面。

    html结构：
    
    <div class="kite kite--grid has-gutter">
        <div class="kite__item is-4of12">
            <div class="fixture">.is-4of12</div>
        </div>
        <div class="kite__item is-4of12">
            <div class="fixture">.is-4of12</div>
        </div>
        <div class="kite__item is-4of12">
            <div class="fixture">.is-4of12</div>
        </div>
    </div>
    
    css：
    .kite {
        font-size: 0 !important;
    }
    .kite--grid.has-gutter {
        display: block;
        width: auto;
        margin-left: -10px;     //左基线向左移动10px
        margin-right: -10px;    //右基线向右移动10px
    }
    .kite_item {
        box-sizing: border-box;     //一定要使用border-box属性(自己不熟悉的自行google)
        display: inline-block;  //主要是为了好设置宽度
        width: 33.3333%;    //都是相对于父元素的33.3333%,即将父元素平均分成了3等份。
        font-size: 1rem;
        vertical-align: top;    //元素在水平线上的对齐方式
        padding-left: 10px;     //左内边距10px
        padding-right: 10px;    //右内边距10px;
    }

看到图上左右2边的线条没，这其实就是父元素.kite--grid的左右边界

3个子元素的宽度都是33.333%，平均的3等份，但是设置padding-left和padding-right的值都为10px的时候，正好和左右负margin抵消，这样就是现实了3列等宽布局。

##垂直居中

    html结构：
    <div class="kite kite--position">
        <div class="kit__item">
            <div class="fixture">1</div>
        </div>
    </div>
    
    css：
    .kite--position {
        display: block;
        position: absolute;
        top: 0;     //使用绝对定位也可以实现自适应哦~
        right: 0;
        height: 150px;
        text-align: center;//子元素的display属性为inline-block，因此可以实现水平居中
        font-size: 0;
    }
    .kite--position::after{ 
        display: inline-block;
        content: '';
        height: 100%;
        vertical-align: middle;
    }
    .kite__item {
        display: inline-block;
        font-size: 1rem;
        box-sizing: border-box;
    }
    .fixture {
        border: 1px solid #489;
        margin-bottom: 16px;
        min-height: 48px;
        background-color: rgba(108,200,220,0.75);
    }

css当中使用比较巧的是利用.kite--position的伪元素(content属性一定不能省，可以把值设为"")，生成一个行内元素，其高度为100%，即为父元素的高度。同时，.kite--position的子元素也声明为行内元素，因此这个时候可以利用vertical-align属性进行垂直居中.

##width:auto
这个属性平时用的不多，看源码的时候看里面用的很普遍，它的用法和width:100%还是有点区别的。
比如遇到这种结构:

    <div class="parent">
        <div class="child">123123</div>
    </div>
    
    .parent {
        position: absolute;
        left: 50px;
        top: 50px;
        width: 200px;
        height: 200px;
        border: 1px solid #e3e3e3;
    }
    .child {
        width: auto 或者 100%;
        //可以设置不同margin和padding看下效果
        border: 1px solid #e3e3e3;
    }

一般块级元素如果不添加float或者绝对定位或者设定宽度的话，它的宽度默认为100%.这个宽度仅仅是内容的宽度，如果你再设置padding或者margin值，会保持width不变，会出现盒模型伸长或者移动位置的情况。

    width = 内容

但是如果你设置为width: auto，它起到的作用实际上和申明box-sizing: border-box的一样。

    width = 内容 + padding + border;

你再怎么设置padding值和border值都是在width这个宽度里面进行设置。

可以到codepen上看看
codepen.io