CSS常用小技巧

1.隐藏overflow滚动条

::-webkit-scrollbar {

    display:none

}

2.单行文字两端对齐（例：输入框前的label）

// 若考虑兼容，文字间要有空格

{
　　text-align: justify

　　text-align-last: justify
}

3.文字超出显示省略号

// 单行文字

{

    width: 100px;

    overflow: hidden;

    text-overflow: ellipsis;  // 显示省略号代替被修剪的符号

    white-space: nowrap;  // 禁止换行

}

// 多行文字

{

    width: 100px;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 3;    // 文字行数

    overflow: hidden;

}

4.vue穿透scoped修改外部、第三方组件样式（例：修改elementUI样式）

　css：　

　　选择器选中外部盒子 >>> 组件类名{ 样式 }

　sass、less：　　

　　/deep/ 组件类名{ 样式 }

// 示例
.box >>> .el-tag {

  cursor: pointer;

}

/deep/ .el-tag {

  cursor: pointer;

}

5.盒子内绝对居中

{

    width: 400px;

    height: 400px;

    display: flex;

    border: 1px solid #000;

    align-items: center;　　// 上下居中

    justify-content: center;　　// 左右居中

}

6.纵向全屏布局

body,

html {

        width: 100%;

        height: 100%;

        display: flex;

        flex-direction: column;

    }

// body没有高度的直接子元素css：flex：1

后续慢慢添加...

巴特西

CSS常用小技巧

最新文章

热门文章