CSS常用笔记

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