基础知识

一些常用

垂直居中

  1. 设置 mergin: auto 0;
  2. 居中单行的行内元素：
    1. 将子元素和父元素的行高line-height设置成一样的
  3. 居中图片
    1. 在图片上用属性vertical-align

比如：

  1. <div class="userName">
  2.   <img :src="item.user.avatar" alt="">
  3.   <div>{{item.user.uname}}</div>
  4. </div>
  1. .userName {
  2.   height: 20vw;
  3.   line-height: 20vw;
  4.   background-color: aquamarine;
  5. }
  6. .userName img {
  7.   width: 16vw;
  8.   vertical-align: middle;
  9. }
  10. .userName div {
  11.   display: inline-block;
  12.   line-height: 20vw;
  13. }

效果：
image.png

  1. 调整子元素的top, left
    1. .son {
    2. position: fixed;
    3. top: 50%;
    4. left: 50%;
    5. transform: translate(-50%, -50%)
    6. }

让多个子元素在一行中均匀放置

用flex
父元素设置：

  1. .comTitle {
  2.   display: flex;
  3.   justify-content: space-between;
  4. }

justify-content这个元素有很多值可以设置。

设置文本显示的行数

  1. display: -webkit-box;
  2. -webkit-box-orient: vertical;
  3. -webkit-line-clamp: 1;
  4. overflow: hidden;