1 margin的一點(diǎn)小問(wèn)題
<style>
/*當(dāng)子元素作為父元素的第一個(gè)元素,給它margin-top,它的父級(jí)margin-top也會(huì)改變*/
.one{
/*/!*overflow: hidden;*!/ 第一種解決方法*/
width: 600px;
height: 600px;
background-color: gray;
}
.two{
width: 100px;
height: 100px;
background-color: red;
margin-top: 100px;
}
/*第二種解決方法 給父元素前面加偽元素*/
.one:before{
content: "";
display: table;
}
</style>
2 上面的元素的margin-bottom和下面元素的margin-top會(huì)重合
<style>
.one{
width: 800px;
height: 800px;
background-color: gray;
}
.two,.three{
width: 200px;
height: 200px;
}
/*上面的元素的margin-bottom和下面元素的margin-top會(huì)重合 取大值 100px*/
.two{
margin-bottom: 50px;
background-color: blue;
}
.three{
margin-top: 100px;
background-color: yellow;
}
</style>
3 絕對(duì)路徑和相對(duì)路徑
絕對(duì)路徑：從盤(pán)符開(kāi)始的路徑
相對(duì)路徑：相對(duì)當(dāng)前文件所在的路徑
同級(jí)目錄 src='down.jpg'
下一級(jí)目錄 src='images/down.jpg'
上一級(jí)目錄 src='../down.jpg'
4 HTML表單相關(guān)元素
4.1一個(gè)登陸頁(yè)面 label
<form >
<!-- 登錄界面-->
<div>
<label for="user">用戶(hù)名</label><input type="text" id="user"/>
</div>
<div>
<label for="pwd">密碼</label><input type="password" id="pwd"/>
</div>
<div>
<input type="submit" value="按鈕名稱(chēng)" />
</div>
</form >
/*<label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）胯努。
label 元素不會(huì)向用戶(hù)呈現(xiàn)任何特殊效果奶甘。
不過(guò)草讶，它為鼠標(biāo)用戶(hù)改進(jìn)了可用性僻弹。如果您在 label 元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件
<label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同并炮。*/
4.2單選框
<form >
<!--單選框name名要相同-->
<div>
<label for="cc">男</label><input type="radio" id="cc" name="aa" />
<label for="bb">女</label><input type="radio" id="bb" name="aa" />
</div>
</form >
4.3復(fù)選框
<form >
<div>
<label>愛(ài)好:</label>
<input type="checkbox" name="bb" id="t1" value="游泳"> <label for="t1">游泳</label>
<input type="checkbox" name="bb" id="t2" value="開(kāi)車(chē)"> <label for="t2">開(kāi)車(chē)</label>
<input type="checkbox" name="bb" id="t3" value="游泳"> <label for="t3">撩妹</label>
</div>
</form>
4.4下拉選框
<select >
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="武漢" selected>武漢</option>
<option value="南京">南京</option>
</select>
預(yù)選的下拉選框
//在想要的option上加selected這個(gè)屬性
4.5文本域
<style>
textarea{
width: 500px;
height: 500px;
}
</style>
<body>
<textarea placeholder="請(qǐng)吐槽" ></textarea> /*寫(xiě)在一行不出現(xiàn)問(wèn)題*/
</body>
4.6特殊字符的顯示 &
<p> < > </p> /*可顯示符號(hào) >*/
<p>hello world </p> /*可顯示空格 >*/
更多符號(hào) 可見(jiàn) &下拉選項(xiàng)
5 標(biāo)簽之間的相互轉(zhuǎn)換
display:inline|block|inline-block
6 display和visibility的區(qū)別
display: none; 去除元素
visibility: hidden; 隱藏元素
7 輸入框和按鈕的區(qū)別
<style>
*{margin: 0;padding: 0; }
input{
width: 300px;
height: 150px;
border: 1px solid #eeeeee;
/*padding: 10px;*/
}
.two{
width: 302px;
height: 152px;
}
</style>
//輸入框可以填充,按鈕不行,要使輸入框和按鈕一樣大需要考慮輸入框的邊框
8 中間文字兩邊線效果
.line>fieldset{
border-top: 1px solid #E0E0E0;
width: 332px;
margin-top: 100px
}
fieldset{border: none;}
<div class="line">
<fieldset class="center">
<legend>其他登錄方式</legend>
</fieldset>
</div>
