1晕鹊、margin的一些小問題
1.1給子元素設(shè)置margin-top:父元素移動，子元素不移動
2種解決方式
1.給父元素overflow：hidden；
2.給父元素設(shè)置偽元素parent：before{
content“”；display：table孕锄；}
例子
//HTML
<div class="one">
<div class="two"></div>
</div>
//CSS
* {
margin: 0;
padding: 0;
}
.one {
width: 500px;
height: 500px;
background-color: red;
/*overflow: hidden;*/
}
.one:before {
content: "";
display: table;
}
.two {
width: 100px;
height: 100px;
background-color: green;
margin-top: 50px;
}
1.2上面的margin-bottom和下面的margin-top會重合
例子
//HTML
<div class="one">hello</div>
<div class="two">world</div>
//CSS
* {
margin: 0;
padding: 0;
}
.one {
width: 100px;
height: 100px;
background-color: oldlace;
margin-bottom: 50px;
}
.two {
margin-top: 100px;
width: 100px;
height: 100px;
background-color: pink;
}
2、絕對路徑和相對路徑
2.1絕對路徑：從盤符開始的路徑
[圖片上傳失敗...(image-69f20-1551347122475)]
2.2相對路徑：相對當(dāng)前文件所在的路徑
同級目錄 src="down.jpg"
下一級目錄 src="images/down.jop"
上一級目錄 src=“../down.jpg”
3苞尝、 HTML表單相關(guān)元素
3.1一個登錄頁面：
<form >
<p><label for="text">文本</label><input id="text" type="text"/></p>
<p><label for="password">密碼</label><input id="password" type="password"/></p>
<p><input type="submit" value="登錄"/></p>
</form>
定義和用法
<label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）畸肆。
label 元素不會向用戶呈現(xiàn)任何特殊效果。不過宙址，它為鼠標(biāo)用戶改進(jìn)了可用性轴脐。如果您在 label 元素內(nèi)點(diǎn)擊文本，就會觸發(fā)此控件抡砂。
<label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同大咱。
3.2單選框
<!--單選框需給一樣的name名-->
<p>
<label for="male">男</label><input id="male" type="radio" name="sex" value="男">
<label for="female">女</label>
<input id="female" type="radio" name="sex" value="女">
</p>
例子
//HTML
<form action="http://www.bai.com">
<p><label>賬號：</label><input type="text" name="name" placeholder="郵箱/手機(jī)號碼"/></p>
<p><label>密碼：</label><input type="password" name="password"/></p>
<p><label></label><input type="submit"></p>
</form>
//CSS
* {
margin: 0;
padding: 0;
}
input {
width: 200px;
height: 30px;
margin-bottom: 30px;
}
form {
width: 254px;
margin: 50px auto;
background: orange;
padding: 50px;
}
label {
display: inline-block;
width: 50px;
}
3.3單選框復(fù)合選框
<!--復(fù)合選框-->
<p>
<label>愛好</label>
<input type="checkbox" name="愛好" value="游泳">游泳
<input type="checkbox" name="愛好" value="開車">開車
</p>
3.4下拉選框
<select>
<option>洪山區(qū)</option>
<option>青山區(qū)</option>
<option>漢陽區(qū)</option>
</select>
3.5預(yù)選的下拉選框
//在想要的option上加selected這個屬性
<form action="">
<select>
<option>洪山區(qū)</option>
<option selected>青山區(qū)</option>
<option>漢陽區(qū)</option>
</select>
</form>
3.6文本域
<textarea placeholder="看點(diǎn)槽點(diǎn)，不吐不快注益！別憋著碴巾，馬上大聲說出來吧！"></textarea>
 空格
3.7標(biāo)簽之間的相互轉(zhuǎn)換
display:inline|block|inline-block
3.8display和visibility的區(qū)別
display:none;
//顯示為沒有
visibility:hidden/visible
//可見度
visibility：hidden
//事物存在丑搔，但是隱藏了
visibility：visible
//事物可以看見
3.9講解登錄框下面的幾個icon
雪碧圖：
image.png
例子：
//HTML
<span></span>
//CSS
span {
width: 19px;
height: 19px;
display: inline-block;
background: #ccc url("images/icons_type.png");
background-position: -19px 0;
}
4.0有關(guān)《其他登入方式》的表單制作
例子
//HTML
<div class="box">
<fieldset class="item">
<legend align="center">其他登入方式</legend>
</fieldset>
//CSS
*{
margin: 0;
padding: 0;
}
.box{
margin:50px auto;
width: 400px;
height: 500px;
border: 1px solid saddlebrown;
box-sizing: border-box;
padding: 10px;
}
fieldset{
border: 0;
}
.item{
border-top: 1px solid #e0e0e0;
margin-top: 20px;
}
4.1input輸入框和button按鈕的區(qū)別
如設(shè)置高度一樣厦瓢，顯示的圖像為什么不一樣提揍？
input有默認(rèn)的padding=1px；border=2px,高度默認(rèn)增加了6px;
button有默認(rèn)的box-posotion=border-box,高度不會改變
4.2 input輸入框input type=”text”和input type=”submit”之間的區(qū)別
