关于前端css一些属性的总结

一、过渡属性

过渡：transition

属性值：

transition-property:all(默认，代表所有变化的属性都发生一个过渡效果)；（要执行过渡的属性）
1. 如transition-property：width/height等；
transition-duration；（要执行过渡的时间）
transition-timing-function；（要执行过渡的时间函数即过渡效果）
1. ease，先快后慢
2. ease-in，先慢后快
3. ease-out，先快后慢
4. ease-in-out，开始与结束慢，中间快
5. linear，匀速（常用）
transition-delay ；（过渡的延时等待）

简写：

transition：过渡属性过渡时间过渡效果过渡等待；

支持多个属性，如果要执行多个属性的过渡，需要在过渡属性值的中间用**逗号**隔开。

transition-property: width, height;
transition-duration: 2s, 1s;
transition-timing-function: linear, ease-out;
transition-delay: 1s, 2s;

同理，以上代码也可以简写：

transition: width 2s linear 1s , height 1s ease-out 2s;

不能执行过渡的属性

display
visibility
float
position
z-index
text-*
font-*除font-size外，其他都不能执行过渡

二、变幻属性

变幻：transform

指元素在水平方向，垂直方向或Z轴方向进行大小，方向，角度的转变。

属性值：

translate 位移
1. translate-X 沿着x轴进行位移
2. translate-Y 沿着y轴进行位移
3. translate-Z 沿着z轴进行位移（需开启3d空间）
可简写：translate（横坐标，纵坐标）

translate3d（横坐标，纵坐标，z轴坐标）
scale 缩放

（在不改变width/height的值的情况下，可以将元素整体放大或缩小）
1. scaleX
2. scaleY
  
  可简写：scale（X轴缩放，Y轴缩放）
rotate 旋转
1. rotateX（）
2. rotateY（）
3. rotateZ（）
  
  单位：deg/turn（turn代表圈数）
skew 倾斜
1. skewX（度数）
2. skewY（度数）

开启3D转换

perspective:数值（如200px）；

添加3D视距【元素本身并不是3D，只是看起来在一直3D的空间里面】

在其外层元素添加属性perspective,数值越大透视效果越不显示，数值越小，透视效果越明显
transform-style：preserve-3d；

自已形成Z轴的距离【元素本身形成了一个3D元素】

在其父级的元素添加属性transform-style:preserve-3d。添加这个属性，外层的元素就会形成一立体包裹空间，内部的元素就可以自己根据需求形成一个Z轴的高度

transform-origin设置变换起点位置；

如果是X轴的变换，我们可以设置top/bottom/cener；
如果是沿着Y轴去发生变换，我们可以设置left/right/center；
如果是沿着Z轴变换，我们可以设置两个属性值如transform-origin:left top;

一个元素多个变幻的结合

多个变换值之间使用**空格**来进行隔开

transform: translateX(200px) translateY(150px) scale(1.5) rotateZ(45deg);

关于网页兼容的一些前置

谷歌：-webkit-，如-webkit-transform，-webkit-transition
微软ie：-ms-
火狐：-moz-
欧鹏：-o-

三、动画属性

animation
定义：

@keyframes 动画名称{
    
    
    from{
    
    
        /*css代码*/
    }
    to{
    
    
        /*css代码*/
    }
}

@keyframes 动画名称{
    
    
    0%{
    
    }
    10%{
    
    }
    20%{
    
    }
    50%{
    
    }
    75%{
    
    }
    100%{
    
    }
}

@keyframes imgBoxAni{
    
    
    /*动画第1阶段*/
    0%,24%{
    
    
        left: 0px;
    }
    /*动画第2阶段*/
    25%,49%{
    
    
        left: -440px;
    }
    /*动画第3阶段*/
    50%,74%{
    
    
        left: -880px;
    }
    /*动画第4阶段*/
    75%,100%{
    
    
        left: -1320px;
    }
}

动画的调用

属性：

animation-name
animation-duration
animation-iteration-count（运行执行的次数，默认是1，如果要使动画一行执行，则需要设置属性来infinite，这个值代表无穷大【默认值1】）
animation-timing-function（默认值ease）
animation-delay（默认值0s）
animation-direction（设置动画的方向）
1. normal 正常方向【默认值】
2. reverse 反转
3. alternate 正反交替运行
4. alternate-reverse 反正交替运行
animation-play-state（动画的播放状态）
1. running 运行状态
2. paused
animation-fill-mode（动画在停止的时候最后一帧的状态）
1. backwards 返回到开始状态【默认值】
2. forwards 停留在结束状态
3. both backwards和forwards的结合体

简写：

animation:动画名称 动画时间 动画次数 动画时间函数 动画等待 动画方向 动画播放状态 动画结束状态

名称和时间为必需值

一个元素使用多个动画

animation: 动画1 时间1 , 动画2 时间2.....;

时间可以使用steps（）来完成

四、渐变属性

1.线性渐变

div{
    
    
    /* 标准写法 */
    background-image: linear-gradient(to right,blue,green,red);
    /* 兼容性写法 */
    background-image: -webkit-linear-gradient(right,blue,green,red);
}/*标准写法与兼容写法有区别，兼容性写法里面是没有`to`的关键字，同时它们的颜色相反*/

linear-gradient代表线性渐变
to 方向代表沿着某一个方向发生渐变，它可以使用left/right/top/bottom来设置方向。如to right，to left top,to right bottom等
方向的后面跟不同的颜色值，不同的颜色值之间使用逗号进行隔开

还可以设置颜色所占的位置：

.div1{
    
    
    background-image: linear-gradient(to right,red 50%,blue 70%,green 100%);
}/*只需要在每个颜色的后边给这个颜色相应的**结束位置**就可以了*/

或

