css整理之-----------基本知識

css 解析

　　css 從右邊往左開始解析，過多的嵌套會影響性能，最好不要超過三層。css 儘量的複用代碼塊，減小重複代碼

css 優先級

　　css Specificity中文通常譯爲css優先級、css權重。相比權重，優先級更好理解。簡單理解就是一個DOM元素有多個css樣式設置，優先級高的那個樣式被應用，其餘css設置不生效的問題，這是由於在其餘地方定義了一個更高的優先級樣式，從而致使其餘地方設置的樣式不生效。

根據w3c標準 這個優先級是根據計算選擇者的特性來決定，能夠理解爲根據選擇器的類型來決定，他們的類型分爲a、b、c，他們的數目計算規則以下，在比較權重時, 按照 a => b => c 的順序進行比較。

計算規則

• 計算選擇器中ID選擇器的數量（= a）
• 計算選擇器中的類選擇器，屬性選擇器和僞類的數量（= b）
• 計算選擇器中類型選擇器和僞元素的數量（= c）
• 忽略通用選擇器、not()僞類
• 給元素添加的內聯樣式 (例如，style="font-weight:bold") 總會覆蓋外部樣式表的任何樣式 ，所以可看做是具備最高的優先級。
• !important 例外規則，當在一個樣式聲明中使用一個 !important 規則時，此聲明將覆蓋任何其餘聲明

1 * / * a = 0 b = 0 c = 0->特異性= 0 * /
2 LI / * a = 0 b = 0 c = 1->特異性= 1 * /
3 UL LI / * a = 0 b = 0 c = 2->特異性= 2 * /
4 UL OL + LI / * a = 0 b = 0 c = 3->特異性= 3 * /
5 H1 + * [REL = up] / * a = 0 b = 1 c = 1->特異性= 11 * /
6 UL OL LI.red / * a = 0 b = 1 c = 3->特異性= 13 * /
7 LI.red.level / * a = 0 b = 2 c = 1->特異性= 21 * /
8 ＃x34y / * a = 1 b = 0 c = 0->特異性= 100 * /
9 ＃s12：not（FOO）/ * a = 1 b = 0 c = 1->特異性= 101 * /

1. 當有重複的選擇器會累加計算 如 LI.red.level / * a = 0 b = 2 c = 1->特異性= 21
2. !important > 行內 > a > b > c
3. 若是a、b、c 相同權重，後面的覆蓋全面的樣式

不太嚴謹的理解

根據最新的標準這個是錯誤的

css繼承

　　有些樣式能夠直接繼承父元素的樣式，不能繼承的默認是初始值。常見可繼承屬性以下

一、字體系列屬性

　　font-family：字體系列

　　font-weight：字體的粗細

　　font-size：字體的大小

　　font-style：字體的風格

二、文本系列屬性

　　text-indent：文本縮進

　　text-align：文本水平對齊

　　line-height：行高

　　word-spacing：單詞之間的間距

　　letter-spacing：中文或者字母之間的間距

　　text-transform：控制文本大小寫（就是uppercase、lowercase、capitalize這三個）

　　color：文本顏色

三、元素可見性

　　visibility：控制元素顯示隱藏

四、列表佈局屬性

　　list-style：列表風格，包括list-style-type、list-style-image等

五、光標屬性

　　cursor：光標顯示爲什麼種形態

css 自定義屬性

　　css 能夠自定義屬性（一般叫css 變量），好比： --main-color: black; 由var() 函數用於讀取值

1 color: var(--main-color);

