最近要重新好好看書，扎實(shí)好基礎(chǔ)，對(duì)于CSS一直處于一種捉摸不透的感覺(jué)，最近看書，感覺(jué)受益匪淺，所以就在github上開了一個(gè)倉(cāng)庫(kù)，專門記錄自己的學(xué)習(xí)補(bǔ)充過(guò)程。
我的CSS記錄github地址，喜歡就關(guān)注哈。
先扔一張圖出來(lái):
)
CSS元素
CSS元素按照HTML元素，可以分為兩種，
- 塊元素
- 行元素(行內(nèi)元素和行內(nèi)塊元素)
按照元素本身的特點(diǎn)來(lái)說(shuō)，可以分為以下兩種:
- 替換元素
- 非替換元素
替換元素和非替換元素
替換元素
是元素中內(nèi)容可以被替換的元素，瀏覽器根據(jù)元素的標(biāo)簽和屬性來(lái)決定元素的內(nèi)容。
像
img元素和input元素，都是替換元素，因?yàn)?img的內(nèi)容是由圖片的鏈接src決定的，而input顯示為什么樣子，也是由其type值決定的。
<img src='test.url'>,<input type='radio'>， 這兩個(gè)不是閉合標(biāo)簽，也沒(méi)有由用戶自定義填充的內(nèi)容可言。
非替換元素
指的是內(nèi)容不可以被替換的元素，一旦內(nèi)容被用戶填充了之后，就不可以被其他元素替代了。
<p>哈哈哈哈</p>其中p標(biāo)簽內(nèi)的內(nèi)容已經(jīng)確定了.也不能被替換了。
行元素和塊元素
行元素
在文檔中沒(méi)有獨(dú)占一行。一般的行內(nèi)元素有span, a, strong都是典型的行內(nèi)元素，當(dāng)然，上面所提及到的替換元素也幾乎都是行內(nèi)元素。
塊元素
在文檔中獨(dú)占一行,其左右沒(méi)有別的元素。div, p, li``````h都是典型的塊元素。.
當(dāng)然，CSS中允許你通過(guò)display去改變一個(gè)元素的顯示方式。
注意事項(xiàng)：行內(nèi)元素可以作為塊元素的后代，但是塊元素不能作為行元素的后代。試想一想，
<span><div>這樣子做肯定蜜汁尷尬</div></span>
這樣肯定很尷尬。最好不要這樣子做。
?? 常見(jiàn)問(wèn)題解釋與區(qū)分點(diǎn)：
塊元素因?yàn)樽陨砭褪仟?dú)占一行的元素，所以可以給其設(shè)置width和height。
行內(nèi)元素不能給其設(shè)置width和height，只有通過(guò)設(shè)置display:block或者display:inline-block；才能設(shè)置。
替換元素如img,input其實(shí)是行內(nèi)塊元素，所以可以給其設(shè)置width和height。
2 ?? 為什么img標(biāo)簽的底部會(huì)有空白？
這個(gè)問(wèn)題主要是因?yàn)閳D片是行內(nèi)元素，行內(nèi)元素是基于baseline去對(duì)其的，而其他如元素內(nèi)的字體是以最低的線去對(duì)齊的，所以會(huì)有這種空隙問(wèn)題。
可以使用vertical-align:middle來(lái)解決。
css選擇器
- id選擇器 #test
- class選擇器 .test
- 元素選擇器 p
- 屬性選擇器
- p[attr='test'] 屬性attr等于test的p標(biāo)簽
- p[attr^='test'] 屬性ttr是以test開頭的p標(biāo)簽
- p[attr$='test'] 屬性attr是以test結(jié)尾的p標(biāo)簽
- p[attr~='test'] 屬性attr是包含有test的p標(biāo)簽
- p[attr*='test'] 屬性值中包含有test子串的p標(biāo)簽。
(屬性選擇器對(duì)于一些元素的選擇很有幫助，容易混淆的是p[attr~='test']和p[attr='test'])。
舉個(gè)例子，對(duì)于元素<div test-id='yesa no'></div>。
其中div[test-id='yes'] 即可以選擇到元素，因?yàn)檫@個(gè)div元素的test-id屬性包含有yes這個(gè)子串。而如果使用div[test-id~='yesa']才能獲取到子串。
我的理解如下：
p[attr~='test']是部分屬性值選擇器，
p[attr*='test'] 是屬性子串匹配選擇器。
- 后代選擇器 p a
- 子選擇器 p > a
- 相鄰兄弟選擇器 p + a
- 兄弟選擇器 p ~ a
- 偽元素選擇器 :first-letter ::before ::after
- 偽類選擇器 :first-line
CSS3新增的一些選擇器 - first-child: 作為某一個(gè)父元素的第一個(gè)子元素
- last-child ： 作為某一個(gè)父元素的最后一個(gè)子元素
- nth-child(n): 作為一個(gè)父元素的第n個(gè)子元素
- nth-child(odd)： 作為某一個(gè)父元素的奇數(shù)子元素
組合選擇器:
如果需要同時(shí)對(duì)多個(gè)選擇器設(shè)置相同的樣式，可以使用組合選擇器。如p,a,div.
多類選擇器:
如果需要匹配同時(shí)擁有多個(gè)類的元素，就需要用到多類選擇器。如 .test.success可以匹配以下元素。
<div class='test success'></div>
但是不能匹配<div class='test'></div>
相信我，CSS的選擇器使用得當(dāng)，真的可以很強(qiáng)大。后續(xù)會(huì)補(bǔ)上例子。
CSS的三大特點(diǎn)
- 特殊性
- 繼承性
- 層疊性
特殊性：
既然前面提到了那么多的選擇器，那么要匹配到一個(gè)元素的方法其實(shí)有很多種，如果有多個(gè)選擇器與元素匹配了，而且其內(nèi)部的樣式聲明還沖突了，那么元素應(yīng)該選擇哪個(gè)選擇器的匹配樣式就顯得非常重要?？紤]如下
現(xiàn)在有一元素:
<div class='test' id='test'><h1>我是為測(cè)試而生的</h1></div>
以下由三個(gè)樣式設(shè)置:
.test h1{color:red;}
#test h1{color:pink}
h1{color:yellow;}
那么，特殊性的重要性就在這里體現(xiàn)了，只有知道特殊性才能知道最終h1會(huì)顯示什么顏色。
當(dāng)然，后面會(huì)提及到繼承樣式，這里需要說(shuō)明一點(diǎn)，繼承的值根本沒(méi)有特殊性，設(shè)置連0特殊性都沒(méi)有?？紤]以下情況:
*{color:red;}
h1#page{color:pink;}
<h1 id='page'>哈哈哈<em>虎虎虎</em></h1>
最終，em標(biāo)簽內(nèi)的內(nèi)容會(huì)顯示為red顏色，因?yàn)橥ㄅ浞奶厥庑詾?，而從h1標(biāo)簽繼承下來(lái)的顏色屬性值是無(wú)特殊性的。
繼承值沒(méi)有特殊性這一點(diǎn)非常重要，因?yàn)闉g覽器會(huì)默認(rèn)給一些元素設(shè)置一些樣式屬性，而如果僅僅想要通過(guò)繼承屬性去覆蓋原有的樣式，是不可能的。
例子如下:
<div class='test2'>
我是黑色的
<a href="">嘿嘿嘿，我還是藍(lán)色的</a>
</div>
.test2 {
color: black;
}
最終.test2內(nèi)部的a標(biāo)簽還是顯示藍(lán)色，因?yàn)闉g覽器給其設(shè)定的默認(rèn)樣式顏色就是藍(lán)色。而繼承的樣式是沒(méi)有特殊性的。
繼承性：
基于繼承機(jī)制，樣式不僅會(huì)應(yīng)用到指定的元素，還會(huì)應(yīng)用到它的后代元素。這個(gè)值會(huì)沿著樹向下傳播到后代元素，并一直持續(xù)，直到再?zèng)]有更多的后臺(tái)元素繼承這個(gè)值為止。
繼承的屬性值有:
color
font
font-size
font-weight
font-style
text-indent
text-align
line-height
word-spacing
letter-spacing
text-transform
不能繼承的屬性值有:
border
padding
margin
background
verticle-align
text-shadow
white-space
display
大體上涉及到字體的都有繼承性質(zhì)。涉及到排版的和展示方式的就不能繼承。
層疊性：
"層疊樣式表"所提到的就是，CSS會(huì)樣式層疊在一起，這是通過(guò)結(jié)合特殊性和繼承做到的。總結(jié)下來(lái)就是下面這個(gè)圖。
一般都是按權(quán)重,來(lái)源，特殊性和順序來(lái)排序的。簡(jiǎn)單地說(shuō)明一下，一般會(huì)先從權(quán)重來(lái)判斷，就是先判斷屬性值有沒(méi)有使用!important，有則優(yōu)先級(jí)最高了。如果都有使用或者都沒(méi)有使用的話，就要通過(guò)判斷樣式來(lái)源來(lái)決定其優(yōu)先級(jí)。
再接著就是按照特殊性來(lái)判斷，參照下面的特殊性圖，分析特殊性。
如果特殊性權(quán)重都一樣的話，再考慮樣式的引入順序。
來(lái)源的權(quán)重大小:
- 1 讀者的重要聲明
- 2 創(chuàng)作人員的重要聲明
- 3 創(chuàng)作人員的正常聲明
- 4 讀者的正常聲明
- 5 用戶代理說(shuō)明
我總結(jié)了基本的判斷順序腦圖，如下所示，希望可以幫到你。
)
