平面转换位移旋转、渐变
transfrom 是复合属性可以连写，先位移在旋转（旋转可以改变坐标轴的方向）
（display：none 没有过渡动画 none、black 渐变没有过渡动画）
（背景图片过渡动画过渡不完善 不能用）
（实现背景图片透明：先隐藏一张图片，显示一张图片；hover显示一张图片，hover隐藏一张图片）
-
定位盒子居中：
采用定位进行设置盒子居中(第一种方法)
子绝父相
left:50%
top:50%
margin-left:50%
margin-top:50%
transfrom:translate(-50%,-50%)
通过设置子盒子margin进行居中（第二种方法）,在盒子数值出现单数时比较麻烦
子绝父相
left:50%
top:50%
margin-left:-50%
margin-top:-50%
-
平面转换原点：
改变转换的中心，可以以右上角或者左下角为中心点进行转换
transfrom-origin:方位名词
-
缩放
opacity透明度:盒子以及盒子里面的内容全部都会变透明
transform:scale(1)
数值大于一为放大，小于一为缩小
-
渐变
渐变只能用于盒子背景颜色渐变
渐变没有过渡动画
1-background-image:linear-gradient{red，green}实现背景颜色透明渐变
background-image:linear-gradient{transparent，rgab(0,0,0,0.6)}
三维位移、旋转、缩放以及视距
左手法则：大拇指指向正值，手指弯曲的方向为旋转的方向
透视（视距）
1、近大远小、 Z轴是屏幕到人眼的视线方向，移动效果应该是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果
2、 perspective: 取值；一般在800 – 1200 px
添加代码可以看到视距
transform:rotate3d(1,1,1,30deg)
立体呈现
1、盒子父元素添加transform-style: preserve-3d； 2. 按需求设置子盒子的位置（位移或旋转）
transform-style: preserve-3d
空间位移
transform: translate3d(x, y, z);
或者
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
取值（正负均可）：像素单位数值、百分比
空间旋转
transform:rotate(后缀添加X,Y,X都可以，或者添加3D(X,Y,Z,DEG))
空间缩放
transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z);
动画
@keyframes 动画名称 {
from{开始}
to{结束}
或者写成
0%{}
100%{}
}
动画名称：animation-name
动画时长：animation-duration
（上面这个两个是必须要设置的，且顺序不能乱）
速度曲线：animation-timing-function{
steps（动画个数是多少个就设置多少个）
}
延迟时间：animation-delay
重复次数：animation-infinite无线循环
动画方向：animation-direction{
alternate先正再反最常用
reverse先反在反
alternate-reverse先反再正
}
执行完毕时的状态：animation-fill-mode{
backwards:第一帧动画
forwards:最后一帧动画
}
animation-play-state{
paused为暂停
running继续
通常配合:hover使用
}
（后面几个不分先后）
视口
百分比布局也叫流式布局：宽高自适应
Flex布局
主轴（X轴）对齐
1、浮动不能用，定位、margin，转换可以用
justify-centent: flex-start左侧开始依次排列
justify-centent: flex-end左侧
justify-centent: center主轴居中对齐
justify-centent: space-around间隔存放，中间宽度大于两边
justify-centent: space-between两端对齐
justify-centent: space-evenly绝对对齐
侧轴（Y轴）对齐方式
align-items：center 居中对齐
align-items：start 左侧对齐
align-items：end 右侧对齐
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 600px;
height: 600px;
background-color: pink;
display: flex;
/* 换行 */
flex-wrap: wrap;
/* 多行 可以设置六个属性
center 居中
flex-start 上面
flex-end 下面
space-around 间隔存放 中间盒子边距大于左右两侧盒子的边距
space-between 两端对齐
space-evenly 绝对对齐
*/
align-content: flex-start;
/* 单行 可以设置三个属性
center 居中
flex-start 上面
flex-end 下面
*/
align-items: flex-start;
}
span {
width: 100px;
height: 100px;
background-color: green;
border: 1px solid #000;
}
</style>
修改主轴方向
<style>
div {
display: flex;
width: 600px;
height: 600px;
background-color: green;
/* 修改主轴方向 flex-direction row 默认值 左到右*/
flex-direction: row;
/* 右到左 */
/* flex-direction: row-reverse; */
/* 上到下 常用 */
/* flex-direction: column; */
/* 下到上 */
/* flex-direction: column-reverse; */
}
span {
width: 100px;
height: 100px;
background-color: aqua;
border: 1px solid #000;
}
</style>
vw、vh
vw：视口的宽度，100wh屏幕的宽度；
vh：视口的高度；
不同宽度的屏幕适配：根据屏幕大小内容进行图标文字进行缩放（px像素是绝对单位，大小固定不变）；使用vw、vh即可；
（屏幕的宽度大小会影响文字、图片的影响）
"px2vw.width": 375, 搭配插件使用可以自动从px转换成vw
calc(50vw - 200px)
<style>
div {
width: calc(100vw * 100 / 375);
height: calc(100vw * 50 / 375);
font-size: calc(100vw * 20 / 375);
background-color: green;
}
</style>
rem单位
10rem等于屏幕的宽度；100vw等于屏幕的宽度
rem单位 是相对单位长度 （参照 html 根标签 font-size 的长度决定大小）不受 div 此类的父盒子大小影响；
根标签 html 设置 font-size=1 rem还是=1=1px ；文字仍然是浏览器默认最小文字12px
通过引入一段代码，即可决解 屏幕宽度发生变化 但是 根标签 html 里面 font-size 不发生改变 导致 使用rem后缀的数值不发生改变的问题
less
less是提高css编写效率的技术-css预处理器，通过写在less文件里面，最后由css文件引入即可；
less支持自动运算、使用除法进行运算时需要增加括号（）
less混合mixin的使用
tips
（第一行 文字不换行 末尾出现省略号
overflow:hidden
wite-space:nowrap
tet-overflow:ellipsis
当第二行文字需要出现文字末尾省略号，padding会把文字挤下去；
当移动端内容出现单数的时候，可以后面添加一个透明的盒子，最后通过外边距来调整）
响应式布局
根据可视宽度 使用不同的css，就是根据宽度的的不同，生效不同的的css代码
bootstrap 框架
1、先引入bootstrap.css文件、在引入jq.js文件、最后引入bootstrap.js文件
2、占几份就写几份
3、一行超过12个就会掉下去和浮动一样
4、.container 版心居中 会根据屏幕宽度变化而变化 .container-fluid 全屏 写了栅格代码版心代码必须写
5、栅格页面下默认有12个栅格，假设在大屏幕下 显示 3 个大盒子 相当于 3*4=12 就是 1 列占（有） 4 个小盒子