今天第一天我开始写博客了。真开心!
今天学习的内容有下面这些
字体符号的使用
使用阿里巴巴矢量图库来下载上传字体图 使用方法 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%)
}
可以使盒子中的全部内容都以中心点进行居中