CSS知识点&&长期总结

前言

• 本文主要是工作中或平时遇到的一些CSS相关问题。
• 末尾会贴前端业内有交流氛围好的微信群的二维码，互相进步。

知识点

1.滚动条

• 隐藏滚动条

    scrollbar-width: none; // 火狐
    -ms-overflow-style: none; // ie
    /* for Chrome*/
    &::-webkit-scrollbar {
        display: none;
    }

• 修改滚动条样式

	//-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.
	//touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
	
    -webkit-overflow-scrolling: touch;

    &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 4px;
    }

    &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        background: color;
        cursor: pointer;
    }

    &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        border-radius: 0;
        border: 1px solid color;
        background: transparent;
    }

2.input默认文字修改

input::-webkit-input-placeholder {
    color: #8195bf;
}

input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #8195bf;
}

input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #8195bf;
}

input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #8195bf;
}

3.单行省略号

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

4.禁止点击

• 父元素 cursor: not-allowed;
• 子元素 pointer-events: none;
• cursor: not-allowed;
  • // cursor:no-drop; 虽然它们可能在大多数系统上产生相同的效果,但它们在语义上是不同的,允许浏览器和/或系统为每种情况实现不同的图形. no-drop意味着该元素不实现拖放API,而not-allowed是一个通用术语,意味着该元素未启用某些操作.

 // 禁止点击
    .historical {
        cursor: not-allowed;
        user-select: none; //文字不可被选中
        span {
            pointer-events: none;
        }
    }
    
render: (h, params) => {
                        return h(
                            "span",
                            {
                                style: {
                                    cursor: !params.row.opId
                                        ? "not-allowed"
                                        : "pointer"
                                }
                            },
                            [
                                h(
                                    "span",
                                    {
                                        style: {
                                            "white-space": "nowrap",
                                            color: "rgb(45, 140, 240)",
                                            "pointer-events": !params.row.opId
                                                ? "none"
                                                : "",
                                            "text-decoration": "underline"
                                        },
                                        on: {
                                            click: e => {
                                                this.operation(params.row);
                                            }
                                        }
                                    },
                                    "提取"
                                )
                            ]
                        );
                    }

5.文字下划线

.send-app-ids {
    &:hover {
        color: #2c7eff;
        text-decoration: underline;
    }
}

6. 四边线，有个四个小方块(scss)

/*  四边线，有个四个小方块   @include size-box(1px, solid, $--color-primary-32);*/
@mixin size-box($border-box: 1px, $borderType: solid, $color: $--color-primary, $width: 6px, $border: 0px) {
    border: $border-box $borderType $color;
    background: linear-gradient(-45deg, $color, $color) left top $border no-repeat,
        linear-gradient(45deg, $color, $color) right top $border no-repeat,
        linear-gradient(45deg, $color, $color) left bottom $border no-repeat,
        linear-gradient(-45deg, $color, $color) right bottom $border no-repeat;
    background-size: $width $width;
}

7.兼容ie的iview的table的复选框出现对勾

// 兼容ie的table的复选框出现对勾
.ivu-checkbox-checked .ivu-checkbox-inner::after{
    display: table;
    display: block;
}

8.四角只有三个小正方形

• 四角只有两个小正方形，类似的
  

/*  四边线，有个四个小方块   @include size-box(1px, solid, $--color-primary-32);*/
@mixin three-box($colorOne: $--color-primary, $colorTwo: $--color-primary, $width: 6px, $border: 0px) {
    background: linear-gradient(-45deg, $colorTwo, $colorTwo) left top $border no-repeat,
        linear-gradient(45deg, $colorOne, $colorOne) left bottom $border no-repeat,
        linear-gradient(-45deg, $colorTwo, $colorTwo) right bottom $border no-repeat;
    background-size: $width $width;
}