那些常用却又常忘记的css样式

2021-10-08 09:53:00

1. input中的placeholder

首先我们定义一个input：

    <input type="text" placeholder="你点我啊！" />

12

当我们使用输入框input中的placeholder时经常需要调里面字体的大小和其他样式，（由于兼容性问题，对应浏览器不同，所以要针对浏览器用不同的代码。）这时就需要用到如下代码：

input::-webkit-input-placeholder {
        /*谷歌*/
        color: red;
      }
      input:-ms-input-placeholder {
        /* IE 10+ */
        color: black;
      }
      input::-moz-placeholder {
        /*火狐 19+ */
        color: pink;
      }
      input:-moz-placeholder {
        /*火狐 18-*/
        color: yellow;
      }
12345678910111213141516

（简单用谷歌来实现一下，效果如下图：）

2.单行多行文本加省略号

在做一些纯css页面时偶尔要用到文本加省略号，特别是多行文本居中，很容易忘记里面一些代码

/* 单行文本加省略号 */
      .text {
        /* 注意定宽 */
        width: 300px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: 8px;
      }
      /*多行文本加省略号  */
      .texts {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
      }

123456789101112131415161718

3.做一个三角形

做一些下拉框或者列表的时候做一个小三角就会用到了，不用设置宽高，利用边框宽度，只需要留下一个边框的颜色，其他边框设置成transparent即可

/* css做一个三角形 */
      .trangle {
        width: 0;
        height: 0;
        border: 20px solid red;
        border-color: transparent transparent red transparent; 
      }
1234567

4.绝对定位后使其居中

注意要使用transform: translate(-50%, -50%); 来让它以中心点平移，当然你也可以使用margin来调节。
另外其他方法居中也有很多种，高等与行高来垂直居中等其他方法（由于常用就不列举了）

.center {
        width: 200px;
        height: 200px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: pink;
        text-align: center;
      }
12345678910

5.去除重复边框

首先要在大表格（最外面表）中写下面的代码：

table {
        border-collapse: collapse;
      }
123

然后再设置tr。th。td的边框就没问题了。