CSS如何使用！important規(guī)則？

important是CSS的一個(gè)規(guī)則，用于提高指定CSS樣式規(guī)則的應(yīng)用優(yōu)先權(quán)；它被添加到CSS值的末尾以賦予它更多權(quán)重。

在CSS中，樣式規(guī)則以級(jí)聯(lián)方式應(yīng)用于元素。下面這個(gè)列表中越靠前的權(quán)重越小：

●瀏覽器樣式：是Web瀏覽器聲明的默認(rèn)樣式。

　　●用戶聲明的樣式：是用戶使用瀏覽器選項(xiàng)設(shè)置或通過(guò)開發(fā)人員調(diào)試工具修改的自定義樣式。

　　●開發(fā)中聲明的樣式：是網(wǎng)站開發(fā)人員在CSS樣式表中聲明的樣式。

　　●具有!important規(guī)則的開發(fā)者聲明樣式。

　　●具有!important規(guī)則的用戶樣式。

義及語(yǔ)法

!important，作用是提高指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)（優(yōu)先級(jí)）。語(yǔ)法格式{ cssRule !important }，即寫在定義的最后面，例如：box{color:red !important;}。在 CSS 中，通過(guò)對(duì)某一樣式聲明! important ，可以更改默認(rèn)的 CSS 樣式優(yōu)先級(jí)規(guī)則，使該條樣式屬性聲明具有最高優(yōu)先級(jí)。

瀏覽器識(shí)別

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

海無(wú)涯，不要沉浸在知識(shí)的海洋里，迷失自己。

要知道自己想要什么，抓住重點(diǎn)，不忘初心。

這個(gè)世界上百分之20的人，掌握著百分之80的財(cái)富。

接下來(lái)一系列教程，就帶領(lǐng)大家抓住重點(diǎn)，一起做那百分之20的人。

往期知識(shí)點(diǎn)回顧：

重點(diǎn)屬性-display

重點(diǎn)屬性-position

重點(diǎn)屬性-float

重點(diǎn)屬性-flex

重點(diǎn)屬性-overflow

重點(diǎn)屬性-background

隨著響應(yīng)式設(shè)計(jì)模型的誕生:

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

設(shè)置Meta標(biāo)簽

首先我們?cè)谑褂?/p>

Media的時(shí)候需要先設(shè)置下面這段代碼，來(lái)兼容移動(dòng)設(shè)備的展示效果：

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

這段代碼的幾個(gè)參數(shù)解釋：

width = device-width：寬度等于當(dāng)前設(shè)備的寬度

initial-scale：初始的縮放比例（默認(rèn)設(shè)置為1.0）

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

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

user-scalable：用戶是否可以手動(dòng)縮放（默認(rèn)設(shè)置為no，因?yàn)槲覀儾幌Ｍ脩舴糯罂s小頁(yè)面）

進(jìn)入CSS3 Media寫法

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

Media所有參數(shù)匯總

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

width:瀏覽器可視寬度。

height:瀏覽器可視高度。

device-width:設(shè)備屏幕的寬度。

device-height:設(shè)備屏幕的高度。

orientation:檢測(cè)設(shè)備目前處于橫向還是縱向狀態(tài)。

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

device-aspect-ratio:檢測(cè)設(shè)備的寬度和高度的比例。

color:檢測(cè)顏色的位數(shù)。（例如：min-color:32就會(huì)檢測(cè)設(shè)備是否擁有32位顏色）

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

monochrome:檢測(cè)單色楨緩沖區(qū)域中的每個(gè)像素的位數(shù)。（這個(gè)太高級(jí)，估計(jì)咱很少會(huì)用的到）

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

grid：檢測(cè)輸出的設(shè)備是網(wǎng)格的還是位圖設(shè)備。

實(shí)踐代碼，應(yīng)用場(chǎng)景

布局自適應(yīng)和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;}}
復(fù)制代碼

面試題：

談?wù)剬?duì)rem的認(rèn)識(shí)，rem和em有什么區(qū)別？

rem（font size of the root element）是指相對(duì)于根元素的字體大小的單位。簡(jiǎn)單的說(shuō)它就是一個(gè)相對(duì)單位。看到rem大家一定會(huì)想起em單位，em（font size of the element）是指相對(duì)于父元素的字體大小的單位。它們之間其實(shí)很相似，只不過(guò)一個(gè)計(jì)算的規(guī)則是依賴根元素一個(gè)是依賴父元素計(jì)算。

在線咨詢

上一篇：前端面試題（十五）
下一篇：JavaScript 轉(zhuǎn)義字符串

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商