21点，大致完成了作业，在回去之前赶快记录一下今天的知识点。
说实话，我这个人真的好高骛远，但没办法，我真的不喜欢听概念。。。
话不多说了，首先今天总重要的知识点，div盒子。盒子模型分为两种，标准盒子模型和IE盒子模型（这里吐槽一下，这个IE和那个让人神烦的IE并不是同一个东西，今天上课的时候我还在讲之前跟同桌说来着，丢人了。。）
标准盒子模型：
由于其中讲清楚实在要费太多时间，所以直接上图，总之就是标准盒子模型中，直接设置的width和height值，为模型中的content的长宽，在此基础上，增加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盒子模型
由图可知，该模型中设置width和height，这两个值会直接规定盒子的总体大小，如果更改padding和border，则会相应的缩小content的长宽
给元素设置的width属性和height属性，就是该元素的最终宽度和最终高度 【padding值或者border值越大，则里面content区域的大小就越小 => 此消彼长】表示IE盒子模型的样式为： box-sizing: border-box;
元素真实宽度(就是设置的width属性值) = content宽度值 + padding-left值 + padding-right值 + border-left-width值+border-right-width值
元素真实高度(就是设置的height属性值) = content高度值 + padding-top值 + padding-bottom值 + border-top-width值+border-bottom-width值
以上就是两种盒子模型，还是比较简单的，然后就是关于margin的两个问题：塌陷和合并
先解释一下塌陷，以防我日后忘掉了（说实话这个问题平时真的没有注意太多，但出现的真的很频繁）
塌陷：两个嵌套关系的（父子关系）块级元素，当父元素有上外边距或者没有上外边距（margin-top），子元素也有上外边距（margin-top）的时候。两个上外边距会合成一个上外边距，以值相对较大的上外边距值为准。【上外边距值是看谁的值大，就以谁为准】
外边距塌陷, margin-top属性的3种取值情况:
1、若两个上外边距值都是正数时： 最终的margin-top值以较大值为准 (120px 和 250px 则以250px为准)
2、若两个值上外边距值都是负数时： 最终的margin-top值以绝对值是较大值为准 (-120px 和 -50px 则以-120px为准)
3、若两个上外边距值是一正一负数时： 最终的margin-top值是两个数值之和 (120px 和 -70px 则以50px为准)
解决办法：
解决办法1： 给父元素设置上边框
（border-top: 1px solid transparent;）
border-top: 1px solid transparent;
解决办法2： 设置padding-top
padding-top: 1px;
合并： 这种现象发生在两个并列的块级元素之间。给第一个元素设置下外边距（margin-bottom），并同时给第二个元素设置上外边距（margin-top）。两个元素之间的距离不等于这两个外边距之和，而是等于两者之间的较大值。 【 比如： 100px 和 50px 间距就等于100px 而不是150px 】
外边距合并，两个元素之间的间距的3种取值情况:
1、若两个外边距值都是正数时： 最终的外边距值以较大值为准 (120px 和 250px 则以250px为准)
2、若两个值外边距值都是负数时： 最终的外边距值以绝对值是较大值为准 (-120px 和 -50px 则以-120px为准)
3、若两个外边距值是一正一负数时： 最终的外边距值是两个数值之和 (120px 和 -50px 则以70px为准)
解决办法：
外边距合并的解决办法：
只设置其中一个块级元素的margin值即可（推荐）
给每一个元素添加父元素，然后触发BFC规则（不推荐，而且我不会。。）
然受是元素类型，这里理解很简单，正儿八经使用的时候，总是莫名其妙就bug了，难顶呀。
元素的类型：
1、块级元素 [ display: block; ]
a、自己独占一行
b、可以设置宽度，高度，内外边距等属性
c、不设置宽度，则宽度默认为100%
d、不设置高度，则高度由元素的内容决定，若元素没有内容，则高度为0
2、行内元素
a、不独占一行【默认从左到右排列，直到放不下才会另起一行放置】
b、不可以设置宽度，高度属性，但是可以设置水平和垂直方向的内边距，和水平方向的外边距
c、行内元素的宽度和高度由内容决定
3、行内块级元素
a、不独占一行【默认从左到右排列，直到放不下才会另起一行放置】
b、可以设置宽度，高度，内外边距等属性
c、不设置宽度和高度，则由元素本身决定
然后还讲了元素的转换和隐藏显示，这里其实就是用了display，这东西是真的好用，配合我之前使用的fliter和opacity，能够实现很多悬停的显示功能（比如网易云的头部特效，可惜的是老师说剩下的需要js才能实现）
p.s.火狐记录了三个字体图标网站
