今天學(xué)到什么
1.CSS樣式的幾種引入方式
<link rel="stylesheet" type="text/css" href="/css.css">
位于 <head> 標(biāo)簽內(nèi)部(不建議使用)
eg:
<style>
p{color:pink;font-size:16px}
</style>
-
1.3內(nèi)聯(lián)樣式(不建議使用)
eg:
<p style=”color:pink;font-size:16px”>hello world</p>
2.定位的寬高繼承問(wèn)題
父元素給position:relative
子元素position:absolute
![如果給子元素絕對(duì)定位 它不會(huì)繼承父元素的寬度]
eg:
.parent{
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.child{
width: 100px;
height: 100px;
position: absolute;
background-color: aqua;
}
3.margin
如果父元素的第一個(gè)元素設(shè)置margin-top 父元素移動(dòng) 子元素不移動(dòng)
解決： 1.給父元素 overflow:hidden
2.給父元素設(shè)置偽元素
parent:before{
content:"";
display:table;
}
兄弟級(jí)元素margin 重復(fù)的問(wèn)題:
.first{
margin-bottom: 100px;
}
.second{
margin-top: 200px;
}
兩個(gè)之間的margin取最大值 應(yīng)為：200px;
4.表單
<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 屬性相同。
```單選框需給一樣的name名
eg:
<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>
eg:
<p>
<label>愛(ài)好</label>
<input type="checkbox" name="愛(ài)好" value="游泳">游泳
<input type="checkbox" name="愛(ài)好" value="開(kāi)車(chē)">開(kāi)車(chē)
</p>
<select>
<option>洪山區(qū)</option>
<option>青山區(qū)</option>
<option>漢陽(yáng)區(qū)</option>
</select>
<select>
<option>洪山區(qū)</option>
<option selected>青山區(qū)</option>
<option>漢陽(yáng)區(qū)</option>
</select>
在想要的option上加selected這個(gè)屬性 默認(rèn)顯示青山區(qū)
<textarea placeholder="請(qǐng)輸入。。。"></textarea>
5.input輸入框
input type="sumit"時(shí)給邊框不會(huì)改變它的width,height
type="text" 則會(huì)改變
6.display和visibility的區(qū)別
display:none; 時(shí)元素直接從頁(yè)面上消失了
visibility:hidden; 將元素隱藏 相當(dāng)與透明度給0
7.iframe
eg:
<iframe> 標(biāo)簽規(guī)定一個(gè)內(nèi)聯(lián)框架。
一個(gè)內(nèi)聯(lián)框架用來(lái)在當(dāng)前 HTML 文檔中嵌入另一個(gè)HTML文檔
技術(shù)要點(diǎn)：iframe的name值要和a標(biāo)簽的target值一樣
<iframe src="" frameborder="0" name="frame"></iframe>
<a href="first.html" target="frame">first</a>
<a href="second.html" target="frame">second</a>
8.iconfont
單一顏色：
<link rel="stylesheet" >
<i class="iconfont icon-gouwuche gouwu"></i>
彩色：
<script src="http://at.alicdn.com/t/font_720211_i0mmb2kzvo.js"> </script>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shoubing"></use>
</svg>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀(guān)點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
