今日這篇是整合前面的css補(bǔ)充知識(shí)的。

我覺得前面的關(guān)于css的知識(shí)補(bǔ)充進(jìn)去有點(diǎn)亂，今日整理整理一下。

層疊樣式表

層疊是什么意思？為什么這個(gè)詞如此重要，以至于要出現(xiàn)在它的名稱里。

層疊可以簡(jiǎn)單地理解為沖突的解決方案。

什么是沖突？

就是同個(gè)元素在使用不同的選擇器選擇中后添加相同的樣式。

優(yōu)先級(jí)規(guī)則可以表述為

行內(nèi)樣式>ID樣式>類別樣式>標(biāo)記樣式

在復(fù)雜的頁(yè)面中，某一個(gè)元素有可能會(huì)從很多地方獲取樣式，例如一個(gè)網(wǎng)站的某一

級(jí)標(biāo)題整體設(shè)置為使用綠色，而對(duì)某個(gè)特殊欄目需要使用藍(lán)色，這樣在欄目中就需

要覆蓋通用的樣式設(shè)置。在很簡(jiǎn)單的頁(yè)面中，這樣的特殊需求實(shí)現(xiàn)起來(lái)不會(huì)很難，

但是如果網(wǎng)站的結(jié)構(gòu)很復(fù)雜，就完全有可能代碼變得非常混亂，可能出現(xiàn)無(wú)法找到

某個(gè)元素的樣式來(lái)自于哪條規(guī)則的情況。因此，必須要充分理解css中“層疊”的原理。

計(jì)算沖突樣式的優(yōu)先級(jí)是一個(gè)比較復(fù)雜的過(guò)程，并不僅僅是上面這個(gè)簡(jiǎn)單的優(yōu)先級(jí)規(guī)則

可以完全描述的。但是讀者可以把一個(gè)大的原則，就是“越特殊的樣式，優(yōu)先級(jí)越高”。

而這個(gè)怎么樣才是特殊且越特殊怎么定位，請(qǐng)接著看以下的內(nèi)容。

特殊性：

每個(gè)選擇器都有特殊性，而如果一個(gè)元素有兩個(gè)或多個(gè)沖突的屬性聲明，特殊性高的勝出。

選擇器的特殊性由選擇器本身的組件確定。特殊性值表述為4個(gè)部分，如：0,0,0,0.

一個(gè)選擇器的具體特殊性如下確定：

對(duì)于選擇器中給定的各個(gè)ID屬性值，則在第二個(gè)部分加一：0,1,0,0。

對(duì)于選擇器中給定的各個(gè)類屬性值、屬性選擇或偽類，則在第三個(gè)部分加一：0,0,1，0。

對(duì)于選擇器中給定的各個(gè)元素和偽元素，則在第四個(gè)部分加一：0,0,0,1。

結(jié)合符和通配選擇器對(duì)特殊性沒(méi)有任何貢獻(xiàn)。

但通配選擇器特殊性為零  ： 即0,0,0,0。

結(jié)合符連零都沒(méi)有。

例子：

h1{color:red;}   為0,0,0,1

p em{color：purple}  為0,0,0,2

.grape{color:purple}  為0,0,1,0

p.b e.a{color:red; }   0,0,2,2

#aa{color:red;}    0,1,0,0

div#aa *[href]{color:red;}  0,1,1,1

而第一個(gè)0是為行內(nèi)樣式準(zhǔn)備的，因?yàn)樵角懊妫韮?yōu)先級(jí)越高，假如非零數(shù)字位置一樣，那么先比較前面的數(shù)字的大小，

然后再往下比較，直到數(shù)字不相對(duì)，取數(shù)字大那個(gè)的優(yōu)先級(jí)高。

所以才有上面的那個(gè)大致優(yōu)先級(jí)規(guī)則：

行內(nèi)樣式>ID樣式>類別樣式>標(biāo)記樣式

它們剛剛好可以作為每個(gè)部分的代表，也是四個(gè)，對(duì)號(hào)入座。

重要聲明 !important   ,就是把你所需要的聲明標(biāo)出來(lái)，它的優(yōu)先級(jí)最高，不過(guò)它要放在聲明的值的最后。

繼承：

繼承的特殊性連零都沒(méi)有，就是沒(méi)有特殊性；

這個(gè)0特殊性有零與無(wú)特殊性有很大的區(qū)別，就是0特殊性的選擇器可以為后代加樣式，

而繼承雖然也有給后代加樣式，但有限制的，只有有繼承能力的才能加到后代元素中，如color等，而margin、padding和border這些屬性都不會(huì)加到后代里。

相同權(quán)重的，按順序比較，順序越下他的優(yōu)先級(jí)最高。

較高特殊性強(qiáng)于較低特殊性

所以偽類聲明順序：link-visited-hover-active

LVHA（簡(jiǎn)寫）

當(dāng):visited在他們之后時(shí)，由于權(quán)重一樣，所以會(huì)看他們的順序，而:visited在他們之后會(huì)勝出。

當(dāng)不是寫統(tǒng)一屬性就不會(huì)出現(xiàn)這種問(wèn)題。所以寫同一種屬性時(shí)要注意 ?。。?！

以上是css的核心基礎(chǔ)。

擴(kuò)充這篇知識(shí)之外：

包含塊：

包含塊的寬就是所包含的元素的父級(jí)的寬度，而父級(jí)的寬度就是包含在里面的各個(gè)元素的

margin-left   +    border-left   +   padding-left  +   width   +   padding-right   +   border-right  +    margin-right=包含塊水平寬

width、margin-left、margin-right都可以設(shè)置auto；

而margin-left和margin-right同時(shí)設(shè)置auto，會(huì)在居中，但這是有條件的：

1、這個(gè)元素必須是塊級(jí)元素并且沒(méi)有脫離文檔流

2、這個(gè)元素有設(shè)置寬度

margin-top、margin-bottom設(shè)置auto是不會(huì)垂直居中，設(shè)置成auto，它們只會(huì)等于零。

水平總長(zhǎng)度的七大屬性，這七個(gè)屬性就是上面計(jì)算公式的屬性，他們的總和不能大于水平總長(zhǎng)度，而margin能為負(fù)值，在計(jì)算上也不違反這個(gè)規(guī)則。

注意：只有margin能為負(fù)值。

至于margin為負(fù)值時(shí)什么樣的，自己去體驗(yàn)，這個(gè)屬性看起來(lái)挺犯規(guī)的。

以上這篇css核心基礎(chǔ)總結(jié)篇(推薦)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論