CSS歷史
- 在CSS還沒(méi)誕生之前缩功，html實(shí)現(xiàn)樣式效果是用自己的標(biāo)簽實(shí)現(xiàn)的，比如
<xxx bgcolor="red">可以讓那個(gè)標(biāo)簽的背景色變成紅色靴庆，<center>則可以使被包裹的標(biāo)簽居中顯示时捌。 - 后來(lái)人們覺(jué)得這種方式看起來(lái)太亂了，于是便讓html做一個(gè)
<style>標(biāo)簽炉抒，把網(wǎng)頁(yè)樣式寫(xiě)在里面奢讨，這也是選擇器的由來(lái)。
<style>
選擇器{
屬性：值
}
</style>
- 因?yàn)楫?dāng)時(shí)的網(wǎng)頁(yè)主要是用于學(xué)術(shù)論文的發(fā)表焰薄，所以對(duì)文字樣式的要求并不高拿诸。于是當(dāng)時(shí)就出現(xiàn)了類似CSS模版的東西，于是乎塞茅，
<link>標(biāo)簽開(kāi)始支持CSS亩码。 - 接下來(lái)為了方便論文打印，就出現(xiàn)了媒體查詢功能野瘦，如果給網(wǎng)頁(yè)一個(gè)
media="print"屬性描沟，就會(huì)給打印網(wǎng)頁(yè)提供格式。CSS的不正交處就是從這里開(kāi)始的鞭光。 - CSS 一開(kāi)始設(shè)計(jì)出來(lái)的時(shí)候并沒(méi)有想到大家會(huì)這么依賴 CSS吏廉，所以設(shè)計(jì)的時(shí)候想得特別簡(jiǎn)單：你要什么功能我就加什么屬性。
- 你要顏色惰许，就有 color: red; background-color: red;
- 你要圖文混排席覆，就有 float: left
- 你要絕對(duì)定位，就有 position: absolute
你要什么功能我就加什么屬性汹买，這也就是CSS不正交佩伤，或者說(shuō)屬性和元素自相矛盾的根源
CSS學(xué)習(xí)的難點(diǎn)
如果你不深入了解 CSS，那么你會(huì)發(fā)現(xiàn) CSS 不正交晦毙，因而有些反直覺(jué)生巡。不正交主要表現(xiàn)在兩點(diǎn)：
- 各屬性之間互相影響
-
margin V.S. border
margin同時(shí)出現(xiàn)會(huì)發(fā)現(xiàn)合并現(xiàn)象，因?yàn)榻梃b了排版的概念见妒，但是加一個(gè)border后障斋，margin又分開(kāi)了，這就是不正交處徐鹤。 小圓點(diǎn) V.S. displayposition: absolute V.S. display: inline
- 各元素之間互相影響
position: fixed V.S. transform
float 影響 inline 元素
CSS學(xué)習(xí)的易點(diǎn)
- 背套路即可應(yīng)付日常工作
水平居中
垂直居中 - 巧用工具
CSS 3 Generator
CSS該如何學(xué)
學(xué)套路垃环，比如布局啊，居中啊等等返敬。
把工作和面試時(shí)要會(huì)的套路都學(xué)會(huì)Ｋ熳！這樣就能解決工作時(shí)80%的問(wèn)題劲赠。多看大佬的博客涛目，看20篇以上秸谢。
看CSS的規(guī)范文檔(不推薦，太浪費(fèi)時(shí)間霹肝，而且沒(méi)什么亂用)
