今天學(xué)了什么
1.margin的BUG
1給子元素設(shè)置margin-top:父元素移動鬼雀，子元素不移動
給父元素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;
}
MARGIN -（TOP/ BOTTOM）的 bug
例：
//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讀取路徑
絕對路徑：從盤符開始的路徑
【不要使用此方法】
相對路徑：相對當(dāng)前文件所在的路徑
同級目錄 src="down.jpg"
下一級目錄 src="images/down.jop
上一級目錄 src=“../down.jpg”
3 HTML表單相關(guān)元素
登錄面：
<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)用戶改進了可用性建车。如果您在 label 元素內(nèi)點擊文本，就會觸發(fā)此控件裳凸。
<label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同贱鄙。
單選框：
<!--單選框需給一樣的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="郵箱/手機號碼"/></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;
}
單選框復(fù)合選框
<!--復(fù)合選框-->
<p>
<label>愛好</label>
<input type="checkbox" name="愛好" value="游泳">游泳
<input type="checkbox" name="愛好" value="開車">開車
<input type="checkbox" name="愛好"value="旅行">旅行
</p>
下拉選框（預(yù)選框）
<select>
<option>洪山區(qū)</option>
<option>青山區(qū)</option>
<option>漢陽區(qū)</option>
</select>
預(yù)選的下拉選框
//在想要的option上加selected這個屬性
例：
<form action="">
<select>
<option>洪山區(qū)</option>
<option selected>青山區(qū)</option>
<option>漢陽區(qū)</option>
</select>
</form>
文本域（吐槽框）
例：
<textarea placeholder="看點槽點，不吐不快姨谷！別憋著逗宁，馬上大聲說出來吧！"></textarea>
【了解 特殊符號
 空格】
display和visibility的區(qū)別
display:none;
//顯示為沒有
【對比】：
visibility:hidden/visible
//可見度
visibility：hidden
//事物存在梦湘，但是隱藏了
visibility：visible
//事物可以看見
（劃重點）
雪碧圖
image.png
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;
}
《其他登入方式》的表單制作
//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;
}
input輸入框和button按鈕的區(qū)別
input有默認(rèn)的樣式padding=1px瞎颗；border=2px,高度就默認(rèn)增加了6px;
【對比】：
button有默認(rèn)的樣式box-posotion=border-box,高度不會改變
border-box(不改變邊距大小 從而擠壓內(nèi)容)
我今天掌握了什么
給父元素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;
}
MARGIN -（TOP/ BOTTOM）的 bug
例：
//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;
}
3 HTML表單相關(guān)元素
登錄面：
<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)用戶改進了可用性。如果您在 label 元素內(nèi)點擊文本宫补，就會觸發(fā)此控件檬姥。
<label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同。
單選框：
<!--單選框需給一樣的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="郵箱/手機號碼"/></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;
}
單選框復(fù)合選框
<!--復(fù)合選框-->
<p>
<label>愛好</label>
<input type="checkbox" name="愛好" value="游泳">游泳
<input type="checkbox" name="愛好" value="開車">開車
<input type="checkbox" name="愛好"value="旅行">旅行
</p>
下拉選框（預(yù)選框）
<select>
<option>洪山區(qū)</option>
<option>青山區(qū)</option>
<option>漢陽區(qū)</option>
</select>
預(yù)選的下拉選框
//在想要的option上加selected這個屬性
例：
<form action="">
<select>
<option>洪山區(qū)</option>
<option selected>青山區(qū)</option>
<option>漢陽區(qū)</option>
</select>
</form>
文本域（吐槽框）
例：
<textarea placeholder="看點槽點守谓，不吐不快穿铆！別憋著，馬上大聲說出來吧斋荞！"></textarea>
【了解 特殊符號
 空格】
display和visibility的區(qū)別
display:none;
//顯示為沒有
【對比】：
visibility:hidden/visible
//可見度
visibility：hidden
//事物存在荞雏，但是隱藏了
visibility：visible
//事物可以看見
（劃重點）
雪碧圖
image.png
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;
}
《其他登入方式》的表單制作
//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;
}
input輸入框和button按鈕的區(qū)別
input有默認(rèn)的樣式padding=1px；border=2px,高度就默認(rèn)增加了6px;
【對比】：
button有默認(rèn)的樣式box-posotion=border-box,高度不會改變
border-box(不改變邊距大小 從而擠壓內(nèi)容)
我今天沒掌握什么
input輸入框input type="text"和input type="submit"間的區(qū)
【主要是用的少 不掌握 實質(zhì)不太清楚】
