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 :

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;//靠前

背景颜色渐变

• 线性渐变
  • 必须添加浏览器私有前缀
  • 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
  • print
  • screen
• 关键字//将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
  • and
  • not
  • only
• 媒体特性
  • width
  • max-width
  • min-width

@media screen and (max-width: 500px){
  /*样式*/
  body{
    bgc:xx;
  }
}

• 引入资源//css文件

  <link rel="stylesheet" href="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"