1、怎么让一个不定宽高的 DIV，垂直水平居中？
答：
1）使用 CSS 方法：
父盒子设置：display：table-cell； text-align：center；vertical-align：middle；
Div 设置： display：inline-block；vertical-align：middle；
2）使用 CSS3 transform：
父盒子设置：display：relative
Div 设置： transform： translate(-50%，-50%)；position： absolute；top： 50%；left：
50%；
3）使用 flex布局：
父盒子设置：display：flex；justify-content：center；align-items：center；
4）使用 网格布局：
父盒子设置：display：grid；
Div 设置： justify-self：center；align-self：center；
2、position 几个属性的作用？
答：
position 的常见四个属性值： relative，absolute，fixed，static。一般都要配合"left"、“top”、“right”
以及 “bottom” 属性使用。
1）Static：默认位置，设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会
忽略任何 top、bottom、left 或 right 声明）。一般不常用。
2）Relative：位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，意思就
是如果设置了 relative 值，那么，它偏移的 top，right，bottom，left 的值都以它原来的位置为基准
偏移，而不管其他元素会怎么样。注意 relative 移动后的元素在原来的位置仍占据空间。
3）Absolute：位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。意
思就是如果它的父容器设置了 position 属性，并且 position 的属性值为 absolute 或者 relative，那么
就会依据父容器进行偏移。如果其父容器没有设置 position 属性，那么偏移是以 body 为依据。注
意设置 absolute 属性的元素在标准流中不占位置。
4）Fixed：位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口
滚动与否，元素都会留在那个位置。它始终是以 body 为依据的。 注意设置 fixed 属性的元素在标
准流中不占位置。
3、px，em，rem 的区别？
答：
1）px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长
度单位，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。
2）em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未
被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固
定的值。
3）rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字体大小时，
仍然是相对大小，但相对的只是 HTML 根元素。
4）区别：IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放，rem 相对的
只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修
改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了
IE8 及更早版本外，所有浏览器均已支持 rem。
4、什么是 BFC？
答：
1）定义：BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。
2）布局规则：
A. 内部的 Box 会在垂直方向，一个接一个地放置。
B. Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重
叠。
C. 每个元素的 margin box 的左边， 与包含块 border box 的左边相接触(对于从左往右的格式
化，否则相反)。即使存在浮动也是如此。
D. BFC 的区域不会与 float box 重叠。
E. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也
如此。
F. 计算 BFC 的高度时，浮动元素也参与计算。
3）哪些元素会生成 BFC：
A. 根元素
B. float 属性不为 none
C. position 为 absolute 或 fixed
D. display 为 inline-block， table-cell， table-caption， flex， inline-flex
F. overflow 不为 visible
5、CSS 引入的方式有哪些? link 和@import 的区别是?
答：
内联 内嵌 外链 导入
区别 ：同时加载
前者无兼容性，后者 CSS2.1 以下浏览器不支持
Link 支持使用 javascript 改变样式，后者不可
来源：https://blog.csdn.net/weixin_45674894/article/details/102779676