>### A.今天學什么?
#### 1.`css`幾種引入方式
- ##### 1.1內聯樣式
- 直接在標簽中style=""
```
// html
<!-- 內聯樣式 權重1000,最好不要這樣寫,權重太大不容易調試 -->
<div style="width: 100px;height: 100px;background-color: red">
hello world
</div>
```
- ##### 1.2內部樣式表
- 在`html`文件`head`標簽最后使用`style`標簽,在標簽中寫樣式
```
// html
<!-- 內部樣式表 -->
<div class="inner">
內部樣式表
</div>
// css
<style>
/* 內部樣式表 */
.inner{
width: 150px;
height: 150px;
background-color: pink;
}
</style>
```
- ##### 1.3外部樣式表
- 在`html`同級目錄創建一個`css`文件夾,在文件夾里面創建專屬于該html的`css`文件,在其中寫樣式,然后在`html`文件中`head`標簽后面使用link標簽,引入`css`文件。
```
// html
<!-- 外部樣式表,請使用該種方法,達成html和css and js的解耦 -->
<div class="external">
外部樣式表
</div>
// css文件
.external{
width: 200px;
height: 200px;
background-color: aqua;
}
// link引入
<!-- 外部樣式表 -->
<link rel="stylesheet" href="css/01css.css">
```
#### 2.定位的寬度繼承
- ##### 2.1如果不設置子元素的寬,那么會自動繼承父元素的寬
- ##### 2.2如果設置子元素絕對定位,那么將不會繼承父元素的寬
```
// html
<div class="parent">
<div class="child"></div>
</div>
// css
.parent{
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
/* 如果不設置子元素的寬,那么子元素會繼承父類的寬,也就是默認寬100% */
/* 如果設置子元素絕對定位,那么將不再繼承父元素的寬 */
.child{
position: absolute;
height: 50px;
background-color: pink;
}
```
#### 3.margin-top塌陷
- ##### 3.1margin-top出現場景
- 如果給父元素的第一個子元素設置margin-top,則看上去,它的父元素也會有相同的margin值,而子元素相對于父元素則沒有margin了,但實際上盒子模型顯示無誤。這種現象稱之為margin塌陷
- ##### 3.2解決方法
- overflow: hidden; 有時候會出現問題,不推薦
- 偽元素 父元素:before{content: "";display: table;} 推薦
```
// html
<div class="parent">
<div class="child"></div>
</div>
// css
/* 如果給父元素的第一個子元素設置margin-top,則看上去,它的父元素也會有相同的margin值,
而子元素相對于父元素則沒有margin了,但實際上盒子模型顯示無誤。這種現象稱之為margin塌陷 */
.parent{
width: 300px;
height: 300px;
background-color: red;
}
/* 這種margin-top塌陷只有父元素的第一個元素設置margin-top才會出現,所以建議使用偽元素
來給父元素創建第一個子元素,這樣其余的元素設置margin-top不會造成塌陷現象
*/
.parent:before{
content: "";
display: table;
}
.child{
margin-top: 100px;
width: 100px;
height: 100px;
background-color: green;
}
```
#### 4.margin合并
- ##### 4.1margin合并出現場景
- 當兄弟子元素,第一個margin-bottom和第二個的margin-top值相同時,會發生margin合并,兩者的間距并不會是margin-bottom+margin-top,而是單純的margin-top值(這里因為兩者設置值相同,所以哪個都無所謂
- ##### 4.2解決方法
- css的一種特色,如果不想合并,那么可以將兩者margin值設置不相同。
```
// html
<div class="parent">
<div class="first"></div>
<div class="second"></div>
</div>
// css
.parent{
width: 400px;
height: 400px;
background-color: red;
}
/* 當兄弟子元素,第一個margin-bottom和第二個的margin-top值相同時,
會發生margin合并,兩者的間距并不會是margin-bottom+margin-top,
而是單純的margin-top值(這里因為兩者設置值相同,所以哪個都無所謂
css的一種特色,想要避開就將兩者的margin值設置不相同
*/
.first{
width: 100px;
height: 100px;
background-color: green;
margin-bottom: 100px;
}
.second{
margin-top: 100px;
width: 100px;
height: 100px;
background-color: #3388ff;
}
```
#### 5.form表單
- ##### 5.1`form`表單的幾種屬性-1
- `name`將你輸入的值和name屬性匹配成一個鍵值對一樣的格式,提交到form表單的action頁面,瀏覽器網址上看到的是user=11&pwd=22&sex=male
- `label`的`for`屬性,可以達到效果,點擊label框,然后轉到id為user的input框
- `input`如何變成單選框,兩個`input`框的`name`必須相同,不然form表單會認為這不是同一類別的選項。`type`的屬性為`radio`,表示使用單選框
- `input`有很多種功能,依靠`type`的種類可以實現不同的效果
```
// html
<form action="http://www.baidu.com">
<!-- label的for屬性,可以達到效果,點擊label框,然后轉到id為user的input框 -->
<!-- input的name屬性,將你輸入的值和name屬性匹配成一個鍵值對一樣的格式,提交到form表單的action頁面 -->
<div>
<label for="user">用戶名</label>
<input type="text" name="user" id="user" />
</div>
<div>
<label for="pwd">密碼</label>
<input type="text" name="pwd" id="pwd" />
</div>
<div>性別
<!-- 單選框,name必須相同,不然form表單會認為這不是同一類別的選項
radio,表示使用單選框
-->
<label for="male">男生</label>
<input type="radio" id="male" name="sex" value="male">
<label for="female">女生</label>
<input type="radio" id="female" name="sex" value="female">
</div>
<div><input type="submit">登錄</div>
</form>
// css
無
```
- ##### 5.2`form`表單的幾種屬性-2
- 復選框,將`input`的`type`屬性改為`checkbox`,`name`也要相同
- 下拉框,`select`標簽中的`option`標簽,如果想默認選擇一個`option`標簽,則在`option`標簽中加上`selected`
- 文本框,`textarea`
```
// html
<!-- 復合選框 -->
<div>
<label>愛好</label>
<input type="checkbox" name="like" />籃球
<input type="checkbox" name="like" />足球
<input type="checkbox" name="like" />乒乓球
</div>
<!-- 下拉框 -->
<div>
<select name="address" id="">
<option value="武漢">武漢</option>
<option value="宜昌">宜昌</option>
<option value="上海">上海</option>
</select>
</div>
<!-- 文本域 -->
<textarea></textarea>
```
- ##### 5.3
- `input`框使用`submit`屬性時會發生的問題,邊框不會增加input的寬高,所以需要手動增加寬高的值
```
// html
<div>
<input class="one" type="text" />
</div>
<!-- submit的input框的邊框,不會增加其寬高,所以需要另設 -->
<div>
<input class="btn" type="submit" />
</div>
// css
*{margin: 0;padding: 0;}
.one{
width: 100px;
height: 30px;
border: 1px solid #333;
}
.btn{
width: 102px;
height: 32px;
}
```
#### 6.display和visibility的區別
- ##### 6.1`display`會讓元素在頁面上真的消失,不占據文檔流
- ##### 6.2`visibility`讓元素在頁面上不顯示,但是占據文檔流
```
// html
<div>hello world</div>
// css
div{
/* visibility只是隱藏,元素還是存在頁面上,會占據一行 */
visibility: hidden;
/* 元素不存在于頁面上,不會占據文檔流 */
/*display: none;*/
}
```
#### 7.`iframe`的使用
- ##### 7.1`iframe`可以在當前頁面載入其他頁面
- 需要`iframe`的`name`屬性與a標簽的`target`屬性相同
```
// html
<!-- 要點:iframe的name屬性要與a標簽的target一樣 -->
<iframe src="" frameborder="0" name="frame"></iframe>
<a href="https://www.baidu.com" target="frame">百度</a>
<a href="https://www.taobao.com" target="frame">淘寶</a>
// css
iframe{
width: 1900px;
height: 1000px;
border: 1px solid #333;
}
```