1.Bfc
1、BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响；
2、可以通过一些条件触发BFC，从而实现布局上的需求或解决一些问题；
3、可以将BFC想象成一个工具，无需探究其定义，只要着重理解其功能（特性）即可。
BFC的触发条件
1、根元素（<html>）
2、float值非none
3、overflow值非visible
4、display值为inline-block、table-cell、table-caption、flex、inline-flex
5、position值为absolute、fixed
BFC的特性
1、属于同一个BFC的两个相邻容器的上下margin会重叠（重点）
2、计算BFC高度时浮动元素也参于计算（重点）
3、BFC的区域不会与浮动容器发生重叠（重点）
4、BFC内的容器在垂直方向依次排列
5、元素的margin-left与其包含块的border-left相接触
6、BFC是独立容器，容器内部元素不会影响容器外部元素
注：其中1、2、3需重点理解，其特性和功能下面将用代码逐个演示；
4、5、6为基本现象，按字面意思理解即可，不做重点说明。
2.清除浮动的几种方式
1.父级添加overflow属性
2.使用after伪元素清除浮动（推荐使用）
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;/*转换为块级元素*/
height: 0;/*高度为0*/
clear:both;/*清除浮动*/
visibility: hidden;/*隐藏盒子*/
}
3.额外标签法
在父元素内，最后一个浮动标签后，新加一个标签，给其设置clear：both；
.clear{
clear:both;
}
<body>
<div class="father">
<div class="big">big</div>
<div class="small">small</div>
<div class="clear">额外标签法</div>
</div>
<div class="footer"></div>
</body>
3.Flex = 1 flex = 0
flex:initial;1;0;auto;none
initial:默认值，具体表现为，当容器有剩余空间时不增长，当容器空间不足时会缩小，尺寸自适应内容。
0;none:具体表现为元素尺寸不会弹性增大，也不会弹性减小。
0%表示固定尺寸是0，元素不具有弹性，那么，flex:0的元素最终的尺寸为最小宽度。
flex:1、auto都是元素尺寸可以弹性增大，也可以弹性减小
但是设置为1时会优先适应div内部最小尺寸的元素
设置为auto时会优先适应div内部最大尺寸的元素
image.png
虽然都是充分分配容器内容，但是flex：1 的尺寸是较长的尺寸优先牺牲自己的尺寸，而flex:auto 中是较长的尺寸优先扩展自己的尺寸。
所以，flex:1 更适合在等比例列表时使用，flex：auto适用于元素充分利用剩余空间，比如头部导航文字多少不一致时使用。
4.Eggs 中间件封装接口
5.flex 垂直居中
6.Vue React 框架不同点
react整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，所以在react中，是单向数据流。
而vue的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。
网友评论