CSS高级

流式布局
父元素
display: flex; /开启流式布局/
justify-content: flex-start;/默认值。项目位于容器的开头 center位于容器的中心 space-between各行之间留有空白的容器内 等等/
flex-direction: row; /布局方向 默认为row水平方向 column列（垂直） 可以设置反转row-revers/
flex-wrap: nowrap; /* 换行,默认nowrap,元素总宽度超过父元素宽度会压缩子宽度  wrap空间不够时变多行显示*/
flex-flow: row wrap-reverse; /* 简写 */
align-items: center; /用来设置每一个单行的容器/
align-content: center; /只适用于多行的flex容器，没有宽度或高度，每行元素被拉伸以适应父容器/
子元素
order: -1;/调整子元素的排序，默认0，值越小越靠前/
align-self: center;/单独设置子元素的样式/
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;/设置在父元素内相对于其它子元素的比值/

响应式设计
流式布局 vd vw 根据窗口大小改变宽度高度
弹性图片 max-width 图片自由收缩，但有个最大宽度 
媒体查询 @media （max-width:600px）{}根据不同设备 设置不同样式

transform
移动元素
transform:translate(20px,30px)  水平方向向右移动20px，垂直向下移动30px，可以单方向设置：translateX(20px) translateY(30px)
transform:translate(50%) 水平方向向右移动自己宽度的一半距离
transform:translateZ(30px) 修改元素到屏幕的距离，数值越大，物体显的越大
transform:translate3d（10px，20px，30px）
transform:scale(1.2,1.5);缩放，水平放大1.2倍。垂直放大1.5倍。如果只写一个参数，两方向同时缩放。也可以scaleX或scaleY单缩放
transform:rotate(90deg);旋转，顺时针旋转90度。负数逆时针旋转
transform-orign:center center(所有transform默认中心点计算，可以用left right修改)
transform-orign:20px  50px（可以直接设置像素位置，相对于左上角测量，写在被transform的元素的选择器内，而不是触发选择器内）
transform：skew（0，10deg）倾斜，x轴正数值的往左倾斜，y轴正数值的往上倾斜，
3D旋转
transform:roateX(沿水平方向垂直旋转)
transform:roateY(沿垂直方向水平旋转)
transform:roateZ(沿中点点旋转)
透视，实现近大远小的立体感
perspective:1000px;(视距，数值越小，效果越明显)
backface-visibility:hidden; 不是正对屏幕就隐藏

transition
当前元素触发属性变化时 播放过渡效果（比如hover状态）
放在div里，而不是hover里
transition-property 要过度的属性 （默认all，可以用逗号写多个属性）
transition-duration 花费的时间
transition-timing-function 运动曲线 （linear匀速/ease逐渐慢/ease-in加速/ease-out减速/ease-in-out先加速后减速）
transition-delay 何时过渡 
transition:width 0.3s ease 1s （合写）

动画
@keyframs 动画名称 {定义动画}
@keyframs go{
from{
transform：translateX（0）
}
to{
transfrom：translateX（600px）
}
}
@keyframs go{
0%{
transform：translateX（0）
}
25%{
transform：translateX（100px）
}
50%{
transform：translateX（200px）
}
75%{
transform：translateX（100px）
}
100%{
transform：translateX（0）
}
}
使用动画，触发事件在元素上添加
animation：go 2s ease 0s infinite alternate;
动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向
animation-play-state:paused;暂停动画

cursor：defaultl;调整鼠标样式默认三角形样子 pointer 小手 move移动 text 文本
outline：none；对于input的text 取消轮廓线(不是边框)
resize：none；对于textarea，防止拖拽文本域大小
word-break：break-all/keep-all(默认)；句子长度超出块元素区域，单词是否拆开两行显示，有连字符(-)也会拆开
white-space:normal/nowrap;nowrap使文字超出块元素区域时强制在一行显示而不是换行，除非遇到br
text-overflow：ellipsis；如果文字超出块元素，最后会显示一个省略号(开启了overflow：hidden和white-space：nowrap)

visibility:visible 默认显示
visibility:hidden 隐藏不显示，但是是会依然占据页面位置(而diplay会不再占据)

overflow
visibl：默认选项，超出显示，不处理溢出
scroll：加滚动条
auto：自动判断加滚动条
hidden:裁掉溢出的

鼠标经过div时，img显示
div:hover img{
display:block;
}

滑动门设计（根据导航条菜单文本长度自动调节宽度）
a{
display:line-block;
height:33px;(不要设置宽度)
background:url(..) no-repeat;
padding-left:15px;
}
a span{
display:line-block;
height:33px;(不要设置宽度)
background:url(..) no-repeat right;
padding-right:15px;
}
<a href="#"><span>首页</span></a>