A:今天學(xué)到的內(nèi)容
一、margin的小問題
1、給子元素margin-top:父元素移動(dòng)现诀,子元素不移動(dòng)。
解決方案:
1.給父級(jí)加:overflow:hidden履肃;
2.給父級(jí)加偽元素:
.box:before{
content: "";
display: table;
}
2仔沿、上面元素的margin-bottom和下面元素的margin-top會(huì)重合,距離一樣取中間值尺棋,不一樣取最大值封锉。
二、HTML表單
<form action="">
<p><label for="name">用戶名</label><input type="text" id="name"></p>
<p><label for="passworld">密碼</label><input type="password" id="passworld"></p>
<p><input type="submit" value="確定"/></p>
<!-- 登錄頁面-->
<p>
<label>愛好</label>
<input type="checkbox" name="愛好" value="游泳"/>游泳
<input type="checkbox" name="愛好" value="開車"/>開車
<input type="checkbox" name="愛好" value="籃球"/>籃球
<input type="checkbox" name="愛好" value="足球"/>足球
</p>
<!--復(fù)合選框 -->
<p>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
<input type="radio" name="sex" value="妖"/>妖
</p>
<!--單選選框-->
<p>
<select>
<option value="洪山區(qū)">洪山區(qū)</option>
<option value="武昌區(qū)">武昌區(qū)</option>
<option value="漢陽區(qū)" selected>漢陽區(qū)</option>
<option value="江夏區(qū)">江夏區(qū)</option>
<option value="青山區(qū)">青山區(qū)</option>
</select>
</p>
<!--下拉選框-->
</form>
三膘螟、文本域
<textarea id="text" placeholder="請留下你的腳印">
</textarea>
四成福、display和visibility的區(qū)別
(display:none)完全清除。
(visibility:hidden)清除顯示荆残,但是高度還在奴艾。
(overflow:hidden)溢出部分隱藏。
<style>
div{
width: 100px;
height: 100px;
background-color: aquamarine;
/*visibility: hidden;*/
/*隱藏内斯,但是站位還在*/
display: none;
/*完全清除*/
}
</style>
B:學(xué)會(huì)了什么
一蕴潦、上面元素設(shè)置margin-bottom和下面元素設(shè)置margin-top的重合