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;
}
