小诀窍

1. 用css3做一个关闭icon

html代码：

<div class="nav-icon">
       <div>合作机构授权<span class="close"></span></div>
</div>

css3代码：

.nav-icon{
        position: relative;
        padding: 24px 0;
        background:#ffffff;
        width: 100%;
        font-family: PingFangSC-Regular;
        font-size: 18px;
        color: rgba(0,0,0,0.75);
        letter-spacing: 0;
        text-align: center;
    }
    .close {
       position: absolute;
       right: 10px;
       line-height: 20px;
       font-size: 30px;
       color: #C0C0C0;
    }
    .close::before {
        content: "0D7";
    }

对于按钮中的叉按钮，用的是Unicode中的一种标识，以下这些也可以使用，标识编码(16进制) Name

✖ 2716 粗体乘法
✗ 2717 交叉
✘ 2718 粗体交叉
× 0D7 乘法符号
⨯ 2A2F 向量乘积
x 78 小写字母
X 58 大写字母

效果：

2.场景：文本一行右对齐，多行左对齐

.parent {
    flex:1;  //左右撑大
    overflow: visible;   //都是可见的
    white-space:normal //默认，可以换行
    text-align:right //一行向右对齐
}
.child {
     display:inline-block //一行显示行类，多行为块级元素
     text-align: left;  //多行左对齐
     word-break: break-all; 文本打散，解决中英文，中文一行，英文一行
}


<div class="parent">
    <p class="child">显示的文本</p>    
</div>

3.sticky foot

在浏览器中，无论是内容超过一屏还是没有超过一屏，底下的按钮始终在页面底部而不是在浏览器底部。可以通过一个div放在页面底部：

position:absolute;
 100%; 
bottom:0;

4.利用伪类弹框居中

借助伪类设置一个行内元素，设置height=100% vertical-align: middle; 弹出框相对伪类元素的样式显示，可以让弹出框居中。

<style>
    .container{
      position: fixed;
      top:0;
      left:0;
      bottom: 0;
      right: 0;
      background: rgba(0,0,0,.5);
      text-align: center;
      font-size: 0;
      white-space: nowrap;
      overflow: auto;
    }
    .container::after {
       content: 'hello world!';
       display: inline-block;
       height: 100%;
       vertical-align: middle;
    }
    .dialog {
      display: inline-block;
      width: 10rem;
      height: 10rem;
      vertical-align: middle;
      text-align: left;
      font-size: 14px;
      white-space: normal;
      background: #ffffff;
      padding: 10px;
    }
</style>
<body>
  <div class="container"> 
  <div class="dialog">
      基于vertical-align的水平垂直居中 ---css精选
  </div>
</div>
</body>

5.通过hover伪类来控制div的显示和隐藏

.mgf_tips_icons:hover .float_tips_area{
     display:block;
     border: 1px solid #dedede;
  }