css技巧

1.如果ul下有很多li，需要在一行显示，并且设置margin。但是通常要取消第一个li的margin-left。使用：first-child有的浏览器不兼容。

解决：.li+.li{

　　　　margin-left: 5px;

　　　}

适用场景：单行左对齐，有间距

2.多行文字垂直居中

li{
　　display:table;
}
li>span{
　　display:table-cell;
　　vertical-align:middle;
}


3.设置图片宽度100%，高度等于宽度

img{
　　100%;
　　height:0;
　　padding-bottom:100%;
}

4.:after伪类+content 让大小不固定图片垂直居中

让图片垂直居中一直没有找到一个很好的办法，今天学习重温after伪类的时候突然看到一个解决方案，觉得很好。

HTML代码：
<body>
    <div class="pic_box">
        <img src="images/img-mobile-1.jpg"/>
    </div>
</body>

CSS代码：
<style>
        .pic_box{
            300px; 
            height:300px; 
            background-color:#beceeb; 
            font-size:0; 
            *font-size:200px; 
            text-align:center;
        }
        .pic_box img{vertical-align:middle;height:100px;}
        .pic_box:after{
            display:inline-block; 
            0; 
            height:100%; 
            content:"center"; 
            vertical-align:middle; 
            overflow:hidden;
        }
</style>

效果图：

5.禁止textarea拉伸的方法是设置这个 style="resize:none" 属性

设置placeholder颜色

#txt::-webkit-input-placeholder{
　　color:red;
}