你所不知道的css

做爲一名長期潛水的前端er、切圖仔，在木易楊老師的鼓勵下，開始嘗試去寫一寫文章，來整理、分享本身的一些學習所得，與掘金的大佬們共同進步。

剛開始寫文章，表達欠妥，還請多多指正，若是以爲本文不錯，歡迎點贊、評論、轉發，您的支持就是我堅持的最大動力。

---

衆所周知，隨着css3的出現，css能夠更加方便的書寫樣式層。今天咱們就來整理一些你所不知道的css！

注：IE已經被微軟爸爸所拋棄，果斷放棄，不作考慮。

一、截取多行文本，超出文本顯示...

想必你們截取一行，都會書寫，針對塊級元素或行內塊元素，代碼以下：

.textOneLine{
    overflow:hidden;  // 超出的長度的內容截掉，不產生滾動條
    text-overflow: ellipsis;  // 該屬性有三個值clip 、ellipsis 、string，表明怎麼表示被截掉的文本
    white-space: nowrap; // 文本不會換行
}
複製代碼

若是需求是截取多行文本呢，又將怎麼書寫代碼呢？ 舉個🌰，截取3行：

.textMoreLine{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;  //屬性規定框的子元素應該被水平或垂直排列
    -webkit-line-clamp: 3;  //這個屬性適合WebKit瀏覽器或移動端（絕大部分是WebKit內核的）瀏覽器
}
複製代碼

實際應用中若是有處理瀏覽器兼容的需求，以上方法的兼容方案也有不少。

比較靠譜簡單的作法就是設置相對定位的容器高度，用包含省略號...的元素（可藉助僞元素）模擬實現。這裏提到僞元素，我認爲僞元素是個好東西，有時候能夠很好的幫助咱們。

二、利用 javascript 獲取並修改 ::before 和 ::after 的值

使用 javascript 操做，固然不能繞過 jQuery（後端開發前端的最愛，每每JQ一把梭！），而後遇到操做僞元素這個問題，他也只能完全認栽了！爲何呢？

要知道JQ選擇器是用來操做DOM的，都是基於DOM元素，而僞元素自己並非DOM元素，這個 ‘僞’ 字就很妙了。那麼咱們接下來，來看看如何使用js來操做僞元素呢？

獲取僞元素的屬性值

剛纔說了，僞元素不是DOM，那麼任何基於選取DOM的樣式而操做僞元素是行不通的，可是js爲咱們提供了一個直接獲取CSS屬性的方法getComputedStyle(),而後配合getPropertyValue()獲取對應屬性。

window.getComputedStyle(element, [pseudoElt]) 該方法MDN文檔

getPropertyValue()

咱們使用該方法來獲取微元素的屬性值,代碼以下：

//獲取before僞元素的字號大小
var div=document.querySelector('div');
var fontSize=window.getComputedStyle(div,'::before').getPropertyValue('font-size');
複製代碼

更改僞元素的屬性值

getComputedStyle()只能獲取不能更改，經過js來更改僞元素有一下幾種方法：

• js更改data-*屬性值來更改僞元素的content值 （推薦）；

  實現原理：W3C 給僞元素的content屬性值提供了一個attr()方法來獲取。attr()支持多個連寫，並且attr()內能夠是DOM元素的任意屬性。

  代碼實現以下：

  <div class="wrap" data-text="我是僞元素" data-class="new-wrap"></div>
  複製代碼

  .wrap::before{
      content: '個人類是' attr(class) '想要變成' attr(data-class);
  }
  複製代碼

• 建立多個class，經過切換class來達到改變樣式的目的；

• 利用內部css樣式的高優先級來覆蓋外部css。

三、改變選中內容顏色、禁止選中內容

啥也不說了，直接上代碼：

改變選中內容顏色(只能使用如下四個屬性)：

::selection{
    color:red;
    background:blue;
    cursor:auto;
    outline:none;
}
複製代碼

禁止選中內容：

.disabled-select {  
    -webkit-touch-callout: none;  
    -webkit-user-select: none;  
    -khtml-user-select: none;  
    -moz-user-select: none;  
    -ms-user-select: none;  
    user-select: none;  
}  
複製代碼

css禁用鼠標點擊事件:

.disabled { 
    pointer-events:none; 
}
複製代碼

四、改變placeholder值的樣式

input::-webkit-input-placeholder{
    text-align: right;
    //... 其餘樣式代碼
}
複製代碼

五、盒子垂直水平居中

推薦一篇文章，總結的很到位，直通車

六、利用CSS改變圖片顏色的多種方法

「說到對圖片進行處理，咱們常常會想到PhotoShop這類的圖像處理工具。做爲前端開發者，咱們常常會須要處理一些特效，例如根據不一樣的狀態，讓圖標顯示不一樣的顏色。或者是hover的時候，對圖片的對比度，陰影進行處理。」

這個內容也推薦一篇文章，總結很到位，不作更多介紹。直通車

一點點內容都寫了快兩個小時，果真會寫文章都是大神！若是對您有用，你也喜歡請點贊，若是不喜歡，甚至有錯誤內容（但願能夠指出來，以便糾正），還請見諒，多多指正，先這樣吧，明天繼續~ 🙏🙏🙏