记录下css的小知识，不时更新

1.div下的span标签之间有空白，为什么？怎么处理？

<div class="qs1">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

解决：span之间有换行，去掉换行，或span左浮动，然后父标签利用伪类after去除浮动

.qs1:after {
    content: '';
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;

}
.qs1 span {
    float: left;
}

2.实现一个三列布局

<div class="container">
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
</div>

flex布局

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap；
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.container{
    height: 300px;
    display: flex;;
    flex-flow: row nowrap;
}
.content {
    background: green;
    flex: 1 1 auto;
}

.left {
    background: red;
    flex: 0 0 100px;
}

.right {
    background: blue;
    flex: 0 0 100px;
}

3.div下的img底部有空隙

<div style="background: #eeeeee">
    <img style="" src="img/demo.png" alt="">
</div>

解决：图片是行内标签，垂直方向以基线对齐 vertical-align: baseline; 所以给图片设置vertical-align: middle即可。或者给图片设置display: block;