项目常用的css

1.单行实现文字省略号

/* 这里要显示的设置宽度 */
overflow: hidden;
white-space: nowrap;
/* 文字超出宽度则显示ellipsis省略号 */
text-overflow: ellipsis;
width: 100%;

2.第几行实现文字省略号

display: -webkit-box;
-webkit-box-orient: vertical;  /* 设置方向 */
-webkit-line-clamp: 2;  /* 设置超过为省略号的行数 */
overflow: hidden;


使用webpack打包工具时，会忽视这个-webkit-box-orient属性，这里修改成下面的写法就可以了
display: -webkit-box; 
overflow: hidden;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
-webkit-line-clamp: 8;
text-overflow: ellipsis;

3.阴影

 box-shadow: 5px 6px 30px #d8d8d8;

4.滚动条样式

            .main_left_ul::-webkit-scrollbar {
                width: 8px; //表示垂直滚动条的宽度
                height: 8px; //表示水平滚动条的高度
            }
            /*鼠标悬浮在该类指向的控件上时滑块的样式*/
            .main_left_ul:hover::-webkit-scrollbar-thumb {
                background-color: rgba(0, 0, 0, .2);
                border-radius: 10px;
                -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
            }
            /*鼠标悬浮在滑块上时滑块的样式*/
            .main_left_ul::-webkit-scrollbar-thumb:hover {
                background-color: rgba(0, 0, 0, .4);
                -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
            }
           https://blog.youkuaiyun.com/javao_0/article/details/55680160

将一个网页变成黑白色

{
    filter: gray !important;
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    /* filter: grayscale(100%); */
    /* -webkit-filter: grayscale(100%); */
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

flex: 1 0 auto; 是觉定了 当flex 盒子的子元素超出父元素宽度的时候是滚动还是挤压内容