3月31日知识点梳理

宽高自适应：
宽的自适应：
width:100%;或者是width不去设置，子元素宽度跟随父元素。
高度自适应第一种情况：
height不去设置 或者height:auto; 内容撑开父元素高度。
最小高度的设置。
min-height:;
需求：
a: 内容增加能撑开父元素高度
b: 内容特别少，能让元素保持一个最小高度
正常项目中：最小高度直接用min-height即可。
如果考虑兼容：min-height iE6不兼容。 IE6默认把height解析成最小高度
注：如果height 和 min-height同是出现，执行height固定高度！
最小高度的兼容设置方法：（了解：体会的是解决兼容的思路）
1: min-height:300px;_height:300px;
2: min-height:300px;height:auto!important;height:300px;
a: 高版本浏览器解析顺序：
min-height能识别，也能识别！important 所有height:auto;权重最高，height:auto 就能把height:300px覆盖。
b:IE6解析流程：
min-height不能识别，也不能识别！important , 后写的height:300px;能把height:auto覆盖，
过滤器：
1：下划线过滤器（IE6过滤器）
语法：
_属性：属性值：
只有IE6能识别带有下划线的属性。
2: !important (IE6不识别)
语法：
属性：属性值!important;
3. 属性过滤器
当在一个属性前面增加了*后，该属性只能被IE7浏览器识别，其它浏览器混略该属性的作用。
语法：选择符{*属性：属性值；}
4. \9 ：IE版本识别；其它浏览器都不识别
语法：选择符{属性：属性值\9;}
5. \0 : IE8 及以上版本识别；其它浏览器都不识别
高度塌陷出现的场景：
当子元素有浮动，父元素没有高度的时候，父元素会出现高度塌陷
注：浮动的子元素不会撑开父元素的 height 或者是 min-height。
解决高度塌陷的方法：
1：给出现高度塌陷的元素添加：overflow:hidden;
原理：overflow:hidden;触发了一个 BFC(布局逻辑)
BFC规定：计算BFC高度时候，浮动元素也参与计算。
弊端：隐藏掉定位在当前元素外围的内容。
2：在浮动元素的下方（同级）添加一个空的div，给div设置样式
div{clear:both;}
原理：添加的空div添加了clear：both;忽略上方同级添加浮动的元素留出的空间。在父元素最底下显示，撑开父元素高度。
弊端：形成代码的冗余（出现高度塌陷，添加一个div）
3：万能清除法：
.clear_fix:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.clear_fix{
zoom:1;
}
clear:both; 当前元素会忽略上方添加浮动的元素 留出来的空间。
(闭合浮动)
clear的属性值：
clear:left
clear:right
clear:both
伪对象选择符：
1： 元素选择符::after{
content:"";
}
说明： 在某个元素的后面用css的形式添加内容（图片、文本）。
2: 元素选择符::before{
content:"";
}
说明： 在某个元素的前面用css的形式添加内容（图片、文本）。
3: 元素选择符::first-letter{
}
说明：控制第一个字符的样式
4: 元素选择符::first-line{
}
说明：控制第一行的样式
display:none;
将元素彻底隐藏，不再占据空间
visibility:hidden;
将元素隐藏，占据空间，在页面上留下一片空白
伪对象选择器：
元素::after{
content:"";
}
高度自适应第一种情况：
1：高度不去设置，或者高度设置auto 内容撑开父元素的高度。
2：内容撑开父元素的高度 -> 最小高度的设置 min-height
3: 浮动元素添加高度自适应 -> 添加浮动元素的父元素没有高度，会出现高度塌陷
4：高度塌陷的解决方案
（1） 添加overflow:hidden;
原理：触发BFC
弊端：隐藏掉定位在元素外面的内容。
（2）给浮动的元素的下方添加空div 并且设置样式 {clear:both;}
原理：clear:both; 忽略上方浮动元素留出的空间 【闭合浮动】
弊端：反复添加空div 会形成代码的冗余
（3）万能清除法：
.clear_fix:after{
content:"";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.clear_fix{
zoom:1;
} 5: 高度自适应的应用!
高度自适应第一种情况：内容撑开父元素高度
高度自适应第二种情况：让子元素高度随着父元素高度进行改变。
需求：让一个元素在浏览器窗口完全铺满：
前提条件：
body,html{
height:100%;
}
今天老师带领我们学习新课程， 宽高自适应, 最小高度的设置, 最小高度的兼容设置方法, 属性过滤器,高度塌陷出现的场景,解决高度塌陷的方法。总感觉老师讲的太快了，有些跟不上，希望能从头再学一遍多给些练习的时间。老师的期望太高了，我现在只停留在能听懂的阶段，只能比着老师的案例写，问题也归纳不出来，只感觉脑子里一团浆糊。虽然也能听得懂， 但是思维逻辑跟不上，案例方面还有数学运算减行高减间距不太明白等等。到自己单独作的时候，却是有一种无从下手的感觉。也不知道能不能学会这一行，心理也是有一点担忧。只能硬着头皮学下去实在不行的话就留级，因为我想要改变以后的生活，不得不砥砺前行，好想线下上课主要是家里有琐事打扰，想要全身心投入学习中！