CSS 技巧（持续更新中）

1. 文本垂直居中与水平居中

line-height: 24px; //垂直居中  尽量 少用 margin
text-align: center; //水平居中

2. 列表  垂直对齐， 图标

align-items: center;

3. 不换行 子元素平铺

display: flex;

flex-flow: column nowrap;

justify-content: space-around;

4. 针对chrome 字体无法设置 12px以下大小

.fontsize10 {

    font-size: 10px;

    display: block;

    transform:scale(0.84);

    text-align: center;

    line-height: 18px;

}

5. 文本超出一定宽度 隐藏 使用 ... 代替

.img-view-name {
    width: 150px; // 注意需要设置宽度 max-width 也行
    overflow: hidden; //超出隐藏
    text-overflow: ellipsis; //文字显示省略号
    white-space: nowrap; //文字单行 不换行
}

6. 文本下划线 、中划线、上划线

#html：中划线、下划线、上划线#
 Line-through（中划线）
<span style="text-decoration: line-through">中划线</span>或者<del></del>
 Underline（下划线）
<span style="text-decoration: underline">下划线</span>
Overline（上划线）
<span style="text-decoration: overline">上划线</span>

7. 去除 列表 li前方小原点

li {
    list-style-type: none;
}

8. 多行文字垂直居中

<div class="box">
<div class="content">基于行高实现的多行垂直居中 基于行高实现的多行垂直居中</div>
</div>

.box {
    line-height: 120px;
    background-color: #f0f3f9;
}
.content {
    display: inline-block;
    line-height: 20px;
    margin: 0 20px;
    vertical-align: middle;
}

9. 超出文本左侧省略号 

.test {
    white-space: nowrap; //文字单行 不换行
    overflow: hidden; //超出隐藏
    text-overflow: ellipsis; //文字显示省略号
    direction: rtl; //左侧省略号 ...
}

10. class 内部元素顶部对齐

.test {
    vertical-align: top;
}

11. css 屏蔽元素点击事件

.test{
    pointer-events: none;
}

12. 文本两端对齐

.test {
    text-align: justify;
}
// 但是此属性对文本最后一行无效
// 可改为使用 text-align-last
.test {
    text-align-last: justify;
}

13. 背景渐变色 

// 线性渐变(linear-gradient)
.test {
    background: linear-gradient(0deg, rgb(0, 0, 255) 0%, rgb(255, 192, 203) 100%);
}

// 径向渐变(radial-gradient)
.test {
    background: radial-gradient(circle, rgb(0, 0, 255) 0%, rgb(255, 192, 203) 100%);
}

14. flex 布局后自动换行

.img-concent {
 display: flex;
 flex-flow: row wrap;
}

15. div 展开收起效果

// 默认效果
.img-concent {
    display: flex;
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.3s;
    flex-flow: row wrap;
}

// 展开div
.img-concent-open {
    max-height: 1900px;
}

16. angular 对话框中，mat-dialog-content  子元素设置 position: absolute; 无效时，可设置<mat-dialog-content style="overflow: inherit !important;">

17. css 混合模式，一个DIV 多个背景图片

.test {
    background-blend-mode: screen, overlay;
    background-image: url(https://t7.baidu.com/it/u=3124693600,356058981&fm=193&f=GIF), url(https://t7.baidu.com/it/u=2984822884,629429889&fm=193&f=GIF);
}

18.  css 禁用鼠标点击事件

.disabled {
    pointer-events: none; // 鼠标点击事件禁用
    opacity: 0.6; // 透明度
}

19. css 图片背景 不拉伸 自适应

.overlay-container{
    background-position: center; // 位置 也可以是 50%
    background-size: cover; // 等比放缩
}

// background-size: 100%; // 按宽度放缩，但是 div 宽度小于图片时 ，高度会空出来

20. css 媒体查询，根据浏览器窗口宽度 设置不同样式

// 正常样式
.product-list .overlay-container{
   padding: 0 108px 24px 108px;
}

// 当窗口宽度小于1280时 设置不同padding
@media (max-width: 1280px) {
    .product-list .overlay-container{
        padding: 0 0 24px 8px;
    }
}