1. +脱离文档流，用于微调
{position: relative; top: 10px; right: 0;
}2. flex布局大法
<div class="demo"><div class="demo-1"></div><div class="demo-2"></div><div class="demo-3"></div>
</div>如果给demo设置了flex布局，然后子元素分别设置了flex比例，则按照设定的比例展开，例如按照1:3:1来分配布局：
.demo {display: flex;
}
.demo-1 {flex: 1;
}
.demo-2 {flex: 3;
}
.demo-3 {flex: 1;
}如果某个class固定了宽度，则不参与分配，剩下的按照比例分配，例如demo-1固定200px，剩下按照3:1分配：
.demo {display: flex;
}
.demo-1 {width: 200px;
}
.demo-2 {flex: 3;width: 0;
}
.demo-3 {flex: 1;width: 0;
}flex内部元素居中
.demo {display: flex;align-items: center; // 垂直居中justify-content: center; // 水平居中
}3. margin和padding
margin用于当前元素跟其他元素之间的距离调整，padding用于当前块元素给其内部加上一些边距，不至于内部元素太贴边
4. 字数超出了自动省略号
.overflowShow {white-space: nowrap;overflow: hidden;text-overflow: ellipsis
}.multi-overflowShow {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;
}5. 页面滚动不显示滚动条
.main-text {overflow-y: scroll;
}
.main-text::-webkit-scrollbar {width: 0;
}6. 调整元素透明度
filter: opacity(75%)7. 如何让img里的图片自适应div，且不变形
object-fit: cover;8，图片的移动
移动属性（translate）
格式1：transform：translateX（数值px）
格式2：transform：translateY（数值px）
格式3：transform：translateZ（数值px）
格式4：transform：translate（数值1px，数值2px）注意：当translateX（）里面是正数时向右边移动，反之向左移动；translateY（）里面是正数时向下移动，反之向上移动。translateZ（）平面上看不出效果变化。
transform:translateX(100px) /*向右边移动100px*/
transform:translateX(-100px) /*向左边移动100px*/transform:translateY(100px) /*向下边移动100px*/
transform:translateY(-100px) /*向上边移动100px*/transform:translate(100px,-100px) /*向右上角移动100px*/
transform:translate(-100px,100px) /*向左下角移动100p
