1、css的特殊性-優先級

　　csss的選擇是有優先級的，css

　　a)、同類型，同級別的樣式後者先於前者html

　　b)、ID > 類樣式 > 標籤 > *算法

　　c)、內聯>ID選擇器>僞類>屬性選擇器>類選擇器>標籤選擇器>通用選擇器(*)>繼承的樣式瀏覽器

　　d)、具體 > 泛化的，特殊性即css優先級函數

　　e)、近的 > 遠的 (內嵌樣式 > 內部樣式表 > 外聯樣式表)字體

　　內嵌樣式：內嵌在元素中，<span style="color:red">span</span>spa

　　內部樣式表：在頁面中的樣式，寫在<style></style>中的樣式code

　　外聯樣式表：單獨存在一個css文件中，經過link引入或import導入的樣式htm

　　f)、!important 權重最高，比 inline style 還要高對象

2、計算優先級

　　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大，因此它的優先級在在第二個定義的樣式裏爲藍色。

3、刻度

　　在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>

　　結果：

CSS（二）樣式優先級別和css的單位刻度

1、css的特殊性-優先級

2、計算優先級

3、刻度

相對單位：

絕對單位：

計算長度單位：

　　相對單位：

　　絕對單位：

　　計算長度單位：