css整理之技巧黑魔法

css 看起來比較簡單，但是要想做的好也不是那麼容易，我們在平時開發中，主要用css 來美化我們的html結構，所有我覺得css 還是挺重要的，這裡記錄整理一些關於css 的技巧以及容易忘記的知識點。

在遇到css問題時，我一般從以下思路來思考

從元素本身的屬性出發，組合各種可能；

嘗試如果把相關屬性設定為負數是否可以解決，如邊框重疊問題；

如果第一步沒有成功，那麼在元素之外（或者之內）套一層元素，再次嘗試；

一般問題都能在第二步解決，如果還是沒有，那就要求助場外觀眾了（before和after）;

還不行的話，則看看有沒有不知道的某個新特性可以解決問題，最後不行就諮詢相關同事或者查閱相關css 規範吧；

css 從右邊往左開始解析，過多的巢狀會影響效能，最好不要超過三層。css 盡可能的復用**塊，減少重複** ,如scss 變數，@mixin 等

具體bem 這裡不介紹，可以自行查閱官網：最開始的時候看到bem 規範時比較排斥的，因為感覺命名有點奇怪，後面在嘗試使用之後確實要清晰很多，現在感覺優點主要有以下兩點

預覽 code pend

使用 text-align:justify; 要多行才生效，如果是當行記得用偽元素

預覽 code pen

這個偽類首先找到所有當前元素的兄弟元素，然後按照位置先後順序從1開始排序，選擇的結果為css偽類:nth-child括號中表示式（an+b）匹配到的元素集合。

其中n是乙個變數，可以是乙個數字，乙個關鍵字，或者乙個公式。n從0開始取值（但是匹配的元素的集合始終是從1開始），每次n+1後代入計算，最終得出乙個位置的陣列，比如：p:nth-child(2n+1)

n=0時 2n+1=1 // 匹配這個兄弟元素集合中的，第1個元素以此類推計算

n=1時 2n+1=3

n=2時 2n+1=5

所以就等價於p:nth-child(1)和p:nth-child(3)和p:nth-child(5)...取得是乙個集合，也就是位置是1、3、5...

其他的也可以這樣推導出來

備註：匹配的元素集合排序從1開始，但是當表示式中有n 時，這個n 是從0 開始的

（n=0時，2n+0=0，第0個元素不存在，因為是從1開始排序

）預覽 code pen

:root偽類

:root偽類匹配文件樹的根元素。應用到html，:root即表示為元素，除了優先順序更高外，相當於html標籤選擇器。

:root

:empty偽類:empty偽類，代表沒有子元素的元素。這裡說的子元素，只計算元素結點及文字（包括空格），注釋、執行指令不考慮在內。

:not偽類

css否定偽類，:not(x)，可以選擇除某個元素之外的所有元素。x不能包含另外乙個否定選擇器。

div:not(.box)div:not(:nth-of-type(2))

:target偽類url 帶有後面跟有錨名稱 #，指向文件內某個具體的元素。這個被鏈結的元素就是目標元素(target element)。 :target 選擇器可用於選取當前活動的目標元素。

預覽 code pen

box-shadow: offset-x offset-y blur spread color inset;

動畫loading code pen 預覽

如上所示邊框變粗是因為，兩個相鄰的盒子的邊框，所以看起來變大了。根據問題的原因，我們只需要把其中乙個盒子的邊框讓他跟另外乙個邊框的位置在乙個地方即可；

只要給其中乙個盒子的邊框外邊框設為乙個負數，值等於邊框的值；

ul li

codepen 九宮格完整**

currentcolor 關鍵字代表原始的 color 屬性的計算值。它允許讓繼承自屬性或子元素的屬性顏色屬性以預設值不再繼承。這是mdn 對這個關鍵字的描述，

其實說的直白點就是這個關鍵字是對當前元素顏色的引用，當前顏色可以是繼承而來的顏色哦。如下所示

currentcolor 關鍵字

css整理之 技巧 黑魔法