CSS基礎(chǔ)
一、CSS基本介紹
- 定義：CSS全稱為Cascading Style Sheets，即層疊樣式表，是一種樣式表語言，用來描述HTML或XML文檔的呈現(xiàn)，CSS描述了在屏幕、紙質(zhì)、音頻等其它媒體上的元素應(yīng)該如何被渲染的問題。
- 歷史：
1.1994年，哈肯.維姆.萊提出CSS，伯特.波斯（Bert Bos）當時正在設(shè)計Argon瀏覽器，兩人一拍即合。
2.1997年，W3C組織了專門管CSS的項目組，負責人：克里斯.里雷。
3.CSS2.1（支持最廣泛，IE從5.5開始，目前從IE8開始測試）
1998年5月發(fā)表了CSS2，CSS2.1修改了一些錯誤，刪除了不被支持的內(nèi)容，增加了一些瀏覽器有的拓展內(nèi)容。
4.CSS3
從2011年開始CSS被分成多個模塊，統(tǒng)稱CSS3。
.選擇器level3
.媒體查詢level3
.CSS Color level3
二、CSS周邊工具
- LESS CSS：簡化CSS，功能更多
- SASS：簡化，功能相比較LESS CSS更多
- PostCSS：css處理程序
三、CSS學習資源
- 通過MDN文檔進行學習
- 通過一些CSS交流平臺學習，比如
css tricks
Codrops - 書籍：《CSS揭秘》；
- 文檔：CSS標準文檔
- 專業(yè)人士的博客，比如阮一峰，張鑫旭等。
四、CSS常見問題：
1.兩種盒模型：
盒模型組成：box=content+padding+margin+border
兩種盒模型：W3C盒模型和IE盒模型
-
W3C定義的盒模型（標準模型）認為：元素的width和height指的是的content的width和height
W3C盒模型.png - IE盒模型認為：元素的width和height應(yīng)該為content+padding+border
他們的區(qū)別就在于對于元素寬和高的定義不同。
a.兩種盒模型在CSS中是如何設(shè)置的：
box-sizing 屬性用于更改用于計算元素寬度和高度的默認的 CSS 盒子模型。可以使用此屬性來模擬不正確支持CSS盒子模型規(guī)范的瀏覽器的行為。
當box-sizing設(shè)置為不同值時，盒子的大小就不相同。
b.兩種盒模型比較：
相對于W3C盒子模型，IE盒子模型具有更加好控制大小的特點，在實際操作中，我們一般會先確定整個元素的尺寸，然后通過調(diào)節(jié)padding和margin來確定內(nèi)容的居中，和其他元素的距離，整個過程中盒子模型尺寸不會發(fā)生變化，這點通過IE盒子模型很好實現(xiàn)，但是在W3C盒子模型中，在確定padding和margin后，整個尺寸就被打亂，需要重新去調(diào)節(jié)content大小，這也是后來標準推出box-sizing的原因。
c.盒模型外邊距折疊問題：
外邊距折疊是指：兩個或多個盒子(可能相鄰也可能嵌套)的相鄰邊界(其間沒有任何非空內(nèi)容、補白、邊框)重合在一起而形成一個單一邊界。
- 外邊距重疊的三種情況：
a.相鄰元素：相鄰元素間外邊距會發(fā)生外邊距折疊；
b.父元素與子元素：父元素與其第一個子元素之間不存在邊框、內(nèi)邊距、行內(nèi)內(nèi)容、也沒有創(chuàng)建BFC、或者清除浮動將兩者的margin-top分開，或者與最后一個元素間之間不存在邊框、內(nèi)邊距、行內(nèi)內(nèi)容、height、min-height、max-height將兩者的 margin-bottom 分開，那么這兩對外邊距之間會產(chǎn)生折疊。此時子元素的外邊距會“溢出”到父元素的外面。
c.空的塊級元素：如果一個塊級元素中不包含任何內(nèi)容，并且在其 margin-top 與 margin-bottom 之間沒有邊框、內(nèi)邊距、行內(nèi)內(nèi)容、height、min-height 將兩者分開，則該元素的上下外邊距會折疊。
** 注意：水平外邊距不會重疊。** - 外邊距折疊的簡單計算：
a.如果參與折疊的外邊距都為正值，取最大值；
b.如果不全是正值，則都取絕對值，然后用正值減去最大值；
c.如果沒有正值，都取絕對值后用0減去最大值。
參考：
http://www.itdecent.cn/p/2e787c6d8ede
https://zhuanlan.zhihu.com/p/43703098
https://blog.csdn.net/m0_37585915/article/details/78501760
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
https://zhuanlan.zhihu.com/p/25321647?utm_source=wechat_session&utm_medium=social&utm_oi=817135426103050240
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
