常用代码片段css

一、禁止选中文字

-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;

二、超出文本展示省略号

单行
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
多行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

三、样式重置

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
p { font-size: 1.2em; line-height: 1.0em; color: #333; }

四、隐藏浏览器滚动条

.warp{
  width: 500px;
  overflow: hidden;
}
.warp>div{
  width: 104%;
  height: 500px;
  overflow-y: scroll;
}

五、伪元素清除浮动

.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

六、自动填充剩余空间

flex: 1;

七、包裹过长文本

white-space: pre-line;
word-wrap: break-word;

八、省略号动画

.loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    animation: ellipsis 2s infinite;
    content: "\2026";
}

@keyframes ellipsis {
    from {
        width: 2px;
    }

    to {
        width: 15px;
    }
}

九、表格斑马线

tbody tr:nth-child(odd) {    
  background-color: #ccc;
}

十、vue深层选择器

常规用法
/deep/
兼容差
>>>
scss中的用法
::v-deep

十一、隐藏滚动条

class{
  -ms-overflow-style: none; /* IE 10+ */
  scrollbar-width: none; /* Firefox */
}
.class::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}