css通用类

      //主题背景色-白色
      .theme-bgcolor-white {
            background-color: white;
      }
/* 字体居中 */
.align-center {
    text-align: center;
}
 /* 外边距水平居中 */
.margin-auto {
    margin: 0 auto;
}

/* 定位水平居中 */
.positon-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* 下划线 */
.underline {
    border-bottom: 1px solid #f0f0f0;
}

/* 下划线消失 */
.underline-none {
    border-bottom: none;
}
      /*单行 溢出省略 */
        .overflow-ellipsis {
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
       /*多行 溢出省略 */
      .overflow-ellipsis-3 {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
       }
       /*字体两端对齐*/
       .justify-align {
           width: 70px;
       line-height: 30px;
           text-align: justify;
           text-align-last:justify;
       }
       //左浮动
        .left {
            float: left;
        }
        //右浮动
        .right {
              float: right; 
        }
        //清除浮动
        .clearfix {
               overflow: auto;
        }
        //横向滚动
        .overflow-y {
              width: 100%;
              white-space: nowrap;
              overflow-x: scroll;
              overflow-y: hidden;
        }
        //转行内块级元素
        .inline-block {
              display: inline-block;
        }
        //显示
        .block {
              display: block;
        }
        //隐藏
        .hidden {
              display: none;
        }
        //伪元素--前缀
        .prefix {
               position: relative;  
               padding-left: 20px;
        }
        .prefix::before {
               content: '';
               position: absolute;
               left: 0;
               top: 0;
          }
        //伪元素-后缀
        .suffix {
               position: relative;
        }
        .suffix::after {
               content: '';
               position: absolute;
               right: 0;
               top: 0;
         }
        //伪元素左右缀
        .left-and-right__suffix {
               position: relative;
               padding-left: 20px;
         }
         .left-and-right__suffix::before {
               content: '';
               position: absolute;
               left: 0;
               top: 0;
          }
          .left-and-right__suffix::after {
               content: '';
               position: absolute;
               right: 0;
               top: 0;
          }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容