CSS实现checkbox特效
.checkDiv input {
display: none;
}
.checkDiv input+label {
background: url("uncheck.gif");
background-size: 20px 20px;
background-repeat: no-repeat;
padding-left: 20px;
}
.checkDiv input:checked+label {
background: url("checked.gif");
background-size: 20px 20px;
background-repeat: no-repeat;
padding-left: 20px;
}
<div class="checkDiv">
<input type="checkbox" id="selectId" />
<label for="selectId">我喜欢</label>
</div>
清除float浮动的方法
方法一: 为父元素设置高度或者设置成overflow: hidden
.containter2 {
height: 200px;
overflow: hidden;
}
方法二: 通过伪元素的方式
.container4::after {
content: "";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
通过float实现双栏布局
为右边的div定义 margin-left: 200px;
.container {
width: 800px;
height: 200px;
}
.left {
float: left;
width: 200px;
height: 200px;
background-color: red;
}
.right {
background-color: blue;
height: 100%;
padding-left: 20px;
margin-left: 200px;
}
<div class="container">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
Float实现三栏布局
左边div定义 float: left, 右边div定义 float: right,中间div通过margin-left和margin-right来
<style>
.container {
width: 800px;
height: 200px;
}
.left {
float: left;
width: 200px;
height: 200px;
background-color: red;
}
.middle {
height: 200px;
margin-left: 200px;
padding-left: 20px;
margin-right: 200px;
background-color: yellow;
}
.right {
float: right;
background-color: blue;
height: 200px;
width: 200px;
padding-left: 20px;
}
</style>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class="middle">middle</div>
</div>
消除inline-block元素之间空隙的方法
父元素设置 font-size: 0, 子元素设置 font-size : 14px
<style>
.container {
height: 200px;
width: 800px;
font-size: 0;
}
.left {
height: 200px;
width: 200px;
display: inline-block;
background-color: red;
font-size: 14px;
}
.right {
height: 200px;
width: 600px;
display: inline-block;
background-color: blue;
font-size: 14px;
}
</style>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
两个inline-block 元素之间不留空格, 此方法不推荐