CSS小技巧1

CSS变量使用

在进行css使用中 如果一个颜色为主色 以后会进行多次使用 在很多类名当中都有用到，如果有一天要修改这个颜色，就要在有使用过的各类选择器下一一修改。还很容易漏掉一些。再加上慢慢调试有些折磨人。我们可以使用定义css变量来简化操作：

    html{
      --main-color:#f35;
      --biaoti-size:20px;
      --fanbai:#fff
    }
    .box{
      width: 500px;
      height: 240px;
      border: 1px solid #333;
      text-align: center;
      line-height: 240px;
      border-radius: 24px;
      box-sizing: border-box;
      background: var(--main-color);
      color: var(--fanbai);
      font-size: var(--biaoti-size,18px);
    }

定义：

 --变量名:变量值（正常的css值 可以是颜色 字体 描边.....）;

在html 定义变量就是全局变量那么在页面中都可以使用

    html{

      --main-color:#f35;

    }

在 类名box里定义变量 只有在box 里面的元素才可以使用变量

   .box{

      --main-color:#f35;

    }

使用：

    .box{

      background: var(--main-color);

    }

注意要遵循CSS规则 key和value要对照

解析变量成这样是不行的 font-size:#ffffff

 正常CSS-key:var(--定义的变量名)

保险点的做法 还可以添加默认值 如果变量编译失败 就会使用默认值

 font-size: var(--biaoti-size,18px); 

CSS使用个性化字体

 网页开发中最长用到的字体就是微软雅黑、发展到现在已经慢慢不能满足展示需要了

这里给大家介绍下如何引入其他字体在展示在网页中

首先定义字体

src:url 可以是相对路径 也可以是网络资源

@font-face{
font-family: "HYShiGuangTiW"; /*自定义的字体名*/
src:url('HYShiGuangTiW.ttf'); /*引入字体包*/
}

@font-face{
  font-family: "oppoR"; /*自定义的字体名*/
  src:url('http://www.wsg3096.com/gangback/pub/OPPOSans%20R.ttf'); /*引入字体包*/
}

直接在选择器中使用

font-family: @font-face中自定义的名字;

 展示效果：

CSS实现元素水平加垂直居中

方案一 绝对定位 50% 再减去自身宽高的 50%（手动计算）

.box{

  position:absolute;

  width: 400px;

  height: 400px;

  top: calc(50% - 200px);

  left: calc(50% - 200px);

}

方案二 固定定位 50% transform: translate(-50%,-50%);

.toast{
  position:fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 99;

 padding: 12px 18px;
}

方案三 弹性盒布局

.flex{

display: flex;

justify-content: center;

align-content: center;

align-items: center;

}