总记不住但又经常要用到的css

有没有经常遇到一些样式每次写都要用百度呢？我收集了一些我平时经常要用到的但又总是记不住的样式。有错误的地方欢迎指正

一、设置Input的placeholder的字体样式

input::-webkit-input-placeholder {    /* Chrome/Opera/Safari */
    color: red;
}
input::-moz-placeholder { /* Firefox 19+ */  
    color: red;
}
input:-ms-input-placeholder { /* IE 10+ */
    color: red;
}
input:-moz-placeholder { /* Firefox 18- */
    color: red;
}

 浏览器记住密码input背景样式

 input:-webkit-autofill{
      -webkit-text-fill-color:#909AB7 !important;
      background-color: transparent;
      background-image: none;
      transition: background-color 50000s ease-in-out 0s;
  }

设置input聚焦时的样式

input:focus {   
  background-color: red;
}

取消input聚焦样式

outline: none;

二、隐藏滚动条或更改滚动条样式

/*css主要部分的样式*//*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    width: 10px; /*对垂直流动条有效*/
    height: 1px; /*对水平流动条有效*/
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background:#ededed;
    border-radius: 3px;
}

/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb{ 
    border-radius: 7px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background:#bbbbbb;
}


/*可以不写*/
/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
    background-color:cyan;
}

/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
    background:khaki;
}

三、文字超出隐藏并显示省略号

单行（一定要有宽度）

width:200rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

 单行 

word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

多行

word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;

 多行省略号，上面的在本地代码可以显示，线上的未出现省略号，替换为以下代码

主要起作用 -webkit-box-orient: vertical

display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;
 word-wrap: normal;
 word-break: break-word;

 只对英文起作用，以字母作为换行依据

word-break:break-all

  只对英文起作用，以单词作为换行依据 

word-wrap:break-word

  只对中文起作用，强制换行

white-space:pre-wrap

 强制不换行，都起作用

white-space:nowrap

四、控制div内的元素自动换行

word-wrap: break-word;
word-break:break-all;

五、纯css画三角形

#demo {
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent red transparent;
}

六、绝对定位元素居中（水平和垂直方向）

#demo {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: green;
}

使用flex 垂直居中

#demo{
    display: flex;
    align-items: center;
    justify-content: center;
 }

七、内容垂直居中

.#demo {
    min-height: 6.5em;
    display: table-cell;
    vertical-align: middle;
}

八、@font-face引用

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); 
    src: url('webfont.eot?#iefix') 
    url('webfont.woff') format('woff'), 
    url('webfont.ttf')  format('truetype'),
    url('webfont.svg#svgFontName') format('svg');
}
body {
    font-family: 'MyWebFont', Arial, sans-serif;
}