一：IFC>行内元素>行内格式化下文
BFC>块级元素>块级格式化下文
BFC：独立区域，区域内发生改变与区域外没有关系。需要被触发（被生成）。Overflow hidden
1：BFC布局规则：
内部垂直
垂直方向距离由margin决定
BFC区域不会与float box重叠
BFC是页面上的一个隔离的独立容器，容器里面的子元素，不会影响外面的元素
哪些元素会生成BFC
根元素、float属性不为none。
display为inline-block / table-cell / table-caption,flex,inline-flex
overflow不为visible
ps:通常情况下用overflow 触发BFC环境
2:IFC
创建IFC环境：让行框高度包含100%，让行框内部元素使用Vation-align
不需要被触发
找到一个最大的元素来设置
二：
opacity属性设置模糊程度：例如：opacity valute 从透明值（0.0）——完全不透明（1.0）
背景蒙版模糊 rgba 效果 div hove{ raba 0 0 0 0.8}
curson:设置光标样式(pointer 箭头为手指过去成手的形状的样式)
三：CSS3模块
1：通过新边框样式改变边框样式
boder-radius（边框圆角）
根据左上、右上、右下、左下顺序分布
boder-radius:10px 全部
boder-radius：10px 20px对角相同
2：box-shadow 边框阴影
语法：box-shadow:h-shadow ,v-shadow,blur,color
例如：box-shadow: 10px 20px 10px red
文本阴影
语法：text-shadow:h-shaow,v-shaow,blur,color
ps:设置负值改变方向
四：2D和3D转换
1：2D：tansform:translate（x,y）
。。。。填写兼容的浏览器
2:rotate顺时针旋转。例如：transform：translate（45:deg）负数为逆时针
3：元素尺寸增加或减少，以倍数增加或减少
一：CSS过渡
transtion:
1：规定哪一个属性使用
2：规定效果时长
3：配合hover效果使用
wicth: height: 设计时长
二、动画
@keyframes规则
1：@keyframes用于创建动画，规定动画规则或animation属性
2：属性名称@keyframes需要捆绑在某个选择器上
规定动画名称
规定动画时长
例：div{ animation 命名 时间
@keyframes{ 0%(开始)···
20%（过程)...
100%（结束）..