那些你总是记不住但又总是要用的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:focus {     background-color: red;}

取消input的边框

border: none;outline: none;

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年我花了一个月整理了一份最适合2020年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

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

/*css主要部分的样式*//*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/::-webkit-scrollbar {    width: 10px; /*对垂直流动条有效*/    height: 10px; /*对水平流动条有效*/}/*定义滚动条的轨道颜色、内阴影及圆角*/::-webkit-scrollbar-track{    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);    background-color: rosybrown;    border-radius: 3px;}/*定义滑块颜色、内阴影及圆角*/::-webkit-scrollbar-thumb{     border-radius: 7px;    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);    background-color: #E8E8E8;}/*定义两端按钮的样式*/::-webkit-scrollbar-button {    background-color:cyan;}/*定义右下角汇合处的样式*/::-webkit-scrollbar-corner {    background:khaki;}

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

单行（一定要有宽度）

width:200rpx;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;

四、控制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;}

七、表格边框合并

table,tr,td{border: 1px solid #333;}table{  border-collapse: collapse;}

原文链接：
https://juejin.im/post/6869659680496041991