首页 > Web开发 > 详细

CSS 高级

时间:2022-05-27 22:18:54      阅读:17      评论:0      收藏:0      [点我收藏+]

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"

CSS 高级

原文:https://www.cnblogs.com/w0000/p/15334998.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!