• 聲明一個自定義屬性，屬性名須要以兩個減號（--）開始，屬性值能夠是任何有效的CSS值
• 聲明的變量存在做用域，屬性僅在匹配當前選擇器及其子孫能夠訪問，因此通常全景變量在跟僞類 :root {} 中聲明，局部變量在某個特定的選擇器聲明
• 自定義屬性能夠繼承，在子、孫元素中能夠直接使用
• var()函數還可使用第二個參數，表示變量的默認值，color: var(--xxx, #7F583F)
• 可使用js來操做這個變量

 1 // 獲取任意 Dom 節點上的 CSS 變量
 2 getComputedStyle(element).getPropertyValue("--my-var");
 3 // 修改一個 Dom 節點上的 CSS 變量
 4 element.style.setProperty("--my-var", jsVar + 4);
 5 
 6 //讀取全局
 7 let root = getComputedStyle(document.documentElement);
 8 let color = root.getPropertyValue('--color').trim();
 9 console.log(color);
10 
11 //改變
12 document.documentElement.style.setProperty('--color', 'yellow');
13 let color = root.getPropertyValue('--color').trim();
14 console.log(color); 
15 //刪除
16 document.documentElement.style.removeProperty('--color');
17 let color = root.getPropertyValue('--color').trim();
18 console.log(color);

若是變量值帶有單位，就不能寫成字符串

1 :root {
2   --bg1: red;
3   --mt1: 20; // 數值須要與calc*()函數拼接
4   // --ml1: "20px"; // 無效，帶有單位不要寫成字符串
5   --ml1: 20px; // 帶有單位時不要寫成字符串 
6 }

若是變量值是數值，不能與數值單位直接連用

1 .wrap2 {
2   // 無效
3   // margin-top: var(--mt1)
4   margin-top: calc(var(--mt1) * 1px);
5   margin-left: var(--ml1);
6 }

codePen

與傳統 LESS 、SASS 等預處理器變量比較

相較於傳統的 LESS 、SASS 等預處理器變量，CSS 變量的優勢在於:

1. CSS 變量的動態性，能在頁面運行時更改，而傳統預處理器變量編譯後沒法更改
2. CSS 變量可以繼承，可以組合使用，具備做用域
3. 配合 Javascript 使用，能夠方便的從 JS 中讀/寫

CSS 自定義屬性可讓 JavaScript 與 CSS 通訊了。

css 重繪、迴流/重排

重繪

　　當咱們對 DOM 的修改致使了樣式的變化、卻並未影響其幾何屬性（好比修改了顏色、背景色等），瀏覽器不需從新計算元素的幾何屬性、直接爲該元素繪製新的樣式，這個過程叫作重繪。  

迴流

　　當咱們對 DOM 的修改引起了 DOM 幾何尺寸、結構的變化（好比修改元素的寬、高或隱藏元素等），瀏覽器須要從新計算元素的幾何屬性（其餘元素的幾何屬性和位置也會所以受到影響）從新生成渲染樹，而後再將計算的結果繪製出來，這個過程就是迴流（也叫重排）

 

迴流必定會產生重繪，重繪不必定會迴流，好比只有顏色改變就只會發生重繪而不會引發迴流，每一個頁面至少經歷一次迴流（在頁面第一次加載）

哪些實際操做會致使迴流與重繪

1. 添加、刪除元素 (迴流+重繪)   
2. 隱藏元素，display:none(迴流+重繪)，visibility:hidden (只重繪，不迴流)  
3. 改變元素位置，如改變top、left或移動元素到另外1個父元素中 (重繪+迴流)   
4. 改變瀏覽器大小 (迴流+重繪)   
5. 改變瀏覽器的字體大小 (迴流+重繪)   
6. 改變元素的padding、border、margin (迴流+重繪)   
7. 改變瀏覽器的字體顏色（只重繪，不迴流）   
8. 改變元素的背景顏色（只重繪，不迴流）
9. 改變元素尺寸 如邊距、填充、邊框、寬度和高度 (迴流+重繪) 
10. 頁面開始渲染 (迴流+重繪)

規避迴流與重繪

1. 避免在循環中一條一條的修改樣式
2. 最好使用類名去切換樣式
3. 對於複雜的dom操做，能夠考慮將DOM結點設爲none 在操做，操做完成以後在顯示出來

css 經常使用單位

1. px：相對單位，頁面按精確像素展現
2. em：相對單位，基準點爲父節點字體的大小，若是自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。
3. rem：相對單位，相對根節點html  font-size字體大小來計算
4. vw：viewpoint width，視窗寬度，1vw等於視窗寬度的1%
5. vh：viewpoint height，視窗高度，1vh等於視窗高度的1%
6. %：百分比，相對父元素的尺寸來計算
7. vmin：vw和vh中較小的那個
8. vmax：vw和vh中較大的那個

作移動頁面開發時，若是使用 vw、wh 設置字體大小（好比 5vw），在豎屏和橫屏狀態下顯示的字體大小是不同的。

因爲 vmin 和 vmax 是當前較小的 vw 和 vh 和當前較大的 vw 和 vh。這裏就能夠用到 vmin 和 vmax。使得文字大小在橫豎屏下保持一致。