常用的CSS样式整理【持续更新中】

更新

参考：https://www.cnblogs.com/coco1s/p/14439760.html

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。

object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

ul li img { 
width: 150px; 
height: 100px; 
object-fit: cover; 
}

利用 object-fit: cover，使图片内容在保持其宽高比的同时填充元素的整个内容框。

   

优化手势，用户点击时鼠标手势:cursor: pointer; // 可点击

布局：

flex-grow默认值为0，用于子元素的宽度之和小于父元素的宽度时分配剩余空间.

设置flex-grow:1,表示占满剩余空间

为什么两个页面同样的写法样式却不一样呢？

.table-content-item {
        padding:13px 15px;
        &.long-data {
          width: 210px;
        }
}

原因：因为使用了组件，第一个页面自动添加了box-sizing：border-box的样式，造成了两个页面的宽度不一致。

box-sizing 有两个常用属性：

content-box  是默认值。内容宽度=width

border-box ：内容宽度+padding+border=width

-------------------------------------------------------------

渐变色：

background: linear-gradient(90deg, #f47100 0%, #e60000 100%);

 

输入框提示字体样式

可设置input提示语的大小，颜色等样式（与input输入不同）

input::-webkit-input-placeholder{
     font-size: 14px;
     font-weight: 400;
     color: #999999;
     line-height: 16px;
}

 

输入框在chorme浏览器自动填充问题：

input:-webkit-autofill {
      box-shadow: 0 0 0 1000px white inset !important;
    }

 

文字超过固定宽度，显示省略号（元素需是块元素，否则不生效）

.overFont{
     // display：block；
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
}

 

滚动条样式（当想要实现滚动效果又想滚动条不可见时，设置height为0，或者display:none）

 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
 ::-webkit-scrollbar  
 {  
     width: 16px;  
     height: 16px;  
     background-color: #F5F5F5;  
}