前面基础知识（查缺补漏）css篇
知识点 css篇
自适应单位
百分比： %
相对于视口宽度单位： vw
相对于视口高度单位： vh
相对于视口宽度或高度单位： vm (取决于哪个小)
相对于父元素字体单位大小： em
相对于根元素字体单元大小： rem
选择器比重
内联样式 1000
ID选择器 0100
类选择器， 属性选择器， 伪类选择器（:link :visited :hover :actice）0010
标签选择器， 伪元素选择器（:before :after） 0001
通配符选择器 (*) 继承 0000
无样式闪烁问题
无样式内容闪烁又称为 FOUC（Flash Of Unstyled Content）。
引起原因： 实在IE下通过 @import 方式导入CSS 文件引起的。
<style type="text/css">
@import url('aaa.css');
</style>
IE 会首先加载整个HTML 文档中的DOM, 然后再导入外部的CSS文件。
因此，在页面DOM加载完成到CSS导入完成中间，有一段时间页面上内容是没有样式的。
@import 和 link 的区别
link 是 XHTML 标签。 @import 是 css2.0 引入的一个方法。
-
加载资源限制不同
link 除了能加载css文件之外，还能加载 模板等。
@improt 只能加载css
-
加载方式
link 引入css, 是同步加载的。 意思就是 在页面载入的同时， css一起加载
@import , 是异步的。需要等网页载入后，在加载CSS。
-
兼容性
link是XHTML的标签，没有兼容问题。
@import 是CSS 2.0 提出的。不支持低版本的浏览器。
-
改变样式
link 是一个标签， 可以通过js 设置样式。
@import 只是一个方法。
介绍一下content属性。
咱们一般使用这个属性， 就是为了清除浮动。 最后我们都使用flex 布局。 浮动很少使用。这个属性单拿出来。可能还犯蒙。
CSS的content 属性专门应用在 before/after 伪元素上， 用于插入生成的内容。
最常见的就是 利用伪类清除浮动。
BFC, IDC, GFC，FFC
BFC（Block Formatting Context） 块级格式上下文。
一个创建新的BFC的盒子是是独立布局的， 盒子里面的子元素的样式不会影响到外面的元素。在同一BFC中，两个挨着块级盒在垂直方向的margin会发生折叠。
发生折叠 和布局有关系
1. 两个块级盒的 margin 挨着了（可以是兄弟。也可以是祖先）。
2. 在同一块（BFC）中
3. 方向是垂直的。
BFC决定元素如何对齐内容进行布局，也决定与其他元素的关系和相互作用。
代码举例
<style>
main {
border: 5px solid red;
}
.a {
width: 100px;
height: 100px;
background-color: chartreuse;
margin: 10px;
}
.b {
width: 200px;
height: 300px;
background: chocolate;
margin: 20px;
}
</style>
<body>
<main>
<div class="a"></div>
<div class="b"></div>
</main>
</body>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pDhelBH9-1591536000050)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200601151908422.png)]
现在的盒子a 和 盒子b 他们的距离 就是发生折叠之后的。 是20px。 按最大的走。把小的覆盖了。
有三个规则： 都为正 要最大的。
都为负 要绝对值最大的
一正一负 结果相加。
解决方式就很简单了。 咱们根据出现的原因。随便打破一个条件就可以了。
因为是 块级 垂直 相邻（随便加一个边框）。在同一BFC中。 display 行级块就可以。 其他的方式，可能影响布局。看情况使用。
当我main块 不给 border的时候。 也会发生 margin塌陷。
<style>
main {
border: 5px solid red;
}
article {
margin: 30px;
background-color: cornsilk;
}
.a {
width: 100px;
height: 100px;
background-color: chartreuse;
margin: 10px;
display: inline-block;
}
.b {
width: 200px;
height: 300px;
background: chocolate;
margin: 10px;
}
</style>
<body>
<main>
<article>
<div class="a"></div>
<div class="b"></div>
</article>
</main>
</body>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9HBXOTUj-1591536000054)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200601154106471.png)]
IFC (Inline Formattin COntext) 内联格式化上下文。 行级元素的特性
GFC (GridLayout Formattin COntext) 网格布局格式化上下文。
这种情况是 当元素 dispaly: grid的时候，元素就会获得一个独立的渲染区域。
通过
网格容器 grid container 定义 网格定义行 网格定义列
网格项目上定义网格行 网格列 来为每一个网格项目定义位置和空间
FFC Flex Formatting Context 自适应格式化上下文。 也是现在用的最多的。
display: flex 或者 line-flex 就会生成 自适应容器。
访问超链接后Hover 样式就不出现了。
伪类都有
:link :visited ：hover :active (爱恨原则) （L V H A） love hate
想要样式出现。 爱恨一个都不能少， 顺序爱恨。
rgba() 和 opacity 的透明度有什么不同
opactiy 作用的对象是元素。
rgba 作用的对象 是 元素的颜色或者 背景色。
display:none 和 visibility:hidden 的区别
display:none 隐藏对应的元素，在文档布局中不再给他分配空间，它各边的元素会合拢，可以认为是真正的消失。
visibility:hidden 隐藏对应的元素，文档布局中仍然占据着空间。
opactiy 作用的对象是元素。
rgba 作用的对象 是 元素的颜色或者 背景色。
display:none 和 visibility:hidden 的区别
display:none 隐藏对应的元素，在文档布局中不再给他分配空间，它各边的元素会合拢，可以认为是真正的消失。
visibility:hidden 隐藏对应的元素，文档布局中仍然占据着空间。
自适应布局
头部 底部固定 中间内容 自适应。 想让中间内容滑动。 overflow： auto