《CSS的世界》不是一本文檔書(shū)，他更多的是對(duì)css的理解認(rèn)知，但是其中還是出現(xiàn)了很多我沒(méi)有完全理解或者之前沒(méi)有聽(tīng)過(guò)的名詞/概念，這邊先把這些概念列下來(lái)。
1. 元素
html的標(biāo)簽有很多，像常見(jiàn)的<div>、<span>、<li>等等，通常分成兩類(lèi)：
- 塊級(jí)元素
- 內(nèi)聯(lián)元素
根據(jù)內(nèi)容還可分為 - 替換元素
- 非替換元素
1.1. 塊級(jí)元素
常見(jiàn)的有<div>、<li>和<table> 等。
特征：每個(gè)元素占一行，可以設(shè)置寬高
值得注意的是，塊級(jí)元素和display: block不是一個(gè)概念，比如上面提到的li它的display值就是list-item，table的display值是table，但是他們都是塊級(jí)元素。
1.2. 內(nèi)聯(lián)元素
常見(jiàn)的有<span>、<button>、<input>、<img>
特征：可以和文字在一行顯示
浮動(dòng)元素是內(nèi)聯(lián)元素嗎？不是的，浮動(dòng)元素在文檔流之外，并不是和文字在一行顯示。
1.3. 替換元素
顧名思義，內(nèi)容可以被替換的元素，都是內(nèi)聯(lián)元素。
常見(jiàn)的有<input>, <textarea>, <img>, <video>, <object>, <video>, <iframe>。
另外content屬性生成的對(duì)象稱(chēng)為匿名替換元素，所以content屬性生成的內(nèi)容也都是替換元素。
替換元素除了內(nèi)容可替換，還有一些特征區(qū)別于非替換元素，比如有自己的尺寸
<img src={kitty} />
<img src={kitty} height={200} />
<img src={kitty} height={200} style={{height: '300px'}} />
2. 盒子
每個(gè)元素都有兩個(gè)盒子：
- 外在盒子 負(fù)責(zé)元素是一行顯示，還是換行顯示
- 內(nèi)在盒子 負(fù)責(zé)寬高和內(nèi)容，又稱(chēng)為容器盒子
內(nèi)在盒子又被分成四個(gè)盒子： - content box
- padding box
- border box
- margin box
很多時(shí)候我們給元素設(shè)置寬高，但最終發(fā)現(xiàn)真是高度跟設(shè)置的可能不一樣，就是因?yàn)閷捀咦饔迷诓煌凶由蠈?dǎo)致的
按照我們一般人的思維，我設(shè)置了30px的寬度，應(yīng)該是連同border、padding、content一起30px，但如果box-sizing設(shè)置為content-box(瀏覽器默認(rèn)就是content-box)，那么width就只作用在content上，如果外面還有border、padding，那么實(shí)際尺寸肯定會(huì)比設(shè)定要大。
我們可以通過(guò)寬度分離的方式來(lái)解決，也就是把width跟border、padding分開(kāi)來(lái)，給width多一層標(biāo)簽。
另外就是可以給box-sizing設(shè)置border-box，書(shū)中評(píng)價(jià)了*{box-sizing:border-box}這種做法，認(rèn)為： - (1)這種做法易產(chǎn)生沒(méi)必要的消耗
- (2)這種做法并不能解決所有問(wèn)題
而下面這兩篇文章都表達(dá)了對(duì)這種寫(xiě)法的支持
My Custom CSS Reset
* { Box-sizing: Border-box } FTW
嗯，我覺(jué)得他們說(shuō)的都對(duì)
哦，順便提一句：* { } doesn't apply to pseudo elements，所以如果要寫(xiě)*, *:before, *:after {}
3. 關(guān)鍵字：
舉幾個(gè)常見(jiàn)的例子比如transparent，solid等
泛關(guān)鍵字(所有屬性都可以使用的關(guān)鍵字)：initial(初始)、inherit(繼承)、unset(未設(shè)置)、revert(還原)
(all: 表示重設(shè)除unicode-bidi和direction之外的所有CSS屬性的屬性值，取值只能是initial、inherit、unset和revert。)
4. 選擇器
| 選擇器 | 符號(hào) |
|---|---|
| 后代 | 空格 |
| 相鄰后代 | > |
| 兄弟(后面的兄弟) | ～ |
| 相鄰兄弟 | + |
利用+可以實(shí)現(xiàn)一些從第二個(gè)元素開(kāi)始生效的樣式
.box {
+ .box {
margin-top: 20px
}
}
5. 塊狀格式化上下文元素（6.3）
BFC全稱(chēng)為block formatting context，中文為“塊級(jí)格式化上下文”。相對(duì)應(yīng)的還有IFC， 也就是inline formatting context，中文為“內(nèi)聯(lián)格式化上下”。
這個(gè)在上一篇文檔流中有講到
6. 偽元素
最常見(jiàn)的::after、::before，還有::first-letter、::first-line
用于插入內(nèi)容，不受文檔約束，也不影響文檔本身，只影響最終的樣式。
Z. 參考
張?chǎng)涡瘢瓹SS的世界[J]．
My Custom CSS Reset
* { Box-sizing: Border-box } FTW
怎樣理解 CSS :after 偽元素的作用？
