你所不知道的css

victor318x發表於2018-12-18
CSS

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

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

眾所周知，隨著css3的出現，css可以更加方便的書寫樣式層。今天我們就來整理一些你所不知道的css！

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

1、擷取多行文字，超出文字顯示...

想必大家擷取一行，都會書寫，針對塊級元素或行內塊元素，程式碼如下：

.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核心的）瀏覽器
}
複製程式碼

實際應用中如果有處理瀏覽器相容的需求，以上方法的相容方案也有很多。

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

2、利用 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。

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

啥也不說了，直接上程式碼：

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

::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; 
}
複製程式碼

4、改變placeholder值的樣式

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

5、盒子垂直水平居中

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

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

“說到對圖片進行處理，我們經常會想到PhotoShop這類的影象處理工具。作為前端開發者，我們經常會需要處理一些特效，例如根據不同的狀態，讓圖示顯示不同的顏色。或者是hover的時候，對圖片的對比度，陰影進行處理。”

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

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

相關文章