HTML+CSS

1、css实现图片自适应宽高

背景图用background-size: contain，图片标签用object-fit: contain。

2、flex常用的属性及作用

参考资料

// flex container的属性
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: row nowrap; // 复合属性

justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: stretch | flex-start | flex-end | center | baseline
align-content: stretch | flex-start | flex-end | center | space-between | space-around;

// flex item的属性
order: 0 | 1 | -1 | 2 ...
flex-grow: 0 | 1 ...
flex-shrink: 0 | 1 ...
flex-basis: auto...
flex: 0 1 auto // flex-grow、flex-shrink、flex-basis的复合属性
align-self: auto | flex-start | flex-end | center | baseline | stretch;

3、BFC是什么

参考资料
BFC：块格式化上下文（Block Formatting Context，BFC）。
作用：清浮动，防止 margin 重叠。
简单理解：内部子元素再怎么翻江倒海都不会影响外部的元素（引自张鑫旭）。
详细说明：BFC可以理解为定义的一种规则，它有它自身的一些表现，最明显的表现就是：BFC内部的元素和外部的元素绝对不会互相影响。当BFC外部存在浮动时，它不会影响BFC内部Box的布局。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
如何创建BFC：
1、浮动元素
2、绝对或固定定位元素
3、inline-block、table、table-cell、table-caption等
4、overflow不为visible
5、弹性元素flex、inline-flex