由于项目要兼容到IE9，因此将之前flex布局全部给换掉。今天leader让我看了kitecss这个css框架(里面的一些布局方式能比较好的兼容IE8+，里面有一些比较好的栅格布局，垂直居中等方案)。然后具体的学习了里面的一些css技巧和方法，总结如下：
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
原文来自：https://segmentfault.com/a/1190000003977098
