那些常用卻又常忘記的css樣式

1. input中的placeholder

首先我們定義一個input：

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

當我們使用輸入框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;
      }

（簡單用谷歌來實現一下，效果如下圖：）

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;
      }

3.做一個三角形

做一些下拉框或者列表的時候 做一個小三角就會用到了，不用設定寬高，利用邊框寬度，只需要留下一個邊框的顏色，其他邊框設定成transparent即可

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

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;
      }

5.去除重複邊框

首先要在大表格（最外面表）中寫下面的程式碼：

table {
        border-collapse: collapse;
      }

然後再設定tr。th。td的邊框就沒問題了。