CSS常用样式总结

1、省略号

详细样式：css文字超出元素省略,单行、多行省略_css单行省略_前端鼓励师的博客-CSDN博客

/*
   基础的单行文本省略样式，用于基础布局或flex layout 自适应 width 省略，
需要配合width-100 或 flex-grow-1使用
*/
.single-text-ellipsis-base {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/*
 单行文本省略显示
*/
.single-text-ellipsis {
  .single-text-ellipsis-base;

  width: 100% !important;
}

.text-truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

// 多行省略
p{
    width:100px;
    overflow : hidden;/*必须结合的属性,当内容溢出元素框时发生的事情*/
    text-overflow: ellipsis;/*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
    display: -webkit-box;/*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
    -webkit-line-clamp: 2;/*用来限制在一个块元素显示的文本的行数。*/
    -webkit-box-orient: vertical;/*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
}
 	

2、tag样式

.tag-label {
    border-radius: 2px;
    height: 24px;
    padding: 2px 8px;
    border: 0;
    font-weight: 400;
    line-height: 18px;
}

3、字体

.font-weight {
  &-normal {
    font-weight: normal;
  }
  &-medium {
    font-weight: 500;
  }
  &-bold {
    font-weight: 700;
  }
}

4、圆点样式

.circle {
  display: inline-block;
  width: 16rpx;
  height: 16rpx;
  border-radius: 8rpx;
}
.icon-circle {
  &-success {
    background-color: #52c41a;
  }
  &-claim {
    background-color: #ffc53d;
  }
  &-waiting {
    background-color: #ffc53d;
  }
  &-failure {
    background-color: #fa5a48;
  }
}

5、光标显示手样式

.point {
  cursor: pointer;
}

6、一个div左右居中

.audit-content-title-fixed {
    max-width: 1392px!important;
    margin: 0 auto!important;
    height: 48px!important;
}

7、控制面板的高度和宽度

 .flow-ant-card {
   box-sizing: border-box;
   min-height: calc(100vh - 160px);
  }
 .right-width {
   width: calc(100% - 280px);
  }

8、美化滚动条

.scrollbar-mixin(@element-name) {
  .scrollbar-inner-mixin(@enabled) when(@enabled=true) {
    @{element-name} {
      // FireFox
      // scrollbar-color: @scrollbar-track-color @scrollbar-thumb-color;
      scrollbar-color: auto;
      scrollbar-width: thin;
      // Other
      &::-webkit-scrollbar {
        width: @scrollbar-height;
        height: @scrollbar-width;
        animation-delay: 0s;
        scrollbar-color: rgba(0, 0, 0, 0.12) #6e6e6e;
      }
      &::-webkit-scrollbar-track {
        box-shadow: inset 0 0 @scrollbar-width @scrollbar-track-color;
        &:hover {
          box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.12);
        }
      }
      &::-webkit-scrollbar-thumb {
        background-color: @scrollbar-thumb-color;
        -webkit-background-clip: content-box;
        background-clip: content-box;
        border: 3px solid transparent;
        border-radius: 8px;
        outline: 0;
        &:hover {
          border-color: #6e6e6e;
        }
      }
    }
  }
  .scrollbar-inner-mixin(@scrollbar-enabled);
}
.scrollbar-mixin(~'body');
.scrollbar-mixin(~'.scrollbar-y');
.scrollbar-mixin(~'.scrollbar-x');
.scrollbar-mixin(~'.ant-drawer-body');
.scrollbar-mixin(~'.ant-modal-body');
.scrollbar-mixin(~'.ant-table-body');
.scrollbar-mixin(~'.cdk-overlay-container .ant-table-filter-dropdown .ant-dropdown-menu');
.scrollbar-mixin(~'.ant-table');
.scrollbar-mixin(~'.ant-popover-inner-content');
.scrollbar-mixin(~'.ant-select-dropdown >div');

9、伪类选择器

详细地址：[CSS]伪类选择器_luckyboy!的博客-CSDN博客

例子：

.ellipsis-v:hover {
        background-color: #40a9ff33;
     }
:host ::ng-deep .ant-table-thead > tr > th:first-child,
:host ::ng-deep .ant-table-tbody > tr > td:first-child {
  padding-left: 24px !important;
}
:host ::ng-deep .ant-table-thead th.ant-table-column-sort::before {
  background-color: rgba(0, 0, 0, 0.06) !important;
}
:host ::ng-deep .notification .ant-table-thead > tr > th:not(:last-child)::before {
        display: none;
}

10、 覆盖组件样式

 html.js

<nz-select [(ngModel)]="mode" 
(ngModelChange)="changeMode($event)" 
nzDropdownClassName="date-style">
      <nz-option *ngFor="let item of modeOptions" 
[nzValue]="item.value" [nzLabel]="item.title"></nz-option>
    </nz-select>

component.js

 ::ng-deep .date-style {
    width: 120px !important;
  }

11、顶部navbar，底部tabbar,中间滑动展示内容，弹性布局实现

CSS
 .content{
	   display: flex;
       flex-direction: column;
       height: 300px;
	}
   .top{
	   height:40px;
	}
	.middle{
	   flex: 1;
       border: 1px solid red;
       overflow: auto;
	}
	.bottom{
	   height:40px;
	   background-color:pink
	}


HTML
<div class="content">
	<div class="middle"> content
        <p>121212</p>
        <p>121212</p>
        <p>121212</p>
        <p>121212</p>
        <p>121212</p>
        <p>121212</p>
        <p>121212</p>
        <p>121212</p>
        <p>121212</p>
        <p>121212</p>
    </div>
	<div class="bottom">底部</div>
</div>

12、css实现三角形

div{
	    width: 0;
        height: 0;
        border-top: 100px solid yellow; 
        border-right: 120px solid orangered;
        border-left: 100px solid blue;
        border-bottom: 100px solid pink;

	}