一些css魔法

一.超出隐藏点点显示：

1.一行超出隐藏点点显示

    width: 100%;
    overflow: hidden;
    white-space: nowrap; //不允许换行
    text-overflow: ellipsis;

2.多行最后一行超出隐藏点点显示

    width: 100%; 
    display: -webkit-box;
    -webkit-line-clamp: 3; //盒子模型属性，设置最大行数
    -webkit-box-orient: vertical;
    overflow: hidden;

二.上下左右居中：

1.知道固定宽高(兼容IE8)

    position: absolute/fixed;
    top: 50%;
    left: 50%;
    margin-top:-height/2;
    margin-left:-width/2;

2.transform法,不知道父和自己的高度(不兼容IE8)

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);

3.知道父级的高度

    .childElement {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }

4.table-cell实现不固定宽高文字垂直居中

三.卡片hover过放大：

.card{
    transition: all 0.2s; //设置缓慢变化需要的时长
}
.card:hover {
    transform: scale(1.05);
}

四.原生模拟点击事件不可点击：

:global(.ql-toolbar) {
        pointer-events: none;
        background: #F7F7F7;
        color: rgba(0, 0, 0, 0.25);
      }

 五.border实现小三角：

   2,3块透明 => 

.div{
border-width: 13px;
border-style: solid; // 实线类型
border-color: #857e74 transparent transparent #857e74; // 正方形中心交叉分割四块
}

 六.不同手机尺寸css效果不一致(IE8不支持)：

@media only screen and (device-width: 375px) and (device-height: 812px){ // iphoneX尺寸
  .some-code {
    top: 84px;
    height: calc(100% - 84px);
  }
}

 七.vue渲染元素时v-if判断会留有空白域，img，input等内联元素会受影响导致有间隙，可在父级div的css里加：

font-size: 0; // 消除空白域

八.margin 折叠问题:

父级与子折叠:父加overflow: hidden;或者 float,或display:inline-block,position: absolute;

相邻折叠: float,inline-block
九.从中心开始长度延伸下滑线line:

.div{
postion: relative;
}
.div::after{
content: '',
postion: absolute;
visibility: hidden; //占位并且隐藏
left: 0;
bottom: 0;
transform: scaleX(0); // X轴上缩小到0
transition: .4s ease-in-out;
}
.div:hover::after{
visibility: visible; // 显示
transform: scaleX(1); // 放大到1倍数 
}

 十.div高度充满:

100%:百分比是按照自己父级判定的,所以元素的父级都要100%;

html,body{
  height: 100%;  
}
div{
   height: 100%; 
} 

vh或者vw:是按照屏幕宽高判定,1vh = 1%屏幕高

十一：video自动铺满

video{
    width: 100%; 
    height: 100%; 
    object-fit: fill;
}

 

十二：内容未占满时，footer固定在屏幕最下方，内容占满footer就紧挨着内容，有几种方法

推荐一个超棒的css布局网站！！：https://css-tricks.com

十三： 超有用的css3 selectors: nth-of-type(6n)六的倍数做些操控

十四：检验兼容性的网站：https://caniuse.com/#search=nth-of-type