css样式整理

css样式的积累

1：清除浮动
2：设置滚动条样式
3：一行上显示，超出省略号（两行上显示，超出省略号）

清除浮动

	@mixin clearfix {
		&::after {
			display: block;
			clear: both;
			content: "";
			font-size: 0;
			visibility: hidden;
		}
	}
	// 另外一种清除浮动（overflow: hidden;）

设置滚动条样式

	@mixin scroller($backgroundColor: #e6e9ea, $width: 2px) {
		&::-webkit-scrollbar {
			width: $width;
	    	background-color: lighten($backgroundColor, 80%);
		}
		&::-webkit-scrollbar-thumb {
			height: 4px;
		    border-radius: 2px;
		    background-color: $backgroundColor;
		}
	}
	// 通过传值来设置滚动条的样式（里面存在默认值可以直接使用）

一行上显示，超出省略号（两行上显示，超出省略号）

	// 一行上显示
	white-space: nowrap;
    overflow: hidden;
   	text-overflow: ellipsis;
   	
   	// 两行上显示
   	text-overflow: -o-ellipsis-lastline;
  	overflow: hidden;
  	text-overflow: ellipsis;
  	display: -webkit-box;
  	-webkit-line-clamp: 2;
  	line-clamp: 2;
  	-webkit-box-orient: vertical;