过渡属性
transition:属性 时间 延迟时间 效果
property duration delay timing-function
过渡属性谁变给谁加，使用复合写法只需要写时间即可生效，属性默认是all
动画属性
定义动画：
@keyframs 动画名｛from{} 50%{} to{}｝
使用动画：
复合写法 animation:动画名 时间 延迟时间 效果 次数 交替 停止 停在哪一帧
动画时间及延迟
animation-duration/ delay：s/ms
动画效果属性及属性值
animation-timing-function:linear/ease（默认值）/ease-in/ease-out/ease-in-out
分别表示：匀速/开始时候慢，中间增快结束时变慢/逐渐加速/逐渐减速/动画以低速开始和结束
动画执行次数
animation-interation-count:数字/infinte（无限次）
动画交替
animation-direction:reverse/alternate（正反交替）
动画停止
animation-play-state:running/paused(暂停)
动画停止位置
animation-fill-mode:backwards(停在第一个关键帧)/forwards(最后一个关键帧)
过渡和动画属性的区别：
1、过渡需要鼠标触发，动画不需要鼠标触发自动执行
2、动画可以循环
3、动画可以有多个状态，添加多个关键帧
4、动画可以停止
弹性盒布局及其属性
父元素属性
形成弹性盒display:flex
主轴方向flex-direction:row/row-reverse/column/column-reverse
主轴排列方式justify-content:flex-start/center/flex-end/space-between/space-around/space-evenly
交叉轴排列方式align-items:stretch/flex-start/center/flex-end
换行属性flex-wrap:nowrap（默认不换行）/wrap
多行元素交叉轴排列方式align-content:stretch/flex-start/center/flex-end/space-between/space-around/space-evenly
子元素属性
某个子元素在交叉轴的排列方式属性align-self
排列顺序order：数值（数值越大越靠后）
压缩属性flex-shrink:1表示默认值压缩/0代表不压缩
放大属性flex-grow:1表示拿取剩余的空间（0是默认值表示不放大）
子项宽flex-basis:数值PX/百分比
复合写法：flex:放大 压缩 宽
flex:1即可表示放大属性
弹性盒小结：
- 形成弹性盒后所有元素默认横着（主轴）从左致右排列，默认即使设置了宽度也会压缩（flex-shrink=1）至容器内；
- 默认子元素没有高度的话会在交叉轴方向自动拉伸至充满容器（有高度则不会）；
- 如果设置了flex-wrap:wrap后形成多行元素，没有高度同样会拉伸至容器高度刚好能够包含所有元素，如果子元素设置了高度，子元素可能会存在下间距，原因是子元素的拉伸间距默认是已经预留出来的，这时使用多行交叉轴排列属性即可正常调整样式；
- 容器给宽高再给弹性盒，子元素不设置高，使其自动拉伸，之后使用交叉轴排列方式居中即可（高度宽度由子元素内容撑开）实现子元素内容居中显示，如果子元素设置了100%的高度，则子元素不会居中
- 子元素高度不设置，默认拉伸至充满容器，但是如果给多行交叉轴排列属性的话，没有内容的子元素会高度塌陷为0
- 形成弹性盒之后，子元素宽度被压缩，但是图片不会被压缩
- 如何形成横向滚动条（移动端常用）：第一种情况：子元素宽度由内容撑开（不设宽），再给margin（margin不会被压缩），最后给overflow：auto即可/第二种情况：子元素设置宽，给子元素设flex-shrink:0不压缩，再给overflow:auto即可
响应式界面
根据不同的浏览器的视口大小改变样式
媒体查询
@media 媒体类型 and （媒体特性）｛｝
max-width:数值px 表示当视口低于该值时显示的样式
min-width:数值px 表示视口高于该值时显示的样式
写法如下
@media all and (max-width:300px){div{height:200px;color:red} p｛width:100px｝}
