>### 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;
}
```
