一、css的特殊性-優先級
csss的選擇是有優先級的，
a)、同類型，同級別的樣式后者先於前者
b)、ID > 類樣式 > 標簽 > *
c)、內聯>ID選擇器>偽類>屬性選擇器>類選擇器>標簽選擇器>通用選擇器(*)>繼承的樣式
d)、具體 > 泛化的，特殊性即css優先級
e)、近的 > 遠的 (內嵌樣式 > 內部樣式表 > 外聯樣式表)
內嵌樣式：內嵌在元素中，<span style="color:red">span</span>
內部樣式表：在頁面中的樣式，寫在<style></style>中的樣式
外聯樣式表：單獨存在一個css文件中，通過link引入或import導入的樣式
f)、!important 權重最高，比 inline style 還要高
二、計算優先級
important > 內嵌 > ID > 類 > 標簽 | 偽類 | 屬性選擇 > 偽對象 > 繼承 > 通配符
權重、特殊性計算法：CSS樣式選擇器分為4個等級，a、b、c、d
1.如果樣式是行內樣式（通過Style=“”定義），那么a=1，1,0,0,0
2.b為ID選擇器的總數 0,1,0,0
3.c為屬性選擇器，偽類選擇器和class類選擇器的數量。0,0,1,0
4.d為標簽、偽元素選擇器的數量 0,0,0,1
5.!important 權重最高，比 inline style 還要高
例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>優先級</title> <style type="text/css"> html body #div1 /*計算結果 0102*/ { background: red; } .cls1 #div1{ /*計算結果 0110*/ background: blue; } </style> </head> <body> <div class="cls1"> <div id="div1">div1 </div> <div id="div2">div2 </div> </div> </body> </html>
結果：結果可知 0110 比 0102 ，110比102大，所以它的優先級在在第二個定義的樣式里為藍色。
三、刻度
在CSS中刻度是用於設置元素尺寸的單位。特殊值0可以省略單位。例如：margin:0px可以寫成margin:0
一些屬性可能允許有負長度值，或者有一定的范圍限制。如果不支持負長度值，那應該變換到能夠被支持的最近的一個長度值。
長度單位包括包括：相對單位和絕對單位。
相對長度單位包括有： em, ex, ch, rem, vw, vh, vmax, vmin
絕對長度單位包括有： cm, mm, q, in, pt, pc, px
相對單位：
em長度單位是相對於當前對象內文本的字體尺寸，如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸。(相對父元素的字體大小倍數)
例子1：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>em與rem</title> <style type="text/css"> #div2{ background: blue; height: 5em; /*設置為5em*/ } </style> </head> <body> <div id="div1"> <div id="div2"> Hello em </div> </div> </body> </html>
結果：結果中的div2高度為80px，它是根據自身的父元素div1的font-size的高度設置的，div1沒有設置字體大小，會跟尋到上一個父標簽，
如果上一個父標簽也是沒有設置大小，會直到跟元素，跟元素的默認字體大小為16px，16乘以5 = 80
例子2：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>em與rem</title> <style type="text/css"> #div1 { font-size: 20px; } #div2 { color: white; background: blue; height: 5em; } </style> </head> <body> <div id="div1"> <div id="div2"> Hello em </div> </div> </body> </html>
結果：看下圖可知它的高度為100px 父元素的字體大小為20px， 20乘以5等於100
rem是CSS3新增的一個相對單位（root em，根em），相對於根元素(即html元素)font-size計算值的倍數,只相對於根元素的大小 (根元素字體大小默認為16px)
例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>em與rem</title> <style type="text/css"> #div1 { font-size: 20px; } #div2 { color: white; background: blue; height: 5rem; /*設置為5rem*/ } </style> </head> <body> <div id="div1"> <div id="div2"> Hello em </div> </div> </body> </html>
結果：看下圖可以知道rem是根據根元素的字體大小的。我們沒有設置根元素的字體大小所以為16px。16乘以5等於80
我們可以設置html標簽的字體大小，注意一點的是，一般的瀏覽器字體大小最小限制為12px
絕對單位：
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
計算長度單位：
-
- 需要注意的是，運算符前后都需要保留一個空格，例如：
width: calc(100% - 10px)； - 任何長度值都可以使用calc()函數進行計算；
- calc()函數支持 "+", "-", "*", "/" 運算；
- calc()函數使用標准的數學運算優先級規則；
- 需要注意的是，運算符前后都需要保留一個空格，例如：
例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #container{ background: yellow; width: calc(100% - 40px); margin: 0 auto; height: 400px; } </style> </head> <body> <div id="container"> </div> </body> </html>
結果：
