CSS基礎
一运怖、CSS基本介紹
- 定義：CSS全稱為Cascading Style Sheets，即層疊樣式表摇展，是一種樣式表語言，用來描述HTML或XML文檔的呈現(xiàn)盯孙，CSS描述了在屏幕鲁森、紙質(zhì)振惰、音頻等其它媒體上的元素應該如何被渲染的問題。
- 歷史：
1.1994年痛垛，哈肯.維姆.萊提出CSS，伯特.波斯（Bert Bos）當時正在設計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應該為content+padding+border
他們的區(qū)別就在于對于元素寬和高的定義不同。
a.兩種盒模型在CSS中是如何設置的：
box-sizing 屬性用于更改用于計算元素寬度和高度的默認的 CSS 盒子模型缺亮。可以使用此屬性來模擬不正確支持CSS盒子模型規(guī)范的瀏覽器的行為葵礼。
當box-sizing設置為不同值時并鸵，盒子的大小就不相同。
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.reibang.com/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
