2020-08-09

1.块级格式化上下文（BFC,blockformattingcontext）
它是一个独立的渲染区域，它规定了在该元素中，常规流块盒的布局。BFC的渲染区域：这个区域由某个HTML元素创建，以下元素会在其内部创建BFC：根元素（html）；浮动和绝对定位；overflow不等于visible的块盒。不同BFC它们进行渲染时互不干扰创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染也不会影响到外部。规则：创建BFC的元素，它的自动高度需要计算浮动元素（清除浮动）创建BFC的元素，它的边框盒不会与浮动元素重叠。创建BFC的元素，不会和它的子元素进行外边距合并（加在父元素）。
2.重置文件的作用：引用后在不同的浏览器中把标签重置为成默认的样式，先引用重置文件，再引用自己写的CSS。
3.Flex弹性布局设置flex布局，display设置为flex，当前标签为容器，所有子元素为项目，功能：所有子元素在一行显示。默认情况下，主轴为横轴，起点在左，终点在右，交叉轴为竖轴，起点在上，终点在下容器里的属性：主轴方向：flex-direction（设置主轴的方向）：row默认值，项目从左到右依次摆放，column项目从上到下依次摆放，加“-reverse”方向相反。flex-wrap（设置换不换行）：nowrap默认值，都在一行显示；wrap换行；注：主轴是水平方向，条件是所有项目的宽度之和大于容器的宽度；主轴是垂直方向，条件，所有项目的高度之和超出容器高度flex-flow：是direction和wrap的缩写方式，例子：flex-flow：column“空格”wrap；justify-content（主轴方向上的对齐方式）：flex-start（默认值），左对齐；flex-end，右对齐；center居中；space-between两端对齐，项目之间的间隔都相等；space-around分散对齐，每个项目两侧相等，项目之间的间隔比项目与边框大一倍（先计算剩余空间，将剩余空间除以所有项目的个数，平均分配到每个项目的左右）；space-evenly平均分配均匀排列每个元素，每个元素之间的间隔相等。（以上主轴是横轴，当主轴方向是竖轴时，情况类似）。交叉轴方向（默认是垂直方向）：align-items（定义项目在交叉轴上如何对