前端之css3
css3优势：
1 新增实用的选择器，例如动态伪类，目标伪类，伪元素
2 新增更好的视觉效果
3 新增丰富的背景效果
4 新增全新的布局方案
5 新增web字体
6 新增颜色，hsl，hsla，rgba
7 新增2D和3D变换
8 新增动画和过渡效果
css3 私有前缀：
作用：w3c在浏览器正式支持某个新的属性前，浏览器根据浏览器的内核，使用此前缀测试新属性，正式上线后，不需要加上此前缀
查询浏览器是否兼容：Can I use... Support tables for HTML5, CSS3, etc
谷歌，edge，safari浏览器：--webkit--
firefox浏览器：--moz--
旧opera浏览器：--o--
旧Ie浏览器：--ms--
长度单位：
rem 字体大小倍数
vw 视口的宽度
vh 视口的高度
vmax 宽度或者高度最大值的百分比值
vmin 宽度或者高度最小值的百分比值
盒子模型：
box-sizing 设置盒子模型的类型
取值：
border-box 宽高设置为盒子大小
contentent-box 宽高设置为盒子内容区域大小，默认值
resize 自己调节盒子大小
必须和overflow搭配使用
取值：
horizontal 水平方向调节
vertioal 垂直方向调节
both 两个方向都可调节
box-shadow 盒子阴影
取值：
1 水平方向 垂直方向
2 水平方向 垂直方向 阴影颜色
3 水平方向 垂直方向 阴影模糊程度
4 水平方向 垂直方向 模糊程度 阴影颜色---常用
5 水平方向 垂直方向 模糊程度 阴影外延 阴影颜色
6 水平方向 垂直方向 模糊程度 阴影外延 阴影颜色 内阴影(inset)
opacity 不透明度
取值：
0-1 取值范围
0 完全透明
1 不透明
注意：修改的是整个元素的透明度
背景：
background-origin 设置背景图的原点
取值：
padding-box 默认值，按照内边距
content-box 按照内容
border-box 按照边框
background-clip 设置背景图的向外裁剪区域
取值：
border-box 默认值，按照边框
padding-box 按照内边距
content-box 按照内容
text 背景呈现在文字区域（需要添加前缀）
background-size 设置背景图大小
取值：
contain 包含
cover 等比例缩放
auto 默认值
background 复合属性：
background：颜色，url，重复，位置/大小，原点，裁剪方式；
多种背景图片设置：
background: url("") no-repeat left top,
url("") no-repeat right top,
url("") no-repeat left bottom,
url("") no-repeat right top,;边框：
border-radius 边框圆角
取值：
像素
百分比
border-top-left-radius: 10px 5px;
border-top-left-radius: 20px 2px;
border-bottom-left-radius: 10px 30px;
border-bottom-right-radius: 30px 40px;
复合属性：
border-radius: 左上角，右上角，右下角，左下角;outline 边框外轮廓
不计入盒子大小；不占位置；
取值：
outline-width: 20px;
outline-offset: 30px;
outline-style: solid;
outline-color: red;
复合属性
outline: width,style,color;文本属性：
text-shadow：文本阴影
取值：
1 水平方向 垂直方向 模糊程度 阴影颜色
2 none 默认值，无文本阴影
white-space：文本换行
取值：
pre 按照原文格式显示
pre-wrap 按照原文格式显示，超出换行
pre-line 按照原文格式显示，首尾空格不显示
nowrap 不换行
normal 超出自动换行，默认值
text-overflow：文本溢出
使用时添加overflow：hidde；
取值：
ellipsis 溢出显示省略号
text-decoration 文本修饰
修改为复合属性
-webkit-text-stroke 文本描边
仅有webkit可以使用
-webkit-text-stroke:3px red;渐变属性：
线性渐变：
background-image: linear-gradient(red,yellow,green);
background-image: linear-gradient(to right top,red,yellow,green);
background-image: linear-gradient(20deg,red,yellow,green);
background-image: linear-gradient(red 50px,yellow 80px,green 100px);
径向渐变：
background-image: radial-gradient(red,yellow,green);
background-image: radial-gradient(at left top,red,yellow,green);
background-image: radial-gradient(circle,red,yellow,green);
background-image: radial-gradient(100px,red,yellow,green);
background-image: radial-gradient(red 30px,yellow 60px,green 90px);重复渐变：
前提：在线性渐变或者径向渐变的基础上 ，在纯色区域进行重复渐变
background-image:repeating-radial-gradient(red 30px,yellow 60px,green 90px);字体：
图标库：iconfont-阿里巴巴矢量图标库
//引入字体
@font-face {
font-family: "ces";
src: url("");
}
//使用：
font-family: "ces";
//阿里使用
https://www.iconfont.cn/fonts/index?spm=a313x.7781069.1998910419.16
//字体图标
1 比图片清晰
2 灵活性好
3 兼容性好变换transform：
2D变换：
语法：transform： translate（x，y）；
位移
特点：
1 参考自身位置
2 不脱离标准文档流
3 行内元素使用效果不好
4支持链式操作
5 综合写法仅仅只写一个值代表X值
取值：
translateX x轴位移
translateY y轴位移
xy取值：px，%
translate（x，y）综合写法
缩放：
特点：
1 行内元素使用效果不好，可以改成行内块使用
2 支持链式操作
3 综合写法仅仅书写一个值时，代表两个方向
取值：
scaleX() x轴缩放
scaleY() y轴缩放
scale() 综合写法
旋转：
特点：
1 使用之后，xy轴修改
取值：
rotateZ() 正值顺时针；负值逆时针
rotate() 综合写法
扭曲：
特点：
1 综合写法仅仅写一个值时，修改是x轴
取值：
skewX()
skewY()
skew(x，y)
注意：使用链式操作时，最好把旋转放到最后
transfrom-origin 修改变换的圆心位置
影响功能：缩放，旋转
取值：
关键词（只写一个值时，另一个值取中间值）
px
3D变换:
前提：父元素开启3D空间（transform-style:preserve-3d；)
设置景深（perspective:500px;）
透视点：
含义：父盒子的中心点
修改：
perspective-origin：30px 30px；
位移：
translateX x轴位移
translateY y轴位移
translateZ z轴位移
xy取值：px，%
z取值：px
translate3d（x，y，z）综合写法，3值缺一不可
旋转 ：
rotateX() 正值顺时针；负值逆时针
rotateY() 正值顺时针；负值逆时针
rotate3d(x,y,z,deg) 综合写法
缩放：
scaleX() x轴缩放
scaleY() y轴缩放
scaleZ() Z轴缩放--搭配旋转使用效果更好
scale(x,y,z) 综合写法
过渡：
//设置需要过渡的元素本身属性
transition-property: width,height,background-color;
transition-property: all; //所有可以过渡的属性进行过渡
//设置过渡的时间
transition-duration: 1s;
//设置过渡的延迟时间
transition-delay: 2s;
//设置过渡的样式
transition-timing-function:;
取值：
ease 平滑过渡，默认值（慢-快-慢）
linear 匀速过渡
ease-in 先慢后快
ease-out 先快后慢
ease-in-out 慢-快-慢
step-start 直达终点，不考虑过渡时间
step-end 直达终点，考虑时间，没有过渡效果
steps() 分布过渡
使用贝塞尔曲线：
官网：https://cubic-bezier.com/
例子：cubic-bezier(.17,.67,.83,.67)
//复合属性
transition：duration delay property timing-function；
动画：
//元素设置动画属性，初始化
animation-name: yufaname;
//定义动画1
@keyframes yufaname{
form{
}
to{
//设置动画名称
animation-name: yufaname;
//设置动画持续时间
animation-duration: 1s;
//设置动画延迟时间
animation-delay: 1s;
//设置动画的样式
animation-timing-function: ;
取值：
ease 平滑过渡，默认值（慢-快-慢）
linear 匀速过渡
ease-in 先慢后快
ease-out 先快后慢
ease-in-out 慢-快-慢
step-start 直达终点，不考虑过渡时间
step-end 直达终点，考虑时间，没有过渡效果
steps() 分布过渡
使用贝塞尔曲线：
官网：https://cubic-bezier.com/
例子：cubic-bezier(.17,.67,.83,.67)
//设置动画执行的次数
animation-iteration-count: 3;
取值：数字，infinite(无限循环)
//设置动画的方向
animation-direction: ;
取值：
normal 默认值
reverse 反转
alternate 交替来回播放
alternate-reverse 交替来回反转
//不发生动画
animation-fill-mode:;
取值：
forwards 留在最后一帧
backwards 返回到第一帧
//动画播放状态
animation-play-state: ;
取值：
paused 停止播放
running 运行
}
}
//定义动画2
@keyframes yufaname{
0%{
}
20%{
}
40%{
}
60%{
}
80%{
}
100%{
}
}
//复合属性
animation: name duration timing-function delay iteration-count direction fill-mode;
过渡和动画的区别：
1 动画不需要任何触发条件，过渡必须需要触发条件
2 动画可以实现内容精细化处理，过渡不行
布局技巧：
多列布局：
内容区域
//指定页面显示列数
column-count: 4;
//指定每一列的宽度，会自动计算列数
column-width: 200px;
//复合方法--不推荐使用
columns: count width;
//调整列间距
column-gap: 20px;
//每一列边框宽度
column-width: 2px;
//每一列边框颜色
column-rule-color: ;
//每一列边框样式
column-rule-style: ;
//边框的复合属性
column-rule: width style color;
标题
//设置是否横跨
column-span: ;
取值：
none
all伸缩盒模型(弹性盒子)：
特点：
1 轻松控制元素分布，元素对齐，元素视觉顺序
2 兼容性好，除部分ie不支持，其他全部支持
3 提供新的布局方案flex布局
语法：
//开启flex布局子元素成为块及化元素
display：flex； //开启flex布局
display：inline-flex //开启行内块flex--很少使用
flex-direction: ;//设置主轴方向
取值：
row 默认，从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上
flex-wrap: ; //设置主轴换行方式
取值：
nowrap 默认，不换行
wrap 换行
wrap-reverse 反向换行
//复合属性（设置主轴）---很少使用
flex-flow: direction wrap;
justify-content:; //设置主轴对齐方式
取值：
flex-start 默认值，主轴的起始位置
flex-end 主轴的结束位置
center 居中对齐
space-around均匀分布，元素之间距离是边缘距离的两倍
space=between均匀分布，元素之间距离是相等的，边缘没有距离
space-evenly 均匀分布
//设置侧轴对齐方式
一行内容
align-items:;
取值：
flex-start 侧轴起始位置
flex-end 侧轴结束位置
center 居中
baseline 基线对齐
stretch 默认值，拉伸到整个盒子高度(前提：子盒子没有高度)
多行内容
align-content: ;
取值：
flex-start 侧轴起始位置
flex-end 侧轴结束位置
center 居中
space-around 元素之间距离相等，是边缘的两倍
space-between 元素之间距离相等，没有边缘
space-evenly 元素之间距离相等
stretch 默认值，拉伸到整个盒子高度(前提：子盒子没有高度)
flex-basis: ;//设置元素在主轴的基准长度，主轴是横向宽失效， 纵向高失效
取值：
auto 默认值，自适应
px
flex-grow //设置子元素的拉伸比例,剩余空间/比例
取值：
0 默认值，不拉伸
flex-shrink//设置子元素的缩放比例，
前提：未设置主轴换行方式
取值：
1 默认值
复合属性：
flex：grow shrink basis；
取值：auto ===1 1 auto
1 ===1 1 0
none ===0 0 auto
0 auto ===0 1 auto
order //设置子元素的显示顺序
取值越小，元素顺序越靠前
取值：
0 默认值
负值
align-self //设置子元素在侧轴的单独对齐
取值：
auto 默认值
//元素水平垂直居中
1 父元素
display: flex;
align-items:center;
justify-content: center;
2父元素
display: flex;
子元素
margin：0 auto；响应式布局：
媒体查询：
@media 值{
}
取值：
print 打印/打印预览时样式
screen 屏幕下使用的样式
all 检测所有设备
(width:800px) 视口为800时的样式 //例子
取值：
（device-width:1920） 设备宽度-宽度
运算符：
and 且
，/or 或
not 否定
only 肯定，处理ie浏览器兼容
calc动态设置宽高：
width: calc(100% - 100px);
注意：
使用时需要添加一个空格分开BFC：
含义： 块及格式上下文，可以理解为元素的特异功能
默认是关闭状态，需要一定条件开启
作用：
1 子元素不会产生margin塌陷问题
2 自己不会被其他元素覆盖
3子元素浮动，元素自身高度不会塌陷
开启：
//设置根元素，浮动元素，绝对/固定定位，行内块，表格单元格，overflow不等于visible，多列布局，flex，colum：all，display：flow-root；--效果最好；ie不支持