定位
“子绝父相”：子元素用绝对定位，父元素用相对定位。
定位的元素自动被转换为行内块元素，支持z-index。
文字
文字垂直居中：height和 line-height写一样就行啦。
文字加粗 font-weight:700;
精灵图
background: url(../images/footer.png) no-repeat;
//这个是先写好背景
background-position:0 -192px;
//找准所需要的图标的位置。然后定位一下，写上他的横纵坐标就可以啦。
交集选择器
```html
<div class = "aaa">
11111
<div class = "aaa">
22222
</div>
</div>
```
```css
div.aaa{
color:red;
}
```
- 注意交际选择器和正常的不一样。例如：div.aaa指的是111和222这两部分，而div .aaa指的是2222这部分。
背景
背景图片可以设置对其方式。
background: url(../images/bg.png) no-repeat top center;
背景缩放
background-size:100% 200%;
背景缩放配合精灵图的用法H
有的精灵图是正常的两倍大（为了照顾iOS）。就需要给背景图缩小一倍，再量像素。
背景渐变
ackground： webkit-1 Inear- gradient（渐变的起始位置，起始颜色，结束颜色）
多背景
bgc里边的url用逗号隔开，就想用几个用几个背景啦。
css3盒模型
css2是外加模式
css3 是内减模式 盒子不会被撑开。 用法：
<html>
<style>
div {
width: 200px;
height: 200px;
background-color: aqua;
border: 10px solid blue;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="">
</div>
</body>
</html>
过渡
transition （4个属性：给谁，何时开始，进行多长时间，速度曲线）
变形（transform）
移动 translate
缩放 scale
-
常用
transform: translate(-50%,-50%);走自己的一半。
-
注意
transform：translate； transform：scale； 这样写会层叠，要连写才能两个效果都出来。（顺序有关系，先写哪个先执行哪个）
动画（animation）
先声明后调用。
声明：@keyframes
@keyframes move {
from {
left:0:
bgc:green;
}
to {
left:100;
bgc:blue;
}
}
调用：animation：动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向
- 播放次数默认是1 无限是infinite
- 是否反方向：normal alternate（轮流反向播放）
- 调用
div
{
animation:mymove 5s infinite;
}
flex布局
父盒子写上display:flex;
子盒子给份数，flex:n;
<!DOCTYPE html>
<head>
<style>
.big{
width: 80%;
height: 100px;
display: flex;
background-color: aqua;
}
.xiao {
flex: 1;
}
.xiao:nth-child(1) {
background-color: red;
}
.xiao:nth-child(3) {
background-color: green;
}
</style>
</head>
<body>
<div class="big">
<div class="xiao"></div>
<div class="xiao"></div>
<div class="xiao"></div>
</div>
</body>
</html>
