CSS

1. flex 和 grid区别

   flex 注重的是一维的排列，例如行和列，它的布局方向是沿着主轴或交叉轴排列，通常是根据内容驱动的，子元素大小可以影响整体的布局，它注重控制的是元素之间如何分配空间。

   grid 注重的是二维的排列，它有行和列的概念，通常我们会定义好网格的属性，再将项目放入对应的网格中，它注重控制元素在网格中的确切位置

   grid 通常用来处理整体布局，例如整个页面的布局。用 grid 实现例如九宫格这样的数据排列比 flex 更好，因为当我们需要将 3 x 3更改为其他布局时，只需要修改行和列的属性。如果用 flex 实现则需要手动控制换行和子元素的宽度

2. 盒子模型

   1. 标准盒子模型：总宽高 = 内容 content + pading + border + margin
   2. IE盒子模型：总宽高 = (content + padding + border) + margin

3. BFC: 块级格式化上下文

4. 设置居中：

   1. 未知宽高：父元素flex 子元素；子元素 margin： auto
   2. 已知宽高：left 50 % margin 负一半

5. 实现 4 x 4，每个元素都是 16:9

   1. grid + aspect-ratio

   2. grid + padding-top / padding-bottom

      当padding设置百分比时，参照的是父元素的宽度，所以我们需要一个额外的容器来设置宽和padding，然后将我们想要的元素在该容器中绝对定位

6. 移动端适配方案

   1. rem：相对于根元素的字体大小。我们会用js动态计算根元素的font-size, 使其与设备视口宽度成比例

      优点

      1. 等比例缩放
      2. 易于计算
      3. 兼容性好
      4. 与字体大小相关

      缺点

      1. 需要js配合，js加载之前以默认字号渲染，导致闪烁
      2. 字体大小
      3. 精确度问题

   2. vw

      1. 无需js介入
      2. 避免闪烁
      3. 精准
      4. 完美适配

7. 1px 问题

   1. 原因：物理像素和逻辑像素的区别，高dpr设备下会存在该问题
   2. 解决办法：
      1. 伪元素充当边框，媒体查询dpr来transform
      2. svg
      3. 图片

8. css模块化

   1. bem
   2. css module
   3. css-in-js