前言
学习，边学，边总结啦！
css3
css3
一、渐变
线性渐变
单线：linear-gradient：（方向，颜色1，颜色2 渐变开始的位置……）
方向可选值：
a.方位词：to right/left/top/bottom, to right bottom/right top/left bottom/left top
b.角度（deg）0deg 自下向上渐变，90deg 自左向右渐变
循环：repeating-linear-gradient：（方向，颜色1，颜色2 渐变开始的位置……）
径向渐变
radial-gradient：（圆/椭圆（circle或ellipse），颜色1，颜色2 开始位置……）
循环：repeating-radial-gradient（圆/椭圆（circle或ellipse），颜色1，颜色2 开始位置……）
注：当元素不是正方形时，ellipse值才有效
二、transform（元素变形）
可选值：
transform（x,y）,平移 单位px或%（设置的是元素自身高度的%），一个值代表x轴；
scale（x,y）缩放 无单位，是相对于原图片的，一个值代表x,y同时缩放
rotate（deg）；旋转，顺时针，rotateX 以X轴旋转，rotateY 同理，以Y轴旋转
skew（X，Y）,倾斜，单位deg
三、过渡
transition：属性1，属性2 过渡时间(transition-duration) 过渡速度效果(transition-delay) 过渡开始时间(transition-timing-function)
属性名(transition-property)：当有多个的属性名是用，隔开
过渡速度效果：linear 匀速
ease 慢-快-慢
ease-in 慢速开始
ease-out 慢速结束
ease-in-out 以慢开始与结束
cubic-bezier(n,n,n,n) 贝塞尔曲线 n 取值[0 1]
四、动画
1、使用步骤：
①运用关键帧创建一个动画@keyframes name {}
②animation调用关键帧
2、定义
animation：name(animation-name) 时间(animation-duration) 速度曲线(animation-timing-function) 延迟时间(animation-delay)
播放次数(animation-iteration-count) 是否反方向播放动画(animation-direction)
name：与关键帧名字相同
速度曲线：linear 匀速
ease 慢-快-慢
ease-in 慢速开始
ease-out 慢速结束
ease-in-out 以慢开始与结束
cubic-bezier(n,n,n,n) 贝塞尔曲线 n 取值[0 1]
steps(n):数值，n代表动画完成要几步
播放次数：n 数值，
infinite 循环播放
播放方向：normal 默认值，正常播放
alternate 轮流反方向
执行状态: animation-play-state
可选值： running 默认值 动画执行
paused 动画暂停
填充模式: animation-fill-mode
可选值：
none默认值 动画执行完毕 元素回到原来的位置
forwards 动画执行完毕，会停止在动画结束的位置
ackwards 动画延时等待时，元素就会处于开始位置
both 结合了forwards和ackwards的特点*/
运行的方向:animation-direction
可选值
normal 默认值： 从from向to运行，每次都是这样
reverse 从to到from运行，每次都是这样
alternate 从from向to运行，重复执行动画时反向执行
alternate-reverse 从to向from运行，重复执行动画时反向执行
transform3D
一、转换属性
transform：应用于2D和3D转换
transform-origin: 转换元素的位置。可选值：left/top,right/bottom,center;px;%
transform-style：设置所用子元素的展示效果
可选值：flat：在2D空间展示效果
preserve-3d：在伪3D空间展示的效果
perspective：规定3D的透视效果；就是镜头离元素的距离
perspective-origin：属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。它是一个元素的子元素，透视图，而不是元素本身
transform-origin：(x:left/center/right/length/%) (y:top/center /bottom/length/%)
注意：谷歌浏览器是直接写在元素的transform中
transform:preserve-3d(400px) translatez(40px)
其他写在父元素里面
Z轴效果是由远小近大
二、3D转换方法
1.translate**：平移**
translate3D(x,y,z) translateX()/translateY()/translateZ()
2.scale**：缩放**
scale3D(x,y,z)
scaleX(X)/ scaleY(y)/ scaleZ(z)3.rotate**：旋转**
注意：css3坐标轴是相对于物体，当元素旋转的时候，坐标轴页跟着旋转
rotate3D(x,y,z,angle)//x,y,z是设置是否围绕x,y,z轴旋转，一般1为是，0为否
rotateX(angle)/ rotateY(angle)/ rotateZ(angle)
flex
一、display
display可以设置：
1.设置元素属性 行元素inline 、块元素 block、行内块元素 inline-block
2.是否显示display:none 消失 display：block 显示
3.设置弹性盒子
二、定义
弹性盒子：让元素随页面大小自适应
弹性容器：display值为flex
弹性元素：弹性容器的子元素
一个元素既可以是弹性容器也可以是弹性元素
主轴：弹性元素排列的方向
辅轴：与主轴垂直的方向
webkit内核浏览器必须加上-webkit-前缀
三、弹性容器
弹性容器 1和2可简写，无顺序；flex-flow：row wrap；
1.flex-direction :**设置弹性元素排列方向**
可选值：
a.水平方向
row 自左向右 默认值
row-reverse 自右向左
b.垂直方向
cloumn 向下
cloumn-reverse 向上
2.flex-wrap:**设置弹性元素是否转行**
可选值：
wrap:沿辅轴换行
wrap-reverse:沿辅轴反方向换行
nowrap：不自动换行，默认值
3.justify-content:**主轴上空白空间分配**
可选值：
flex-start：主轴起边排列
flex-end:主轴终边排列
center:居中排列
space-around:空白分布在弹性元素二侧,中间元素距离相加
space-between：空白分布在弹性元素之间
space-evenly：空白分布在弹性元素一侧，元素之间距离相同
left/right/start/end
4.align-content:**辅轴空白空间分配;多根轴线对齐方式（多行或多列）**
可选值
flex-start：辅轴起边排列
flex-end:辅轴终边排列
center:居中排列
space-around:空白分布在弹性元素二侧,中间元素距离相加
space-between：空白分布在弹性元素之间
space-evenly：空白分布在弹性元素一侧，元素之间距离相同
left/right/start/end
5.align-items**：弹性元素在辅轴上排列，元素之间(单行或单列)**
可选值：
stretch:将同一水平的弹性元素辅轴高度一样，未设高度时元素会拉伸
center:辅轴中间
flex-start：辅轴起边对齐
flex-end：辅轴终边对齐
6.**将justify-content和align-items同时设置center，弹性元素居中**
四、弹性元素
1.flex-grow:弹性元素的伸展系数
2.flex-shrink**：**弹性元素的收缩系数
3.flex-basis**；**弹性元素在主轴上的基础长度，默认值auto
可简写：flex：grow/shrink basis
4.align-self**：**用来覆盖容器的align-items
可选值：
stretch:将同一水平的弹性元素辅轴高度一样，元素会拉伸
center:辅轴中间
flex-start：辅轴起边对齐
flex-end：辅轴终边对齐
5.order**：**设置弹性元素(有order属性弹性元素的)的排列顺序,
五、常见问题
1.当设置display：flex时，width：100%,不能完全与父元素一致原因，
应为父元素设置了弹性盒子，使子元素等比例缩放
2.若父元素设置display：flex，子元素的高度和宽度失效，可将子元素设置flex-shrink为0
less
一、引入文件
1.@import "XX.less"/"XX.css"引入某某less文件或css文件，若引入为less文件，.less可以省略
二、基础设置
1.设置变量：@变量名：值;元素引用变量：
@w:100px
.div1{
width:@w; div1的宽度为100px
}
2.可以直接+、-、*、/（注意除法需要使用（）,width:(@w/2)+50px）
运算前进行单位换算，以左边单位为准
3.& 代表当前元素
4.calc()因为要考虑css的兼容性，所以calc（）不计算数学算式的值，但计算变量的值
（@w:(200px/2)
.div2{
width:20px-(@w-25px);的结果：20px-(100px-25px)
}）
5.转义：任何字符串都可设置为属性或变量值 ~"anything",3.5版本后可直接用anything
@min768: ~"(min-width: 768px)";/@min768:(min-width:768px)
.element {
• @media @min768 {
• font-size: 1.2rem;
• }
• }
等于@media (min-width: 768px) {
.element {
• font-size: 1.2rem;
• }
• }.
6.注释//
单行，且仅less里看见
/* */多行注释，css中也可以看见三、命名空间&作用域
1.命名空间和访问符，不是设置元素样式
.div1(){
.div2 {
• width:200px;
• height:100px;
• background-color:red;
}
span{
• color:yellow;
}
}
.div3{
.div1 .div2();//()应该在命名空间后，将.div1 .div2混合到.div3中
}
2.作用域：变量向上移级找
@color:blue;
.div1{
.div2{
color:@color;//此时.div2的color应该是black
• }
• @color:black;
}四、继承
10.继承extend,
.div1{
width:100px;
height:100px;
background-color:yellow
}
.div2:extend(.div1){//注意不要有空格
}
注意当继承时同时继承元素中相同结构的样式时，要在被继承对象后添加all
<span>hello</span>
<div class="div2">你好</div>
</div>
<div class="div3">
<div class="div2">明天见</div>
</div>
ess样式
div1{
background-color:red;
.div2{
• color:green;
}
.div3:extend(.div1 all){}=》.div3{background-color:red;
.div2{
color:green;
}}
不加all=》.div3 {background-color:red;}特殊样式
一、滚动条设置
1.设置滚动框的样式
：：webkit-scrollbar{}：可以设置宽，颜色，边框弧度等
2.设置滚动条的样式
：：webkit-scrollbar-thumb：可以设置颜色、边框等
3.删除滚动条
①Chrome&Safari
element：：-webkit-scrollbar{
width：0 ！important；
或者display：none；
}
②IE 10+
element{
-ms-overflow-style：none
}
③Firefox
element {
overflow：-moz-scrollbars-none；
}总结
以上就是今天要分享的内容啦，有不对的地方还请各位大佬指正呀~最后，愿屏幕前的你，生活愉快，万事胜意！