記錄一些實用的小技巧-CSS篇

1.單行文本截斷

.text{
  width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;    
}

2.多行文本截斷

-webkit-line-clamp屬性值爲須要截斷的行數

.text{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical ; overflow: hidden;
}

3. :not() 選擇器

選中不在此範圍內的元素，例如：div:not(:last-child)，選中除最後一個div的全部div元素

有時候在作列表時須要爲每項添加下邊框線，但最後一個項不須要邊框線

.item:not(:last-child){
    border-bottom: 1px solid #ddd;
}

4.阻止元素成爲鼠標事件的target

pointer-events 指定鼠標如何與元素進行交互，設置爲none，阻止任何鼠標事件對其的做用

.item{
  pointer-events: none;  
}

5.設置行高，文字頂部對齊

vertical-align 用來指定行內元素（inline）或 表格單元格（table-cell）元素的垂直對齊方式。

子元素設置line-height:1，爲了避免繼承父元素的行高

<p>
    <span>頂部對齊</span>
</p>

p{
  line-height:3;  
}
span{
  line-height:1;
  vertical-align:top;  
}

 6.vue深度選擇器

 有時候須要在組件中局部修改第三方組件的樣式，而又不想去除scoped屬性形成組件之間的樣式污染。

此時只能經過>>>，穿透scoped。

有些Sass 之類的預處理器沒法正確解析 >>>。能夠使用 /deep/ 操做符 或 ::v-deep( >>> 的別名)

<style scoped>

外層 >>> 第三方組件類名 {
      樣式
}

/deep/  第三方組件類名 {
      樣式
}

</style>

 7.高寬等比例自適應正方形

當寬度設置爲一些自適應的值時（%、vw等），高度的值沒法肯定，這時能夠使用 padding-top:100% 來解決高度的問題，由於 padding 的值參照於 width

 

<div class="parent">
    <div class="child">
        這裏是內容
    </div>
</div>

.parent{
  position: relative;
  width: 50vw;
  height: 0;
  padding-top: 100%;    
}
.child{
  position: absolute;
  width: 100%;
  height: 100%;   
}

8.改變input元素光標顏色

input{
  caret-color: #dd3131;  
}

9.不規則投影

通常投影效果都會使用box-shadow來完成，但在一些不規則的形狀下達不到預想的效果，這時能夠使用drop-shadow來完成。

div{
  filter: drop-shadow(0 0 6px #ddd); 
}

 10.ios移動端滾動卡頓

-webkit-overflow-scrolling: touch;

 

部分來源於網絡收集，不定時更新~