css中頗有用的屬性

　　有些css屬性很實用，但不經常使用也就被忘記。

　　這裏紀錄了本身在項目中用過的一些。

　　

html,body{
  -webkit-tap-highlight-color:transparent;
}

這個的用途是：手機端用a標籤或是表單的地方，點擊時候有閃爍，用戶體驗很很差。加上它就能夠啦~

 

html,body{
 user-select：none;
}

user-select有4個值，
none：文本不能被選擇
all：全部內容做爲一個總體時能夠被選擇
text：能夠先擇文本
element：能夠選擇文本，但選擇範圍受元素邊界的約束

input:-webkit-autofill {
  -webkit-box-shadow : 0 0 0 100px white inset ;
}

去掉chorme瀏覽器input表單保存帳號密碼後默認填充的黃色背景。

 

 

div{
        word-break: keep-all;
        white-space:nowrap;
    }

規定自動換行的處理方法，在table中可能用得多一點。

word-break: normal | break-all | keep-all;
分別是使用瀏覽器默認換行規則，容許在單詞內換行，只能在半角空格或連字符處換行。

white-space：normal | pre | nowrap | pre-wrap | pre-line | inherit
分別是 默認。空白會被瀏覽器忽略。 | 空白會被瀏覽器保留 | 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標籤爲止 | 保留空白符序列，可是正常地進行換行。 | 合併空白符序列，可是保留換行符。 | 規定應該從父元素繼承 white-space 屬性的值。

沒有添加前

添加這兩個屬性後

 

resize : none | both | horizontal | vertical:

分別是：沒法調整大小，可調整寬度和高度，可調整寬度，可調整高度

使用後可以讓div想textarea那樣被拉大，縮小。不過通常都不會用到。

 

object-fit CSS 屬性指定替換元素的內容應該如何適應到其使用的高度和寬度肯定的框。

適用於替換元素，如圖片。

 object-fit: fill / contain / cover / none / scale-down

對比使用後效果，分別用固定大小div，寬高不定div作了測試，用到了橫圖和長圖，cover真好用，不再用擔憂圖片過長太高後顯示不正常了！

 

 

 

 

 

暫時只遇到了這些，項目中有新發現再來補充。。。