常用样式

1. input框placeholder字体颜色

&::placeholder {
    color: #999;
};

2. 清除浮动

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

给父元素加上overflow: hidden;

缺点：
1.超出父元素的都被截掉了，会和absolute冲突
2.会和margin: 0 auto; 冲突

额外标签法

在最后一个浮动标签后，新加一个标签，给其设置clear：both；
缺点：添加了多余的标签

使用after伪元素清除浮动（推荐）

clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

使用before和after双伪元素清除浮动

.clearfix:after,.clearfix:before{
	content: "";
	display: table;
}
.clearfix:after{
	 clear: both;
}
.clearfix{
	*zoom: 1;
}
 

	
big

3. 弹出框三角形缺口

通过伪元素写一个正方形，旋转45度，然后绝对定位到你想要的位置

export const SearchInfo = styled.div`
    position: absolute;
    left: 0;
    top: 56px;
    width: 240px;
    padding: 0 20px;
    box-shadow: 0 0 8px rgba(0, 0, 0, .2);
    background: #fff;
    &::before {
        content: "";
        width: 12px;
        height: 12px;
        transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        top: -7px;
        left: 36px;
        position: absolute;
        background-color: #fff;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }
`

4. 旋转不起作用

display: block;

transform: rotate(45deg);
transform-origin: center center;

5. 盒子阴影

box-shadow: 0 0 8px rgba(0,0,0,.1);