:before与:after伪类的应用

1.小三角样式

.tip{
    position:relative;
    display:inline-block;
    width:100px;
    margin:100px;
    padding:30px 20px;
    color:#fff;
    border:1px solid #666;
    border-radius:5px;
    background-color:rgba(0,153,51,1);
}
.tip:before{
    content:'';
    position:absolute;
    top:15px;
    left:-20px;
    border:10px solid #666;
    border-color:transparent #666 transparent transparent;
}
.tip:after{
    content:'';
    position:absolute;
    top:15px;
    left:-18px;
    border:10px solid rgba(0,153,51,1);
    border-color:transparent rgba(0,153,51,1) transparent transparent;
}
2.取消浮动

.float{
    border:1px solid #000;
    zoom:1; /*解决ie6,ie7浮动问题*/
}
.float:after{
    content:'';
    display:block;
    width:0;
    height:0;
    clear:both;
}
.fl{
    float:left;
    width:300px;
    height:200px;
    color:#fff;
    background:rgba(204,51,0,1);
}
.fr{
    float:right;
    width:300px;
    height:200px;
    color:#fff;
    background:rgba(0,102,102,1);
}

1.:after消除浮动,父元素需加zoom:1,建议使用，
2.在父元素的末尾加一个孩子，<div style="clear:both"></div>
3.在父元素中增加overflow:hidden; 不能和position配合使用，因为超出的尺寸的会被隐藏
4.在父元素中增加overflow:auto;前提是必须定义width 或 zoom:1,并且不能定义height
5.父元素一起浮动，不推荐使用
6.给父元素增加display:table,不建议使用
3.单选或复选

.simple{
    width:100px;
    height:20px;
    border:1px solid #000;
    line-height:20px;
    padding:10px;
    display:inline-block;
}
.simple input{
    display:none;
}
.simple label:before{
    content:'';
    display:inline-block;
    width:15px;
    height:15px;
    vertical-align:-2px;
    margin-right:5px;
    border:1px solid #000;
}
.simple input:checked + label:before{
    content:'';
    display:inline-block;
    width:15px;
    height:15px;
    background:rgba(255,51,0,1);
    vertical-align:-2px;
    margin-right:5px;
    border:1px solid #000;
}
.middle{
    display:inline-block;
    position:relative;
    overflow:hidden;
}
.middle input{
    display:none;
}
.middle label{
    padding:10px;
    display:inline-block;
    border:1px solid #000;
}
.middle input:checked + label{
    border:rgba(0,255,255,1) 1px solid ;
}
.middle input:checked + label:after{
    content:"";
    position:absolute;
    bottom:0px;
    right:0px;
    width:10px;
    height:10px;
    border-radius:10px 0 0 0;
    display:inline-block;
    background:#F03;
    color:#fff;
}
.hight{
    display:inline-block;
    position:relative;
}
.hight input{
    display:none;
}
.hight input + label:before{
    content:'';
    display:inline-block;
    width:48px;
    height: 24px;
    margin-right:10px;
    vertical-align:-6px;
    background:#e0e0e0;
    position:relative;
    border-radius:24px;
    transition:background 0.3s;
}
.hight input + label:after{
    content:'';
    display:inline-block;
    width:20px;
    height:20px;
    border-radius:20px;
    background:#fff;
    position:absolute;
    top:2px;
    left:2px;
    transition:left 0.32s;
}
.hight input:checked + label:before{
    background:rgba(153,0,153,1);
}
.hight input:checked+label:after{
    left:26px;
}
.diff{
    display:inline-block;
    position:relative;
}
.diff label{
    width:auto;
    height:48px;
}
.diff label input{
    display:none;
}
.diff label input + i{
    content:'';
    position:relative;
    width:48px;
    height:24px;
    border-radius:24px;
    background:#e0e0e0;
    display:inline-block;
    transition:background 0.3s;
}
.diff label input + i:after{
    content:"";
    position:absolute;
    top:2px;
    left:2px;
    display:inline-block;
    background:#fff;
    width:20px;
    height:20px;
    border-radius:20px;
    transition:left 0.3s;
}
.diff label input:checked + i{
    background:#0F0;
}
.diff label input:checked + i:after{
    left:26px;
}