CSS 高级
2D转换 transform
translate
- 不会影响到其他元素的位置
- 对于行内元素无效
- transform: translate(x,y)//translateX(x)//translateY(y)
- 50%:盒子自身宽度
- 水平/垂直居中
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
transform-origin
- transform-origin//旋转中心点
- transform-origin:x y//50% 50%//left top
scale
- 不会影响到其他元素的位置
- 以中心点缩放（直接更改width、height向右下缩放
- tranform: scale//缩放
- tranform: scale(2,2)//tranform: scale(0.5,0.5)//tranform: scale(2)
transform 综合写法
- 同时有位移和其他属性，要把位移放到最前面（旋转会改变坐标轴）
- transform: translate(40px, 0) scale(1.3) rotate(90deg);
动画
- 定义动画
//动画序列
//开始状态
0%{}
//结束状态
100%{}
}
- 调用动画
-
动画名称
- animation-name :xxx;
-
持续时间
- animation-duration: 2s;
-
运动曲线//linear 匀速//
- animation-timing-function: ease
- steps(5) //分成特定帧
- 每两个状态切分
-
何时开始
- animation-delay: 1s;
-
重复次数 //infinite 无限
- animation-iteration-count: 2;
-
下一周期是否反方向播放 默认normal//反方向 alternate
- animation-direction: alternate;
-
动画结束后的状态 默认是 backwards 回到起始位置//停留在结束状态 forwards
- animation-fill-mode
-
动画运行或暂停 默认是running //pause
- animation-play-state:pause;
-
- 简写 animation: xxx 2s linear 0s 1 alternate forwards//无animation-play-state
- 添加多个动画
- animation: xxxxxx, yyyyyyy;
animation :
- animation: xxxxxx, yyyyyyy;
- 添加多个动画
div {
animation-name :xxx;
animation-duration: 2s;
}
- 动画序列
- from 和 to 相当于 0% 和 100%
3d
- 移动
- transform: translateZ(100px)
- 选择
- transform: rotateX(45deg)//左手准则
- transform: rotateY(45deg)
- transform: rotateZ(45deg)
- transform: rotate3d(x,y,z,deg)//(x,y,z)矢量
- 透视
- 添加给父元素
- perspective: 1000px;
- 视距
- 3d呈现
- 添加给父元素
- transform-style: preserve-3d//为子元素开辟3d空间
私有前缀
- -moz-
- -ms-
- -webkit-
- -o-
-moz-border:0
-ms-border:0
-webkit-border:0
-o-border:0
border:0
移动端
- 二倍图
- css->移动端 放大二倍 导致模糊
- 准备2倍大的图片，再缩小1/2,放入1/2倍大的盒子中
- 精灵图二倍图
- 将精灵图缩放 background-size: 40px auto;
- position
flex
- IE 11或更低版本，不支持或部分支持
- 适用于移动端
常见属性
- 父项属性
- flex-direction: 设置主轴方向
- justify-content: 设置主轴上子元素排列方式
- flex-start// 默认从头部开始 如果主轴是x轴 则从左到右
- flex-end// 从尾部开始排列
- center// 在主轴居中对齐（如果主轴是x轴则 水平居中）
- space-around //平分剩余空间
- space-between// 先两边贴边 再平分剩余空间
- flex-wrap: 设置子元素是否换行
- no-wrap 默认子元素不换行//如果装不开，会缩小子元素宽度 放到父元素里面
- wrap //自动换行
- align-items// 设置侧轴上子元素排列方式（单行）
- align-content// 设置侧轴上子元素的排列方式（多行）
- 子元素出现换行时有效果 单行没有效果
- 子项属性
- flex: 1;//所占剩余空间比例//份数
- flex: 20%//换行 多行显示时
- align-self 控制子项自己在侧轴上的排列方式
- order 属性定义项目排列顺序 默认为0
- order: -1;//靠前
- flex: 1;//所占剩余空间比例//份数
背景颜色渐变
- 线性渐变
- 必须添加浏览器私有前缀
- background: -webkit-liner-gradient(left, red, blue);//从左
- background: -webkit-liner-gradient(top, left, red, blue);//从左上角
rem
em
- 父元素字体大小
rem// root em //单位
- 相对于html元素 字体大小
媒体查询
- @media 针对不同的屏幕尺寸设置不同的样式
- 重置浏览器大小的过程中，页面也会根据浏览器的高度和宽度重新渲染页面
@media mediatype and|not|only (media feature)
- mediatype
- all
- screen
- 关键字//将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
- and
- not
- only
- 媒体特性
- width
- max-width
- min-width
@media screen and (max-width: 500px){
/*样式*/
body{
bgc:xx;
}
}
- 引入资源//css文件
<link rel="stylesheet" href="http://www.bubuko.com/x1.css" media="screen and (min-width: 320px)">
less
css预处理语言，扩展了css的动态特性。
定义变量
@color: red;
body{
color: @color;
}
嵌套
- 子元素样式直接写到父元素里面
.a {
// 子元素后代选择器 相当于 .a .b
.b{
}
// 伪元素 伪类 交集 选择器 加&符号 相当于 .a:hover
&:hover{
}
}
运算
- 运算符两侧加空格 width: 15px + 5;
- 两个数参与运算 如果只有一个数有单位 则结果以这个单位为准
- 如果2个数都有单位，且不一样 则最后结果以第一个为准
导入
- @import "common.css"/@import "common"
CSS 高级
原文：https://www.cnblogs.com/w0000/p/15334998.html