21點锯岖，大致完成了作業(yè)介袜，在回去之前趕快記錄一下今天的知識點。
說實話出吹，我這個人真的好高騖遠遇伞，但沒辦法，我真的不喜歡聽概念捶牢。鸠珠。。
話不多說了秋麸，首先今天總重要的知識點渐排，div盒子。盒子模型分為兩種灸蟆，標準盒子模型和IE盒子模型（這里吐槽一下驯耻，這個IE和那個讓人神煩的IE并不是同一個東西，今天上課的時候我還在講之前跟同桌說來著炒考，丟人了可缚。。）
標準盒子模型：
由于其中講清楚實在要費太多時間斋枢，所以直接上圖帘靡，總之就是標準盒子模型中，直接設(shè)置的width和height值瓤帚，為模型中的content的長寬描姚，在此基礎(chǔ)上，增加border和padding的值會撐大盒子模型的總大小
元素最終寬度 = ?content寬度值(width屬性的值) + padding-left值 + padding-right值 + border-left-width值+border-right-width值
元素最終高度 = ?content高度值(height屬性的值) + padding-top值 + padding-bottom值 + border-top-width值+border-bottom-width值
IE盒子模型
由圖可知缘滥，該模型中設(shè)置width和height轰胁，這兩個值會直接規(guī)定盒子的總體大小，如果更改padding和border朝扼，則會相應的縮小content的長寬
給元素設(shè)置的width屬性和height屬性，就是該元素的最終寬度和最終高度 【padding值或者border值越大霎肯，則里面content區(qū)域的大小就越小 => 此消彼長】表示IE盒子模型的樣式為： box-sizing: border-box;
? ? 元素真實寬度(就是設(shè)置的width屬性值) = ?content寬度值 + padding-left值 + padding-right值 + border-left-width值+border-right-width值
? ? 元素真實高度(就是設(shè)置的height屬性值) = ?content高度值 + padding-top值 + padding-bottom值 + border-top-width值+border-bottom-width值
以上就是兩種盒子模型擎颖，還是比較簡單的榛斯，然后就是關(guān)于margin的兩個問題：塌陷和合并
先解釋一下塌陷，以防我日后忘掉了（說實話這個問題平時真的沒有注意太多搂捧，但出現(xiàn)的真的很頻繁）
塌陷：兩個嵌套關(guān)系的（父子關(guān)系）塊級元素驮俗，當父元素有上外邊距或者沒有上外邊距（margin-top），子元素也有上外邊距（margin-top）的時候允跑。兩個上外邊距會合成一個上外邊距王凑，以值相對較大的上外邊距值為準×浚【上外邊距值是看誰的值大索烹，就以誰為準】
?外邊距塌陷, margin-top屬性的3種取值情況:
1、若兩個上外邊距值都是正數(shù)時：?最終的margin-top值以較大值為準?(120px?和?250px?則以250px為準)
2弱睦、若兩個值上外邊距值都是負數(shù)時：?最終的margin-top值以絕對值是較大值為準?(-120px?和?-50px?則以-120px為準)
3百姓、若兩個上外邊距值是一正一負數(shù)時：?最終的margin-top值是兩個數(shù)值之和?(120px?和?-70px?則以50px為準)
解決辦法：
解決辦法1： ? ? 給父元素設(shè)置上邊框
（border-top: 1px solid transparent;） ?
?? border-top: 1px solid transparent;
解決辦法2： 設(shè)置padding-top?
? ? ? padding-top: 1px;
合并： 這種現(xiàn)象發(fā)生在兩個并列的塊級元素之間。給第一個元素設(shè)置下外邊距（margin-bottom）况木，并同時給第二個元素設(shè)置上外邊距（margin-top）垒拢。兩個元素之間的距離不等于這兩個外邊距之和，而是等于兩者之間的較大值火惊。 【 比如： 100px 和 ?50px ?間距就等于100px 而不是150px 】
外邊距合并求类，兩個元素之間的間距的3種取值情況:
1、若兩個外邊距值都是正數(shù)時：?最終的外邊距值以較大值為準?(120px?和?250px?則以250px為準)
2屹耐、若兩個值外邊距值都是負數(shù)時：?最終的外邊距值以絕對值是較大值為準?(-120px?和?-50px?則以-120px為準)
3仑嗅、若兩個外邊距值是一正一負數(shù)時：?最終的外邊距值是兩個數(shù)值之和?(120px?和?-50px?則以70px為準)
解決辦法：
外邊距合并的解決辦法：
只設(shè)置其中一個塊級元素的margin值即可（推薦）
給每一個元素添加父元素，然后觸發(fā)BFC規(guī)則（不推薦张症，而且我不會仓技。。）
然受是元素類型俗他，這里理解很簡單脖捻，正兒八經(jīng)使用的時候，總是莫名其妙就bug了兆衅，難頂呀地沮。
元素的類型：
????????1、塊級元素??? [ ?display: block; ]
???????????a羡亩、自己獨占一行
???????????b摩疑、可以設(shè)置寬度，高度畏铆，內(nèi)外邊距等屬性
???????????c雷袋、不設(shè)置寬度，則寬度默認為100%
???????????d辞居、不設(shè)置高度楷怒，則高度由元素的內(nèi)容決定蛋勺，若元素沒有內(nèi)容，則高度為0
????????2鸠删、行內(nèi)元素
???????????a抱完、不獨占一行【默認從左到右排列，直到放不下才會另起一行放置】
???????????b刃泡、不可以設(shè)置寬度巧娱，高度屬性，但是可以設(shè)置水平和垂直方向的內(nèi)邊距烘贴，和水平方向的外邊距
???????????c禁添、行內(nèi)元素的寬度和高度由內(nèi)容決定
????????3、行內(nèi)塊級元素
???????????a庙楚、不獨占一行【默認從左到右排列上荡，直到放不下才會另起一行放置】
???????????b、可以設(shè)置寬度馒闷，高度酪捡，內(nèi)外邊距等屬性
???????????c、不設(shè)置寬度和高度纳账，則由元素本身決定
然后還講了元素的轉(zhuǎn)換和隱藏顯示逛薇，這里其實就是用了display，這東西是真的好用疏虫，配合我之前使用的fliter和opacity永罚，能夠?qū)崿F(xiàn)很多懸停的顯示功能（比如網(wǎng)易云的頭部特效，可惜的是老師說剩下的需要js才能實現(xiàn)）
p.s.火狐記錄了三個字體圖標網(wǎng)站