.b{
    
    
     background: linear-gradient(to right,red 0% 30%,blue 30% 50%,green 50% 100%);
}

to right代表方向是向右
red 0% 30%代表红色从0%的地方开始，到30%的地方结束
blue 30% 50%代蓝色从30%的地方开始，到50%的地方结束
green 50% 100%代表绿色从50%的地方开始，到100%的地方结束

方向可以写to right top等或角度，如45deg等

2.径向渐变

径向渐变指的是由内部外进行一个颜色的渐变，它使用的是radial-gradient

语法格式：

.div1{
    
    
    /*标准写法*/
    background-image:radial-gradient([渐变形状],颜色1 [位置1],颜色2 [位置2]...);
    /*兼容性写法*/
    background-image:-webkit-radial-gradient([渐变形状],颜色1 [位置1],颜色2 [位置2]...);
}

渐变形状分为椭圆ellipse和圆形circle

渐变的起点位置

在设置径向渐变的时候，一般情况下它会是从正中心的位置开始，由内向外开始进行渐变，但是我们可以设置这个渐变的起点位置，如下所示

background-image: radial-gradient(circle at 100px 100px,red,blue,yellow);

重复的径向渐变

如果渐变色不能填满整个盒子的时候，就会重复进行，它的属性值也是在前面添加repeating

.a{
    
    
    background: repeating-radial-gradient(red 0% 10%,blue 10% 20%,lightseagreen 20% 30%);
}

3.圆锥渐变

conic-gradient

**小技巧：**在圆锥渐变里面，如果将开始渐变的颜色与结束渐变的颜色设置为同一个颜色，这样就会形成一个无缝衔接

五、弹性盒子

弹性盒子是一种特殊的布局方式，它的主要应用点是在于移动端，以弹性布局为主体的布局规范我们叫弹性布局。

属性

display：flex 设置该属性后盒子会排列在一行上
flex-direction：设置弹性的方向
1. row 横轴
2. row-reverse 横轴反转
3. column 纵轴
4. column-reverse 纵轴反转
justify-content 设置主轴上面的排列方式
1. flex-start弹性开始的地方
2. flex-end弹性结束的地方
3. center居中
4. space-between使用空间撑开元素到两边
5. space-around空间环绕
6. space-evenly每个元素的空间均匀分布
align-items 设置副轴上的排列方式
1. flex-start弹性开始的地方
2. flex-end弹性结束的地方
3. center居中
4. baseline文字基线对齐
5. stretch拉伸【默认值】
flex-wrap 当内部元素在株洲傻瓜排列不下的时候设置换行
1. nowrap不换行【默认值】
2. wrap换行
3. wrap-reverse换行，但是要翻转方向

flex-flow 综合属性即flex-direction和flex-wrap的结合体

flex-flow:row wrap; 		/*主轴为row 并且换行*/
flex-flow:column nowrap;	/*主轴为column 并且不换行*/

align-content 多主轴设置，用于换行后设置多主轴的排列，即副轴上主轴的排列
1. flex-start
2. flex-end
3. center
4. space-between
5. space-around
6. space-evenly
align-self 用于子元素设置自身在纵轴上的排列位置，属性值与align-items一样
flex ：数值代表当前元素占弹性盒子剩下主轴空间的百分比，我们经常会使用它进行弹性切割，auto、none、initial；

flex: flex-grow flex-shrink flex-basis;

上面的flex：1代表占用剩下空间的百分比

单值语法：值必须为以下其中之一：

一个无单位数：它会被当作flex：1 0;的值被假定为1，然后的值被假定为0；

一个有效的宽度值：它会被当作的值；

关键字none，auto或initial。

双值语法：第一个值必须为一个无单位数，并且它会被当作的值。第二个值必须为以下之一：

一个无单位数：的值

一个有效的宽度值:的值

三值语法：

第一个值必须为一个无单位数：flex-grow;

第二个值必须为一个无单位数：flex-shrink;

第三个值必须为一个无单位数：flex-basis；

flex-grow：放大；将盒子剩余的空间进行分配放大
flex-shrink：缩小；0为不缩小，1为默认值
flex-basis：设置元素在没被分配前占主轴空间的大小
order用于弹性盒子内部元素的排序，默认值都是0，值越大，越在弹性的结束的地方

弹性盒子的影响

对自身的影响

一个盒子变成弹性盒子以后，内部会多两根轴，元素沿主轴方向排列
内部的<br>是不能实现的换行，即使在主轴上面排列不下了，也不换行，它会压缩内部的子元素
弹性盒子在主轴方向设置overflow是没有效果的
弹性盒子自身会形成一个BFC，它不会有margin穿透的现象存在

对子元素的影响

弹性盒子内部子级元素无视元素类型，所以元素都变成了block块级元素
弹性盒子内部的子级元素宽度主轴大小会丢失（宽度丢失），副轴会拉伸，但是仍然可以通过width/height去设置宽度与高度
弹性盒子内部的子元素仍然可以使用定位，但是就是不能使用浮动

六、视口viewport

视口指的是网的展示窗口叫viewport,我们在进行移动端的网页开发之前，一定要设置视口。

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,mininum-scale=1.0,maxinum=1.0">

width=device-width设置视口的宽度与设备的宽度相同
initial-scale-1.0设置初始缩放1.0
user-scalable=no设置不允许用户缩放
mininum-scale设置最小缩放
maxinum-scale设置最大缩放

七、媒体查询

媒体查询@media

@media only screen and (max-width:宽度) and (min-width:宽度) {
    
    
    
}

屏幕范围划分

根据bootstrap这个框架的屏幕划分来得到的(因为现在大多数框架都是根据这个范围来划分)

0px~767px手机（小屏幕）
768px~991px平板
992px~1199pxPC设备
1200px及以上大型PC