文字垂直居中不要使用line-height

使用line-height 居中会导致有些机型文字偏上或偏下

推荐使用flex布局

display: flex;
align-items: center;
justify-content: center;

使用mouseenter 和 mouseleave 制作动画时,会一直触发

代码

 <div class="flex">

      <div @mouseenter="mouseenter" @mouseleave="mouseleave" class="animated" :class="[active && 'zoomIn' || '']">
        <!-- <el-avatar :src="cuteImg" /> -->
        <div style="width: 100px;height: 100px;background-color: red;">

        </div>
      </div>

    </div>

function mouseenter() {
  console.log('mouseenter');
  active.value = true
}
function mouseleave() {
  console.log('mouseleave');
  active.value = false
}

产生原因:TODO

感觉是重绘时导致(根据经验判断,但不一定准确)

解决方案

将动画效果(重绘)切换到子元素上,而不要在父元素上

 <div class="flex">

      <div @mouseenter="mouseenter" @mouseleave="mouseleave">
        <!-- <el-avatar :src="cuteImg" /> -->
        <div style="width: 100px;height: 100px;background-color: red;" class="animated"
          :class="[active && 'zoomIn' || '']">

        </div>
      </div>

    </div>

flex居中&可滚动的一个问题

此时会滚动不全

  <div class="flex-center" style="width: 300px;overflow-x:auto;border: 1px solid red;">
      <div class="mr-15 flex-shrink0">前端</div>
      <div class="mr-15 flex-shrink0">后端</div>
      <div class="mr-15 flex-shrink0">java</div>
      <div class="mr-15 flex-shrink0">javascript</div>
      <div class="mr-15 flex-shrink0">其他</div>
      <div class="mr-15 flex-shrink0">健身</div>
      <div class="mr-15 flex-shrink0">厨艺</div>
  </div>

解决方法

1. 在内部元素中再新增一层容器并设置display: flex

  <div class="flex-center" style="width: 300px;overflow-x:auto;border: 1px solid red;">
    <div class="flex">
      <div class="mr-15 flex-shrink0">前端</div>
      <div class="mr-15 flex-shrink0">后端</div>
      <div class="mr-15 flex-shrink0">java</div>
      <div class="mr-15 flex-shrink0">javascript</div>
      <div class="mr-15 flex-shrink0">其他</div>
      <div class="mr-15 flex-shrink0">健身</div>
      <div class="mr-15 flex-shrink0">厨艺</div>
    </div>

  </div>

2. 去掉justify-content:center,给第一个子盒子设置 margin-left:auto;最后一个子盒子设置margin-right:auto

 <div class="flex-center" style="width: 300px;overflow-x:auto;border: 1px solid red;">

      <div class="mr-15 flex-shrink0" style="margin-left: auto;">前端</div>
      <div class="mr-15 flex-shrink0">后端</div>
      <div class="mr-15 flex-shrink0">java</div>
      <div class="mr-15 flex-shrink0">javascript</div>
      <div class="mr-15 flex-shrink0">其他</div>
      <div class="mr-15 flex-shrink0">健身</div>
      <div class="mr-15 flex-shrink0" style="margin-right: auto;">厨艺</div>
  </div>

解决滚动穿透的问题

什么是滚动穿透

当页面有弹窗时,在滑动弹窗的内容的时候,如果弹窗内容滑到底部了, 并且页面本身有滚动条,且还没有滚动到底部,此时在弹窗下面的页面就会滚动

如何解决

1. 打开弹窗时页面动态限制高度100vh,且设置overflow:hidden; 关闭弹窗时,解决样式(可以解决,但是不知道还有没有其他机型兼容问题)

body {
	height:100vh;
	overflow:hidden;
}