关于前端css一些属性的总结
一、过渡属性
过渡:transition
属性值:
- transition-property:all(默认,代表所有变化的属性都发生一个过渡效果);(要执行过渡的属性)
- 如transition-property:width/height等;
- transition-duration;(要执行过渡的时间)
- transition-timing-function;(要执行过渡的时间函数 即过渡效果)
- ease,先快后慢
- ease-in,先慢后快
- ease-out,先快后慢
- ease-in-out,开始与结束慢,中间快
- 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 位移
- translate-X 沿着x轴进行位移
- translate-Y 沿着y轴进行位移
- translate-Z 沿着z轴进行位移(需开启3d空间)
可简写:translate(横坐标,纵坐标)
translate3d(横坐标,纵坐标,z轴坐标)
scale 缩放
(在不改变width/height的值的情况下,可以将元素整体放大或缩小)
scaleX
scaleY
可简写:scale(X轴缩放,Y轴缩放)
rotate 旋转
rotateX()
rotateY()
rotateZ()
单位:deg/turn(turn代表圈数)
skew 倾斜
- skewX(度数)
- 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(设置动画的方向)
- normal 正常方向【默认值】
- reverse 反转
- alternate 正反交替运行
- alternate-reverse 反正交替运行
- animation-play-state(动画的播放状态)
- running 运行状态
- paused
- animation-fill-mode(动画在停止的时候最后一帧的状态)
- backwards 返回到开始状态【默认值】
- forwards 停留在结束状态
- 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:设置弹性的方向
- row 横轴
- row-reverse 横轴反转
- column 纵轴
- column-reverse 纵轴反转
justify-content 设置主轴上面的排列方式
flex-start
弹性开始的地方flex-end
弹性结束的地方center
居中space-between
使用空间撑开元素到两边space-around
空间环绕space-evenly
每个元素的空间均匀分布
align-items 设置副轴上的排列方式
flex-start
弹性开始的地方flex-end
弹性结束的地方center
居中baseline
文字基线对齐stretch
拉伸【默认值】
flex-wrap 当内部元素在株洲傻瓜排列不下的时候设置换行
nowrap
不换行【默认值】wrap
换行wrap-reverse
换行,但是要翻转方向
flex-flow 综合属性 即flex-direction和flex-wrap的结合体
flex-flow:row wrap; /*主轴为row 并且换行*/ flex-flow:column nowrap; /*主轴为column 并且不换行*/
align-content 多主轴设置,用于换行后设置多主轴的排列,即副轴上主轴的排列
flex-start
flex-end
center
space-between
space-around
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.0user-scalable=no
设置不允许用户缩放mininum-scale
设置最小缩放maxinum-scale
设置最大缩放
七、媒体查询
媒体查询@media
@media only screen and (max-width:宽度) and (min-width:宽度) {}
屏幕范围划分
根据bootstrap这个框架的屏幕划分来得到的(因为现在大多数框架都是根据这个范围来划分)
0px~767px
手机(小屏幕)768px~991px
平板992px~1199px
PC设备1200px
及以上 大型PC
关于前端css一些属性的总结相关推荐
- 从零开始学前端:CSS字体属性和文本属性 --- 今天你学习了吗?(CSS:Day08)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS引入 - 今天你学习了吗?(CSS:Day07) 文章目录 从零开始学前端:程序猿小白也可以完全掌握 ...
- 前端css单位小结:vh、vw、百分比、rem、px、计算属性calc
写在前面: 本文作为本人学习总结之用,同时分享给大家~ 个人前端博客网站:zhangqiang.hk.cn 欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步! 前端c ...
- 镜像css3,利用css动画属性rotate来实现镜像翻转_WEB前端开发
layui中使用的一些弹出框_WEB前端开发 Layui是一款采用自身模块规范编写的情怀型前端UI框架,本文就来为大家介绍一下layui中使用的一些弹出框,希望对大家有一定的帮助. 要实现镜像翻转,有 ...
- 前端css弹性布局各种属性
前端css弹性布局各种属性 一.基本概念 Flexbox 是 flexible box 的简称(注:意思是"灵活的盒子容器")又叫弹性布局,是 CSS3 引入的新的布局模式.它决定 ...
- 从零开始学前端 - 5. CSS常用属性
作者: 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享 每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
- 【前端 - CSS】第 18 课 - 背景属性
欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行.动静不失其时,其道光明. 目录 1.缘起 2.背景属性 2.1.背景图 2.2.背景图平铺方 ...
- 前端 CSS day03-核心属性
核心属性:css文本属性 1.font-size9pt = 12px; 1em=16px 0.75em=12px=9pt2.font-family浏览器默认为宋体,但是在谷歌浏览器里面默认字体是微软雅 ...
- 前端:CSS/13/HTML引入CSS的方法,CSS表格属性,盒子模型,上下外边距合并
HTML引入CSS的方法 1,嵌入式 通过<style>标记,来引入CSS样式: 语法格式:<style type="text/css"></styl ...
- 前端:CSS/10/伪类选择器,CSS列表属性,CSS边框属性,CSS内边距属性,CSS背景属性
CSS伪类选择器:给超链接加的样式(链接的不同状态加样式) 一个超链接,有四个状态: 正常状态(:link):鼠标没放上去之前的样式: 放上状态(:hover):鼠标放到链接上时的样式: 激活状态(: ...
最新文章
- C#实现一个用于开机启动其他程序的Windows服务
- 如何在Android上管理startActivityForResult?
- 深入理解Spring异常处理
- Mr.J--HTTP学习笔记(一)-- HTTP简要概述
- vue-cli入门之项目结构分析
- 用mysql求同类型用户重合度_匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来_PHP教程...
- Fiddler中文乱码
- apex显示服务器连接超时,apex与服务器链接超时
- 毕业设计开题报告撰写方法
- Oracle Rac 添加节点测试笔记
- Coursera 机器学习 -- 逻辑回归 笔记 【第二周】
- SOLR7实践(二)--DIH配置及使用
- 如何激发员工的积极主动性
- 2018年10月移动应用APP活跃用户数排行榜TOP20
- oracle em13c install,如何使用Oracle EM13c管理数据库私有云
- C语言<string.h>常用函数整理
- Windows客户端挂载NFS
- PDF如何合并为一个PDF?
- SpringBoot +LayUI 实现表单设计器
- Java后端真实面试题大全(有详细答案)--高频/真题