2022.1.9

115 阅读1分钟

今天第一天我开始写博客了。真开心!

今天学习的内容有下面这些

字体符号的使用

使用阿里巴巴矢量图库来下载上传字体图 使用方法 Font class写法class=“iconfont icon-XXXX" 来在行内样式中写字体符号 Unicode写法与使用伪类 标签名::after{ content: "\e63b" } 字体符号可以改变颜色与大小 很方便

平面转换的属性

平面移动可以不占用别的元素的位置 不会造成盒子位移 很方便 平移 transform:translate 使用元素 translateX() translateY()来做XY轴的平移 也可以 元素translate(x,y)来做X与Y轴的平移

旋转 transform:rotate(Xdeg)

使用元素 rotate(Xdeg) 来做元素的旋转 默认的旋转中心式元素的中心 transform-origin 来重新选择原点
元素属性值 方位定点 (位置(left等)位置(left等)) 坐标定点 (X坐标 Y坐标)

缩放 tranform:scale(X)

使用元素 scale(X) 来进行X倍的缩放
平面移动属性的连写
transform:translate() rotate() scale() 平面转化属性会覆盖低权重的原平移属性 最好每次写都经行连写来不被覆盖 旋转属性会改变平移属性的轴方向 所以旋转属性写在平移属性后

最后是渐变色

渐变色 元素 background-image:linear-gardlent(方向,颜色1,颜色2) 使用linear-gardlent元素来进行颜色的改变

   比较有用的内容  
   做多盒子层叠  
  .box1{
  position:relative;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%)
      }
  可以使盒子中的全部内容都以中心点进行居中