css【伪元素】伪元素：https://www.cnblogs.com/starof/p/4459991.html 【

【伪元素】

伪元素：www.cnblogs.com/starof/p/44…

【修改antd默认样式】

2、字体

同样的字体在设计同学的电脑上展示效果和我的电脑展示效果不一样。

原因如下：设计同学的电脑上有这种字体，但是我的电脑上没有。

解法：

1、设计同学提供 ttf 后缀的字体文件，在项目中外部引入文件。但是dsp没有这样的先例。

2、更换成mac字体册里的字体

实现固定区域，中间横竖图片自适应宽高

.videoPhoto {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    .videoCover {
        width: auto;
        height: auto;
        max-witdh: 100%;
        max-height: 100%;
    }
}

div滚动动画

animation-duration: 7s; 
animation-name: slidein; 
animation-iteration-count: infinite;

文字相关

实现6px、7px的字号，chrome浏览器默认最小字号是12px，在用户没有更改的状态下，样式会错乱。

解决方案：通过 transform的scale进行缩放，这样又会造成已下问题

（1）css文字超出宽度-换行

www.cnblogs.com/sugartang/p…

通过 white-space: nowrap 解决。

（2）缩放中心点问题

通过transform-origin调整

（3）省略号显示

/* 超出部分显示省略号 */

        .ellipsis {

            text-overflow: ellipsis;

            overflow: hidden;

        }