important是CSS的一個規則，用于提高指定CSS樣式規則的應用優先權；它被添加到CSS值的末尾以賦予它更多權重。

在CSS中，樣式規則以級聯方式應用于元素。下面這個列表中越靠前的權重越小：

●瀏覽器樣式：是Web瀏覽器聲明的默認樣式。

　　●用戶聲明的樣式：是用戶使用瀏覽器選項設置或通過開發人員調試工具修改的自定義樣式。

　　●開發中聲明的樣式：是網站開發人員在CSS樣式表中聲明的樣式。

　　●具有!important規則的開發者聲明樣式。

　　●具有!important規則的用戶樣式。

義及語法

!important，作用是提高指定樣式規則的應用優先權（優先級）。語法格式{ cssRule !important }，即寫在定義的最后面，例如：box{color:red !important;}。在 CSS 中，通過對某一樣式聲明! important ，可以更改默認的 CSS 樣式優先級規則， 使該條樣式屬性聲明具有最高優先級。

瀏覽器識別

ie7 及 ie7+,firefox,chrome 等瀏覽器下，已經可以識別 !important 屬性， 但是 IE6.0IE6 及更早瀏覽器下仍然不能完全識別。important 的樣式屬性和覆蓋它的樣式屬性單獨使用時(不在一個{}里)，IE 6.0 認為! important 優先級較高，否則當含! important 的樣式屬性被同一個{}里的樣式覆蓋時，IE 6.0 認為! important 較低。

海無涯，不要沉浸在知識的海洋里，迷失自己。

要知道自己想要什么，抓住重點，不忘初心。

這個世界上百分之20的人，掌握著百分之80的財富。

接下來一系列教程，就帶領大家抓住重點，一起做那百分之20的人。

往期知識點回顧：

重點屬性-display

重點屬性-position

重點屬性-float

重點屬性-flex

重點屬性-overflow

重點屬性-background

隨著響應式設計模型的誕生:

Web網站發生了翻天腹地的改革浪潮，尤其隨著webApp的方興未艾，Media(媒體查詢器)對布局的自適應，起到了很重要的作用。我們今天就站在webapp的角度，總結一下響應式設計的核心CSS技術Media(媒體查詢器)的用法。

設置Meta標簽

首先我們在使用

Media的時候需要先設置下面這段代碼，來兼容移動設備的展示效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
復制代碼

這段代碼的幾個參數解釋：

width = device-width：寬度等于當前設備的寬度

initial-scale：初始的縮放比例（默認設置為1.0）

minimum-scale：允許用戶縮放到的最小比例（默認設置為1.0）

maximum-scale：允許用戶縮放到的最大比例（默認設置為1.0）

user-scalable：用戶是否可以手動縮放（默認設置為no，因為我們不希望用戶放大縮小頁面）

進入CSS3 Media寫法

@media screen and (max-width: 960px){ body{ background: #000; } }
復制代碼

Media所有參數匯總

以上就是我們最常需要用到的媒體查詢器的三個特性，大于，等于，小于的寫法。媒體查詢器的全部功能肯定不止這三個功能，下面是我總結的它的一些參數用法解釋：

width:瀏覽器可視寬度。

height:瀏覽器可視高度。

device-width:設備屏幕的寬度。

device-height:設備屏幕的高度。

orientation:檢測設備目前處于橫向還是縱向狀態。

aspect-ratio:檢測瀏覽器可視寬度和高度的比例。(例如：aspect-ratio:16/9)

device-aspect-ratio:檢測設備的寬度和高度的比例。

color:檢測顏色的位數。（例如：min-color:32就會檢測設備是否擁有32位顏色）

color-index:檢查設備顏色索引表中的顏色，他的值不能是負數。

monochrome:檢測單色楨緩沖區域中的每個像素的位數。（這個太高級，估計咱很少會用的到）

resolution:檢測屏幕或打印機的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。

grid：檢測輸出的設備是網格的還是位圖設備。

實踐代碼，應用場景

布局自適應和rem配合使用

html 
{font-size : 20px;
}
@media only screen and (min-width: 401px)
{html {font-size: 25px !important;}}
@media only screen and (min-width: 428px)
{html {font-size: 26.75px !important;}}
@media only screen and (min-width: 481px)
{html {font-size: 30px !important;}}
@media only screen and (min-width: 569px)
{html {font-size: 35px !important;}}
@media only screen and (min-width: 641px)
{html {font-size: 40px !important;}}
復制代碼

面試題：

談談對rem的認識，rem和em有什么區別？

rem（font size of the root element）是指相對于根元素的字體大小的單位。簡單的說它就是一個相對單位。看到rem大家一定會想起em單位，em（font size of the element）是指相對于父元素的字體大小的單位。它們之間其實很相似，只不過一個計算的規則是依賴根元素一個是依賴父元素計算。