分享实用的CSS技巧

请注意浏览器的兼容性

去除滚动条

<style>
  .scroll-view::-webkit-scrollbar{
    display:none;
  }
</style>

img图片适应

object-fit的属性：

• fill（不保持纵横比缩放图片，使图片完全适应）
• contain（保持纵横比缩放图片，使图片的长边能完全显示出来）
• cover（保持纵横比缩放图片，只保证图片的短边能完全显示出来）
• none（保持图片宽高不变）
• scale-down（当图片实际宽高小于所设置的图片宽高时，显示效果与none一致；否则，显示效果与contain一致）
• inherit
• initial
• unset

<style>
  .image{
    object-fit: cover;
  }
</style>

input框placeholder样式

<style>
  .input::-webkit-input-placeholder {
    color: red;
  }
</style>

nth-child

<style>

  /* 奇数子元素 */
  .item:nth-child(odd) {
    background-color: #f66;
  }

  /* 偶数子元素 */
  .item:nth-child(even) {
    background-color: #66f;
  }

  /* 第2个元素 */
  .item:nth-child(2) {
    background-color: #3c9;
  }

  /* 小于等于2的元素 */
  .item:nth-child(-n+2) {
    background-color: #3c9;
  }

  /* 大于等于2的元素 */
  .item:nth-child(n+2) {
    background-color: #3c9;
  }


  /* 从第6个元素到第10个元素 */
  .item:nth-child(n+6):nth-child(-n+10) {
    background-color: #3c9;
  }

  /* 倒数第2个元素 */
  .item:nth-last-child(2) {
    background-color: #3c9;
  }

</style>

:not

<style>
  
  /* 选择除了最后一个元素的其他元素 */
  .item:not(:last-child) {
    background-color: #f66;
  }

</style>

文字裁剪

<style>

  /* 单行文字裁剪 */
  .text{
    overflow: hidden; 
    text-overflow:ellipsis; 
    white-space: nowrap;
  }

  /* 多行文字裁剪 */
  .text{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* 裁剪行数 */
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

</style>

阻止文字被选择

<style>
  .text{
    user-select:none;
  }
<style>

吸附定位

目标元素在可视区域内表现为relative ，滚动到可视区域外表现为fixed

<style>
  .topbar{
    position:sticky;
    top:0;
  }
<style>