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 * /
- 當有重復的選擇器會累加計算 如 LI.red.level / * a = 0 b = 2 c = 1->特異性= 21
- !important > 行內 > a > b > c
- 如果a、b、c 相同權重，后面的覆寫全面的樣式
不太嚴謹的理解
根據最新的標準這個是錯誤的
css繼承
有些樣式可以直接繼承父元素的樣式，不能繼承的默認是初始值，常見可繼承屬性如下
1、字體系列屬性
font-family：字體系列
font-weight：字體的粗細
font-size：字體的大小
font-style：字體的風格
2、文本系列屬性
text-indent：文本縮進
text-align：文本水平對齊
line-height：行高
word-spacing：單詞之間的間距
letter-spacing：中文或者字母之間的間距
text-transform：控制文本大小寫（就是uppercase、lowercase、capitalize這三個）
color：文本顏色
3、元素可見性
visibility：控制元素顯示隱藏
4、串列布局屬性
list-style：串列風格，包括list-style-type、list-style-image等
5、游標屬性
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 變數的優點在于:
- CSS 變數的動態性，能在頁面運行時更改，而傳統前處理器變數編譯后無法更改
- CSS 變數能夠繼承，能夠組合使用，具有作用域
- 配合 Javascript 使用，可以方便的從 JS 中讀/寫
CSS 自定義屬性可以讓 JavaScript 與 CSS 通信了，
css 重繪、回流/重排
重繪
當我們對 DOM 的修改導致了樣式的變化、卻并未影響其幾何屬性（比如修改了顏色、背景色等），瀏覽器不需重新計算元素的幾何屬性、直接為該元素繪制新的樣式，這個程序叫做重繪，
回流
當我們對 DOM 的修改引發了 DOM 幾何尺寸、結構的變化（比如修改元素的寬、高或隱藏元素等），瀏覽器需要重新計算元素的幾何屬性（其他元素的幾何屬性和位置也會因此受到影響）重新生成渲染樹，然后再將計算的結果繪制出來，這個程序就是回流（也叫重排）
回流一定會產生重繪，重繪不一定會回流，比如只有顏色改變就只會發生重繪而不會引起回流，每個頁面至少經歷一次回流（在頁面第一次加載）
哪些實際操作會導致回流與重繪
- 添加、洗掉元素 (回流+重繪)
- 隱藏元素，display:none(回流+重繪)，visibility:hidden (只重繪，不回流)
- 改變元素位置，如改變top、left或移動元素到另外1個父元素中 (重繪+回流)
- 改變瀏覽器大小 (回流+重繪)
- 改變瀏覽器的字體大小 (回流+重繪)
- 改變元素的padding、border、margin (回流+重繪)
- 改變瀏覽器的字體顏色（只重繪，不回流）
- 改變元素的背景顏色（只重繪，不回流）
- 改變元素尺寸 如邊距、填充、邊框、寬度和高度 (回流+重繪)
- 頁面開始渲染 (回流+重繪)
規避回流與重繪
- 避免在回圈中一條一條的修改樣式
- 最好使用類名去切換樣式
- 對于復雜的dom操作，可以考慮將DOM結點設為none 在操作，操作完成之后在顯示出來
css 常用單位
- px：相對單位，頁面按精確像素展示
- em：相對單位，基準點為父節點字體的大小，如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值，
- rem：相對單位，相對根節點html font-size字體大小來計算
- vw：viewpoint width，視窗寬度，1vw等于視窗寬度的1%
- vh：viewpoint height，視窗高度，1vh等于視窗高度的1%
- %：百分比，相對父元素的尺寸來計算
- vmin：vw和vh中較小的那個
- vmax：vw和vh中較大的那個
做移動頁面開發時，如果使用 vw、wh 設定字體大小（比如 5vw），在豎屏和橫屏狀態下顯示的字體大小是不一樣的，
由于 vmin 和 vmax 是當前較小的 vw 和 vh 和當前較大的 vw 和 vh，這里就可以用到 vmin 和 vmax，使得文字大小在橫豎屏下保持一致，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/261680.html
標籤：其他
上一篇：JavaScript基礎
下一篇：教你玩轉CSS 偽元素