平面转换
1. 位移：
位移：transform: translate(水平移动距离, 垂直移动距离);
脱标，不影响其他盒子位置；单独设置水平或垂直移动：设值为0；translateX/Y
用法：子绝父相，盒子水平垂直居中：
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);2. 旋转：
旋转：transform: rotate(角度deg);
转换原点：
transform-origin: 原点水平位置 原点垂直位置;
方位名词、像素单位、百分比
多重转换：有位移，又有旋转：transform: translate(600px) rotate(360deg);
多重转换，将位移translate写到旋转rotate前
3. 缩放：
缩放：使用scale改变元素的尺寸：
transform: scale(x轴缩放倍数, y轴缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小
默认中心原点进行缩放；不影响其他元素
4. 实现渐变背景效果：
background-image: linear-gradient(颜色1，颜色2);二、空间转换
1.空间位移
空间位移：transform: translate3d(x, y, z);保留位移效果,立体呈现; 不加3d需要单独写XYZ
2.透视
写到父级，旋转视觉效果,远大近小；像素单位数值， 数值一般在800 – 1200px。
3.立体呈现
谁动给谁，呈现3D效果，使后面的盒子有高度；写给父级的话 效果在子级上；flat不开启3d
4.空间旋转
transform: rotateZ(值); 单杠旋转
transform: rotateX(值); 旋转门
transform: rotateY(值); 转盘
//拓展：rotate3d(x, y, z, 角度度数) ：自定义旋转轴的位置及旋转的角度，xyz数字不加单位5.空间缩放
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z);三、动画
1.动画效果、注意点、语法
动画效果：多个状态间的变化过程，重复播放、最终画面、是否暂停
注意点：定义动画必须写：动画名称和动画时长、多组动画：用逗号隔开
语法：
animation-name: move;
animation-duration: 2s;
@keyframes 动画名 {
form {
/* 动画开始时状态 */
} to {
/* 动画结束时状态 */
}
}
//可以把form和to写成0%-100%2.动画序列：
可以把form和to写成
0%-25%-50%-100% 调整XY的值四、移动端WEB
1. 百分比布局/流式布局
宽度百分比自适应，高度px值固定
2. Flex布局/弹性布局
2.1 父项属性
父元素添加 display: flex，子元素可以自动的挤压或拉伸
主轴方向：
flex-direction: row 默认，水平
flex-direction: column 垂直
row-reverse / column-reverse 倒着排序
flex-flow是主轴设置flex-direction 和子元素是否换行flex-wrap的复合内容主轴对齐方式：
justify-content: center 主轴居中
justify-content: space-around 两边间距小，中间大
justify-content: space-between 两边紧贴父盒子
justify-content: space-evenly 盒子间距均匀
justify-content: flex-start 默认起点依次排列
justify-content: flex-end 终点依次排列盒子换行：
flex-wrap: no-wrap; 默认，不换行
flex-wrap: wrap; 换行或换列侧轴对齐方式（适用单行）：
align-items:center; 侧轴居中
align-items:stretch； 默认，沿主轴拉伸铺满
align-items:flex-start; 起点开始排列
align-items:flex-end; 终点开始排列侧轴对齐方式（适用多行）：
align-content:center; 多行侧轴居中
align-content:space-around; 两边小，中间大
align-content:space-between; 两边紧贴父盒子
align-content:stretch; 拉伸至父元素高度
align-content:flex-start; 默认头部开始排列
align-content:flex-end; 最后一排开始排列2.2 子项元素属性
平分父盒子剩余宽度一份，%百分比
* flex: 1；
一个子项在侧轴上的排列方式
* align-self: flex-end / start; 放到最后一排/第一排
align-self: center;
align-self: stretch;一个子项的排列位置，正值往后移/负值往前移
order：0; 默认
3. 移动适配
3.1 @media 可以针对不同的屏幕尺寸设置不同的样式
rem布局流程：1rem = 1HTML字号大小
媒体查询：不同设备，视口宽度匹配才能调用
@media (width:320px) {
html {
font-size: 32px;
}
}
替代媒体查询：引入js文件后不用再写@medio
js配合rem实现不同宽度设备中，元素等比例缩放
<script src="./js/flexible.js"></script> </body>Easy Less 插件：提供除法运算，可以不用再每个除法运算；在less里面写的代码会自动生成css文件，网页引入less生成的CSS文件
Less嵌套写法生成后代选择器
父选择器 {
子选择器{}
}
.father {
color: red;
.son {
width: black;
}
}
.father {
color: red;
}
.father .son {
width: black;
} &:hover{ }不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用，方便迁移
定义变量：@变量名: 值;
使用变量：CSS属性：@变量名;
@rootsize: 37.5rem;
p{
height: (50/@rootsize);
} less文件导入：@import “文件路径”; (多个less文件放到一个里面，只引用一个less生成的css文件即可)
less文件导出：less文件第一行添加：out：路径
less禁止导出：less文件第一行添加：out: false
替代less的插件：px to rem,修改root字号
3.2 vw / vh
1vw = 1/100视口宽度
1vh = 1/100视口高度
1. 根据设计稿确定1vw尺寸
2. px单位转换成vw单位尺寸
px / (1/100视口宽度)4. 响应式布局：BootStrap框架
4.1 媒体查询
@media (min/max-width:750px) {
html {
font-size: 32px;
}
}
@media (min-width:1200px) {
.box {
display: none; //隐藏效果
background-color: red;
}
}link写法：
<link rel="stylesheet" media="(max-width:1200px)" href="./css1.css">4.2 www.bootcss.com
使用方法
全局CSS样式
栅格系统
原理：将网页等分成12等分，每个元素占对应的份数;
*表示占12份当中的几份；
栅格系统中，不要使用外边距拉开距离；会挤掉；
使用
大屏
响应断点： >= 1200px
版心：1170px
类前缀：col-lg-*
中屏
响应断点：>= 992px
版心：970px
类前缀：col-md-*
小屏
响应断点：>= 768
版心： 750px
类前缀：col-sm-*
超小屏
响应断点： < 768px
版心：100%
类前缀：col-xs-*
组件
作用：封装常见功能的HTML+CSS
分类
布局组件
1. 引入样式表
2. 复制粘贴结构，修改内容
字体图标
1. 引入样式表
2. 空标签粘贴类名
插件使用步骤
官网下载版本文档，放到对应文件夹下引入
1. 引入样式表
<link rel="stylesheet" href="../bootstrap-3.4.1-dist/css/bootstrap.css">
2. 引入js
<script src="../js/jquery.js"></script>
<script src="../bootstrap-3.4.1-dist/js/bootstrap.js"></script>
3. 复制结构，修改内容
根据内容进行删减
官网导航菜单
全局CSS样式：标签样式
表格；按钮；图片；显示隐藏
组件：封装好的项目常见区域
字体图标；版心；导航栏目；菜单栏；进度条；
JavaScript插件：
轮播图；事件；下拉菜单；监听；过渡...
