今天學(xué)到了什么？
1.內(nèi)聯(lián)樣式，內(nèi)部樣式表，外聯(lián)樣式
A.內(nèi)聯(lián)樣式 一般不要這樣寫
如：<div style="width: 100px;height:100px;background:red;" >
hello world
</div>
B.內(nèi)部樣式表 不推薦
div{
width:100px;
height:100px;
background:red;
}
C.外聯(lián)樣式
<link rel="stylesheet" href="[css/common.css`](css/common.css`)">
把css寫入common.css文件中
body里面寫結(jié)構(gòu)
2.關(guān)于margin的一些問題
1給子元素margin-top:父元素移動(dòng),子元素不移動(dòng)
2.如果有兩個(gè)塊標(biāo)簽，上面的元素的margin-bottom和下面元素的margin-top會(huì)重合
解決方案1:
A.給父元素overflow:hidden;
B.給父元素設(shè)置偽元素parent:before{content:'‘”;display:table}
第二種沒有解決方案；
3定位寬高的繼承問題
如果給子元素絕對(duì)定位,它不會(huì)繼承父元素的寬度
代碼演示：
<style>
.parent{
width:300px;
height:300px;
background: red;
position: relative;
}
/* 如果給子元素絕對(duì)定位,它不會(huì)繼承父元素的寬度 */
.child{
/* width:200px; */
position:absolute;
height:50px;
background: pink;
}
</style>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
4.HTML表單相關(guān)元素
1一個(gè)登陸頁(yè)面:
A：關(guān)鍵詞:form表格 label標(biāo)簽
B:<label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。
label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標(biāo)用戶改進(jìn)了可用性。如果您在 label 元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
c:<label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同。
實(shí)例
<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>
2.單選框
A;單選框需給一樣的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>
3.復(fù)合選框
<p>
<label>愛好</label>
<input type="checkbox" name="愛好" value="游泳">游泳
<input type="checkbox" name="愛好" value="開車">開車
</p>
5下拉選框
關(guān)鍵字：select 選擇 option選項(xiàng)
<select>
<option>洪山區(qū)</option>
<option>青山區(qū)</option>
<option>漢陽(yáng)區(qū)</option>
</select>
6.預(yù)選的下拉選框
//在想要的option上加selected這個(gè)屬性
<form action="">
<select>
<option>洪山區(qū)</option>
<option selected>青山區(qū)</option>
<option>漢陽(yáng)區(qū)</option>
</select>
</form>
7.文本域
<textarea placeholder="看點(diǎn)槽點(diǎn)！"></textarea>
8.input type=”text”與 type=”submit”之間的區(qū)別
input type="sumit"時(shí)給邊框不會(huì)改變它的width,height
兩者的區(qū)別是submit按鈕能提交表單。而button只是一個(gè)純粹的按鈕，在沒有加什么[js代碼]的情況下，它只是個(gè)裝飾。不過，如果加了[js代碼]后，button按鈕就可以實(shí)現(xiàn)submit按鈕的一切效果。
type 的取值一般有text,button,submit,reset,file,radio,checkbox。這幾個(gè)都是在網(wǎng)頁(yè)中比較見的元素。
9display和visibility的區(qū)別
visibility:hidden；
display:none ；
visibility: hidden----將元素隱藏 相當(dāng)與透明度給0，將元素隱藏，但是在網(wǎng)頁(yè)中該占的位置還是占著。
display: none----時(shí)元素直接從頁(yè)面上消失了，將元素的顯示設(shè)為無，即在網(wǎng)頁(yè)中不占任何的位置。
10.
iframe> 標(biāo)簽規(guī)定一個(gè)內(nèi)聯(lián)框架。
一個(gè)內(nèi)聯(lián)框架用來在當(dāng)前 HTML 文檔中嵌入另一個(gè)HTML文檔
<iframe src="我的.html" frameborder="0"name="frame"></iframe>
<a href="test01.html" target="frame">test</a>
11
1.當(dāng)遇到一個(gè)非文本的元素，想讓其垂直居中用定位
2.內(nèi)聯(lián)元素一些奇怪的現(xiàn)象
:給button設(shè)置margin-top,span也跟著移動(dòng)
<div>
<button>btn</button>
<span>深圳</span>
<span>廣州</span>
<div>
3.overflow:hidden;
