# 1.margin的一些問題
子元素作為父元素的[第一個元素](5),給它margin-top會存在問題
如何解決:
~~~
//1.給父元素
overflow: hidden;
//2.給父元素設置偽元素
parent{
content:"";
display: table;
}
~~~
兩個兄弟元素之間,margin重合的問題
# 2.表單
~~~
//input輸入框type不同
1.text 2.password 3.submit 4.radio 5.checkbox
<input type="text">
~~~
### 2.1一個簡單的登錄界面
~~~
<form>
<div>
<label for="text">文本</label>
<input id="text" type="text" />
</div>
<div>
<label for="password">密碼</label>
<input id="password" type="password" />
</div>
<div>
<input type="submit" value="登錄" />
</div>
</form>
~~~
//定義和用法
<label> 標簽為 input 元素定義`標注`（標記）。
label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。
<label> 標簽的` for 屬性`應當與相關元素的` id 屬性相同`。
### **2**.2單選框
技術要點:`name名相同`
~~~
<div>
<label for="male">男</label>
<input id="male" type="radio" name="sex" value="男">
<label for="female">女</label>
<input id="female" type="radio" name="sex" value="女">
</div>
~~~
### 2.3復合選框
~~~
<div>
<label>愛好</label>
<input type="checkbox" name="愛好" value="游泳">游泳
<input type="checkbox" name="愛好" value="開車">開車
</div>
~~~
### 2.4下拉選框
~~~
<select>
<option>洪山區</option>
<option>青山區</option>
<option>漢陽區</option>
</select>
~~~
### 2.5預選下拉
~~~
<form >
<select>
<option>洪山區</option>
<option selected>青山區</option>
<option>漢陽區</option>
</select>
</form>
~~~
### 2.6文本域
~~~
<textarea placeholder="看點槽點，不吐不快！別憋著，馬上大聲說出來吧！">
</textarea>
~~~
### 2.7特殊字符
~~~
 空格 << >>
~~~
再說input輸入框
**input type=”text”**
**type=”submit”** 之間的區別
**面試題**
### **2.8display**和**visibility**的區別
**display:none;**
**visibility:hidden;**
### **2.9**
**講解登錄框下面的幾個**icon
### **2.10**
**調試代碼**
**實現一個美化的checkbox**
[**https://docs.ibase.work/cssTutorial/2chan-pin/210mei-hua-checkbox.html**](https://docs.ibase.work/cssTutorial/2chan-pin/210mei-hua-checkbox.html)
