>### A.今天学什么？
#### 1.`css`文本
- ##### 1.1文本修饰介绍
- color: ; 设置颜色 十六进制 RGB 颜色英文单词 等
- text-align: ; 设置文本对齐方式 left | center | right
- text-decoration: ; 文本修饰 underline | line-through | overline |none 分别为：下划线 中划线 上划线 无
- text-indent: ; 文本缩进，1em = 1 font-size 大小，中文文本常用
- text-transform: ; 文本转换 lowercase | uppercase | capitalize 分别为：全文小写，全文大写，首字母大写
```
// html
<p class="one">hello world</p>
// css pdding 与 margin 传参方式相同
div{
width: 100px;
height: 100px;
background-color: red;
/* margin: 100px;
只传一个参数，四个方向都发生改变
*/
/*margin: 100px;*/
/* margin: 100px 200px;
只传2个参数，第一个参数为上下，第二个参数为左右
*/
/*margin: 100px 200px;*/
/* margin: 100px 200px 300px;
传三个参数 则 第一个为 上，第二个为左右，第三个为下
*/
/*margin: 100px 200px 300px;*/
/* margin: 100px 200px 300px 400px;
传4个参数，则按照顺时针方向，依次为 上 右 下 左
*/
margin: 100px 200px 300px 400px;
}
```
#### 2.`css`字体
- ##### 2.1字体修饰介绍
- font-family: ; 设置字体 微软雅黑 宋体等
- font-size: ; 设置字体大小 单位px
- font-style: ; 设置字体斜体 倾斜 正常等
- font-weight: ; 设置字体权重 可以加粗字体 1-900范围
- font-height: ; 设置字体行高，一般font合用 不单写
```
// html
<p class="one">hello world</p>
// css
.one{
/* font-family
设置字体，可以设置多个，前面的无效会自动使用后面的 */
font-family: -apple-system,PingFang SC,'Microsoft YaHei';
/* font-size
设置字体大小
*/
/*font-size: 30px;*/
/* 字体样式 normal|italic */
font-style: normal;
/* font-weight 设置字体权重取数值100-900 bold|initial */
font-weight: initial;
/* font-height 行高 可使用其将字体垂直居中 */
/* 一般合起来写 16px为字体大小 32px为行高 */
font: 16px/32px pink;
}
```
#### 3.`css`列表
- ##### 3.1列表`ul-li`修饰介绍
- list-style: none; 去除列表默认样式
- list-style-type: ; 列表中li之前的图标样式 disc | square ，实心圆与正方形
- list-style-image: ; 可以将li前的样式改为指定图片
```
// html
<ul class="one">
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
// css
/* list-style: none;
去除列表样式
*/
.one{
/* list-style-type 列表样式
disc 实心圆 默认
square 正方形
*/
/*list-style-type: square;*/
/* list-style-image
将li前的样式改为图片 */
list-style-image: url("images/icon4.png");
}
```
#### 4.`css`边框
- ##### 4.1边框修饰介绍
- border: 1px #333 solid; 粗细 颜色 实线solid或者虚线dashed
- 可以使用top、left、right、bottom来进行单面设置边框
```
// html
<div class="one"></div>
// css
.one{
/* 边框 border 粗细 颜色 样式
样式分:solid 实线 dashed虚线
*/
border: 1px #333 solid;
}
```
#### 5.`css`表格
- ##### 5.1表格介绍
- table -- 表格定义
- thead -- 定义表格的表头
- tbody -- 定义表格的主体
- tr -- 定义表格的行
- th -- 表头单元格
- td -- 标准单元格
- ##### 5.2表格修饰介绍
- border-collapse: ; collapse单元格合并
- 表格内部边框通过th、td的border设置
- colspan 用于设置水平合并几个单元格，如果主体有3个标准单元格，表头想要合并3个单元格，则在th中样式 colspan="3"
- rowspan 用于设置垂直合并几个单元格，使用rowspan时，不可以设置thead和tbody，因为此时表头为rowspan垂直合并的单元格
- 有间隔的表格，在表格与表格之间加一个tr，再给一个高度即可
```
// html
<table class="one">
<thead>
<tr>
<th>手机</th>
<th>商城</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="">小米</td>
<td>小米商城</td>
</tr>
<tr>
<td>苹果</td>
<td>亚马逊</td>
</tr>
<tr>
<td>华为</td>
<td>天猫</td>
</tr>
</tbody>
</table>
// css
.one{
width: 500px;
/* 边框折叠，collapse则将所有边框合并为一条 */
border-collapse: collapse;
line-height: 30px;
text-align: center;
}
.one th,.one td{
border: 1px #333 solid;
}
```
#### 6.`css`轮廓和透明度and盒子尺寸
- ##### 6.1轮廓
- outline: ; 轮廓不会增加盒子的宽度，其余用法与border相同
- outline: none; input框不使用outline则点击不会变色
```
// html
<div class="one"></div>
<input class="two" type="text">
// css
.one{
/* 轮廓不会增加盒子的宽度，其余用法与border相同 */
width: 100px;
height: 100px;
outline: 1px #333 solid;
}
.two{
/* input框不使用outline则点击不会变色 */
outline: none;
}
```
- ##### 6.2透明度
- opacity 设置透明度 从1-0，依次变得更透明
```
// html
<div class="one">
<div class="two"></div>
</div>
// css
.one{
width: 200px;
height: 200px;
background-color: red;
opacity: 0.5;
}
.two{
width: 100px;
height: 100px;
background-color: #333;
}
```
- ##### 6.3盒子尺寸
- box-sizing: ; 默认值content-box：边框和内边距增加宽高；设置为border-box：border和padding不增加宽高。
```
// html
<div class="one"></div>
// css
/*
当盒子模型的
box-sizing: border-box;
默认为content-box
设置border，padding，它的宽高不会发生改变
*/
.one{
width: 100px;
height: 100px;
background-color: red;
box-sizing: border-box;
border-right: 5px #333 solid;
padding: 5px;
}
```
#### 7.浮动
- ##### 7.1浮动与其相关属性
- float: ; 可以设定浮动方向 left | right | top 等等
- clear: ; 该属性规定元素的哪一侧不允许其他浮动元素。left|right|both|none|inherit，both两边都不允许出现浮动元素，inherit，从父类继承。
- ##### 7.2浮动的特性
```
// html
<div class="parent">
<div class="child"></div>
<div class="child2"></div>
</div>
// css
.parent{
width: 200px;
background-color: red;
}
.child{
width: 100px;
height: 50px;
background-color: yellow;
/* 设置浮动后，发现父元素不见了，高度坍塌了
这是因为浮动之后，.child脱离文档流，父元素无法继承子元素的高度
*/
float: left;
}
.child2{
/* 可以看到，孩子1没有浮动的时候，孩子1在上，孩子2在下
孩子1浮动后，孩子2挤上去了，如果孩子2不想受到孩子1浮动的影响
则可以使用clear:both;清除浮动的影响
*/
clear: both;
width: 150px;
height: 150px;
background-color: green;
}
```
- ##### 7.2浮动的清除
- 方法1：overflow: hidden;
- 方法2：再设置一个子元素，设置其属性clear: both;
- 方法3：使用 :after{content: "";display: table;clear: both;}，类似于方法2，但是不需要重新建一个子元素，更方便。
```
// html
<div class="parent">
<div class="child"></div>
<div class="child2"></div>
</div>
// css
.parent{
/* 子元素浮动，想要父元素高度不坍塌 */
/* 方法1 overflow:hidden
overflow 属性规定当内容溢出元素框时发生的事情。
hidden:内容会被修剪，并且其余内容是不可见的。
并且，还可以清除子元素的浮动，因为子元素虽然浮动了，但还是其子元素
所以会将没有溢出的内容显示出来，也就清除了浮动
*/
width: 300px;
background-color: red;
}
.child{
width: 100px;
height: 50px;
background-color: yellow;
float: left;
}
/* 方法2：再加一个子元素，使用clear: both; */
.child2{
clear: both;
}
/* 方法3：最常用方法 */
.parent:after{
content: "";
display: table;
clear: both;
}
```
#### 8.定位
- ##### 8.1相对定位
- postion: relative; 相对定位--即元素原先正常存在的位置。元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移。
- ##### 8.2绝对定位
- postion: absolute; 绝对定位--相对于设置了定位的父级元素定位。相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位
```
// html
<div class="parent">
<div class="child"></div>
</div>
<div class="content"></div>
// css
.parent{
width: 200px;
height: 200px;
background-color: red;
/* 相对定位--即元素原先正常存在的位置
元素所占据的文档流的位置不变，
元素本身相对文档流的位置进行偏移
*/
position: relative;
left: 200px;
top: 200px;
}
.child{
width: 100px;
height: 100px;
background-color: yellow;
/* 绝对定位--相对于设置了定位的父级元素定位
相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，
如果找不到，则相对于body元素进行定位
*/
position: absolute;
left: 50px;
top: 50px;
}
/* 可以发现，.parent元素相对定位移动后，自己原先的文档流依然存在，元素占据的文档流不变
甚至2个div看上去在同一行，这是因为相对定位的元素文档流不变，自身偏移不会影响其他元素
的文档流
*/
.content{
width: 100px;
height: 100px;
background-color: #333333;
}
```
- ##### 8.3利用定位垂直居中的几种方法
- 1.将top left设为50%，margin-top为要定位的块的高度的一半，margin-left同理
- 2.将top、left、bottom、right都设置为0，margin设置为auto。可以理解为四周的拉扯都一样，自然就垂直+水平居中
```
// html
<div class="phone">
<img src="images/phone.png" alt="">
</div>
// css
*{margin: 0;padding: 0;}
html{
width: 100%;
height: 100%;
position: relative;
}
.phone img{
width: 618px;
height: 128px;
position: absolute;
/*top: 50%;*/
/*left: 50%;*/
/*margin-top: -64px;*/
/*margin-left: -309px;*/
/* 另一种方法 不需要计算margin */
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
```
- ##### 8.4固定定位
- position: fixed; 固定定位，相对于浏览器定位。元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
```
// html
<div class="one"></div>
// css
.one{
/* 固定定位，相对于浏览器定位
元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方
相对于浏览器窗口进行定位
*/
position: fixed;
right: 20px;
bottom: 100px;
width: 100px;
height: 100px;
background-color: darkturquoise;
}
```
- ##### 8.5`z-index`
- 设置元素的堆叠顺序 功能对象：设置了定位的元素。类似于权重，谁大谁在上面
```
// html
<!-- 设置元素的堆叠顺序 功能对象：设置了定位的元素
类似于权重，谁大谁在上面
-->
<div class="parent">
<div class="one"></div>
<div class="two"></div>
</div>
// css
.parent{
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.one{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
z-index: 40;
}
.two{
width: 50px;
height: 50px;
background-color: green;
position: absolute;
z-index: 30;
}
.parent:hover .two{
/* 鼠标放在.parent元素上时，更改.two的z-index
使其在上面
*/
z-index: 41;
}
```
