一些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