记录一些实用的小技巧-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;

 

部分来源于网络收集，不定时更新~