H5知识点

1、基线垂直对齐

`vertical-align：值； 控制行内元素行内块元素垂直对齐 块元素无效`

vertical-align：baseline；// 默认值 基线对齐
vertical-align：top；// 顶对齐
vertical-align：middle；// 垂直居中对齐
vertical-align：bottom；// 底对齐

块元素可以设置行高 及 line-height, 缺点是高度固定，超出去的文本会折行

height: 30px;
line-height: 30px;

可以考虑由内容自动撑开，设置padding， 适用于有背景色的

<div  class="tip">
    <i class="tip-img"></i>
   <span>哈哈哈～</span>
 </div>

.tip {
  background-color: rgba($color: #5c7cff, $alpha: 0.15);
  padding: 0.18rem 0.2rem;
  border-radius: 0.08rem;
  margin-top: 0.5rem;
  margin-bottom: 0.6rem;
  text-align: center;
  // line-height: 0.54rem;
  span {
    font-size: 0.14rem;
    color: #5c7cff;
  }
  .tip-img {
    display: inline-block;
    vertical-align: middle;
    margin-top: -1px;
    margin-right: 3px;
    width: 0.3rem;
    height: 0.22rem;
    background: url(../../images/png/xiaomao.png) no-repeat;
    background-size: 100%;
  }
}

2、文字竖排显示

<p style=“writing-mode: tb-rl”>你好</p>

3、Vue3 向window注入方法 TS警告 元素隐式具有 "any" 类型，因为索引表达式的类型不为 "number" 问题解决。

window['funcName'] = function(){};
// 'funcName'会标红警告
 
(window as any).funcName = function(){};
// 正确的！

4、定义props 参数类型控制台报错,可以这么改

uid: [Number, String],

5、两端对齐

1：float: left； float:right;
2:
  display: flex;
  justify-content: space-between;
  margin-left: auto; 自动撑开