一. label標(biāo)簽
1. 概念：
HTML <label>元素表示用戶界面中項(xiàng)目的標(biāo)題。
它通常關(guān)聯(lián)一個(gè)控件，或者是將控件放置在label元素內(nèi)，或者是用作其屬性。這樣的控制稱作label元素的labeled control
2. 用法：
- 用法1：
<label>Click me <input type="text" id="User" name="Name" /></label>
- 用法2：
<label for="User">Click me</label>
<input type="text" id="User" name="Name" />
二. background-position屬性
1. 概念：
background-position屬性用來指定背景圖片的初始位置；這個(gè)初始位置相對(duì)于background-origin定義的背景位置圖層來說的
2. 用法:
background-position:[position-x]，[position-y]
如果只有一個(gè)值被指定，則這個(gè)值就會(huì)默認(rèn)設(shè)置背景圖片位置中的水平方向，與此同時(shí)垂直方向的默認(rèn)值被設(shè)置成50%。在關(guān)鍵詞、百分比和數(shù)值混合指定的情況下，關(guān)鍵詞 left 和 right 只能被指定水平方向的位置（第一個(gè)值）同時(shí) top 和 bottom 只能被指定指定為垂直方向的值（第二個(gè)值）。同樣，負(fù)數(shù)值是允許指定的。
三. 偽類和偽元素
1.概念：
偽類：存在的意義是為了通過選擇器找到那些不存在于DOM樹中的信息以及不能被常規(guī)CSS選擇器獲取到的信息。
偽類由一個(gè)冒號(hào):開頭，冒號(hào)后面是偽類的名稱和包含在圓括號(hào)中的可選參數(shù)。
常用偽類:
:active 向被激活的元素添加樣式。
:focus 向擁有鍵盤輸入焦點(diǎn)的元素添加樣式。
:hover 當(dāng)鼠標(biāo)懸浮在元素上方時(shí)，向元素添加樣式。
:link 向未被訪問的鏈接添加樣式。
:visited 向已被訪問的鏈接添加樣式。
:first-child 向元素的第一個(gè)子元素添加樣式。
:checked 向選中的控件元素添加樣式
偽元素:偽元素在DOM樹中創(chuàng)建了一些抽象元素，這些抽象元素是不存在于文檔語言里的（可以理解為html源碼）；
注意:css3為了區(qū)分偽類和偽元素，規(guī)定偽類前面有一個(gè)冒號(hào)，偽元素前面有兩個(gè)冒號(hào)
常用偽元素
::before 作為作用元素的第一個(gè)子節(jié)點(diǎn)插入dom中
::after 作為作用元素的最后一個(gè)子節(jié)點(diǎn)插入dom中
2.區(qū)別與聯(lián)系
- 聯(lián)系：都是通過選擇器為元素添加樣式
- 區(qū)別:偽元素會(huì)創(chuàng)建一個(gè)元素，但不是真正的Html元素，偽類相當(dāng)于為一個(gè)元素創(chuàng)建一個(gè)class樣式
四、自定義控件的原理
隱藏原生input標(biāo)簽，使用label，并且給之加樣式來實(shí)現(xiàn)自定義控件
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定義checkbox,radio樣式</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id='wrap'>
<h2>偽元素實(shí)現(xiàn)：</h2>
<div class="checkbox">
<input type="checkbox" name="" id="checkBox" class="checkBox">
<label for="checkBox"></label>
</div>
<div class="radio">
<input type="radio" name="sex" id="radioBox" class="radios">
<label for="radioBox"></label>
<input type="radio" name="sex" id="radioBox1" class="radios">
<label for="radioBox1"></label>
</div>
<h2>雪碧圖實(shí)現(xiàn)：</h2>
<div class="checkbox">
<input type="checkbox" name="" id="checkBox_sprit" class="checkBox_sprit">
<label for="checkBox_sprit"></label>
</div>
<div class="radio">
<input type="radio" name="sex1" id="radioBox_sprit" class=" radioBox_sprit">
<label for="radioBox_sprit"></label>
<input type="radio" name="sex1" id="radioBox1_sprit" class=" radioBox_sprit">
<label for="radioBox1_sprit"></label>
</div>
</div>
</body>
</html>
- 偽元素方法實(shí)現(xiàn)
使用:checked偽類和::after偽元素,當(dāng)控件選中時(shí)添加偽元素到label標(biāo)簽中：
css:
.checkbox{
margin-bottom: 30px;
font-weight: 700;
}
.checkBox+label,.radios+label{
width:16px;
height: 16px;
border:1px solid #d9d9d9;
display: -webkit-flex;
display:flex;
}
.checkBox:checked+label,.radios:checked+label{
border:1px solid #d73d32;
font-weight: 700;
}
.checkBox:checked+label::after,.radios:checked+label::after{
margin: auto;
content: '2714';
color: red;
width:8px;
height:8px;
line-height: 8px;
text-align: center;
font-size: 12px;
}
input{
margin:0;
display: none;
}
/* radio */
.radio{
display: -webkit-flex;
display: flex;
width: 50px;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.radios+label{
border-radius: 50%;
}
.radios:checked+label::after{
border-radius: 50%;
width:8px;
height:8px;
line-height: 8px;
content: ' ';
background: #d73d32;
}
- 雪碧圖實(shí)現(xiàn)方法:
給label加一個(gè)背景圖片，并通過設(shè)置選中狀態(tài)時(shí)的background-position屬性
css:
.checkBox_sprit+label,.radioBox_sprit+label{
width: 16px;
height:16px;
border:none;
display: inline-block;
background:url('bg.png') no-repeat;
}
.checkBox_sprit+label{
background-position:-25px -32px;
}
.radioBox_sprit+label{
background-position: -24px -10px;
}
.checkBox_sprit:checked+label{
background-position: -60px -32px;
}
.radioBox_sprit:checked+label{
background-position: -59px -10px;
}
五. css雪碧圖和css偽元素兩種方法的比較
- 使用偽元素可以不用圖片，這樣就減少了http的收發(fā)次數(shù)，提高了網(wǎng)絡(luò)性能。
- 使用css雪碧圖，可以使還原度更加精確，代碼量減少。
