基础知识整理链接

wwq168.host3v.com

字体图标

1. 灵活，可以修改颜色和大小
2. 轻量级 体积小 降低服务器请求次数
3. 兼容性好

使用方式(都需要引用iconfont样式表)

1. 使用unicode编码

   设置字体家族，使用Unicode编码

2. 使用类名（行内引用，必须加iconfont类名）

盒子居中定位

1. margin

   margin-top: 自身高度的一半

   margin-left：自身宽度的一半

   缺点：当元素宽度发生变化，margin的值就需要重新计算

2. translate位移（推荐）

   translate百分比是相对于自身的

3. 绝对定位

   width:600px;
   height:600px;
   position:absolute;
   left:50%;
   margin-left:-300px;    /*自己宽度的负一半宽度*/
   

旋转

1. transform: rotate(角度)

   取值为正, 则顺时针旋转

   取值为负, 则逆时针旋转

transform:rotate(360deg);

2. 转换圆点

   默认圆点是盒子中心点

   transform-origin: 原点水平位置 原点垂直位置;

   取值：

   • 方位名词（top left bottom right center）
   • 像素单位
   • 百分比（参照自身盒子）

3. 当位移与旋转同时出现，先位移再旋转（如果先旋转，坐标轴也在旋转）

4. 想要实现多种转换效果，不能写多行transform，会发生样式层叠性，被覆盖

位移

1. transform:translate(x,y);
2. transform:translateX(200px);
3. transform:translateY(200px);

缩放

1. transform:scale(2,0.5);

   宽度变成之前的两倍，高度变成之前的一半

2. transform: scale(x轴缩放倍数, y轴缩放倍数);

3. 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放

 transform: scale(缩放倍数) 

渐变（渐变是没有过渡效果的）

1. 用background-image属性

2. 一般用于设置盒子的背景

3. background-image: liner-gradient(
   transparent,
   rgba(0,0,0,.6)
   );
   

4. 盒子上下划分 高度 100%

   0% - 30% black

   30% - 50% red

   50% - 100% blue

5. background-image: liner-gradient(
   black 30%,
   red 50%,
   blue 80%,
   blue 100%);
   

6. 渐变的方向

7. 方位名词

   • 默认值 to bottom 从上到下

   • to top 从下到上

   • to right top右上角

   • background-image: liner-gradient( to right , black, red)
     

8. 角度deg

   background-image: liner-gradient(0deg, black, red);
   
   

9.背景图片渐变效果要慎用，浏览器支持效果差