1. 说一下CSS的盒模型。

在HTML页面中所有的元素都可以看成是一个盒子。
盒子的组成：内容content、内边距padding、边框border、外边距margin。
盒模型的类型：

• 标准盒模型：width = content
• IE盒模型（怪异盒模型）：width = content + padding + border
  控制盒模型的模式：border-sizing: content-box(默认值，标准盒模型)、border-box(IE盒模型)。

2. CSS选择器的优先级

CSS的特性：继承性、层叠性、优先级
标签、类/伪类/属性、全局选择器、行内样式、id、!important
优先级： !important > 行内样式 > id > 类/伪类/属性 > 标签 > 全局选择器

3. 隐藏元素的方法有哪些

• display: none; 元素在页面上消失，不会占据空间。
• opacity: 0; 设置元素的透明度为0，元素不可见，占据空间位置。
• visibility: hidden; 元素在页面上消失，占据空间位置，一种不可见的状态。
• position: absolute; 设置定位，移出可见区域。
• clip-path

4. px、rem、em的区别是什么？

• px是像素，显示器上给我们呈现画面的像素，每个像素的大小是一样的，绝对单位长度。
• rem，相对单位，相对于html根节点的font-size的值，直接给html节点的font-size: 62.5%; 1rem = 10px; (16px * 62.5% = 10px)
• em，相对单位，相对于父元素的font-size的值。

5. 重排和重绘有什么区别？

重排必定会引发重绘

• 重排（回流）：布局引擎会根据所有的样式计算出盒模型在页面上的位置和大小。
• 重绘：计算好盒模型的位置、大小和其他一些属性后，浏览器会根据每个盒模型的的特性进行绘制。
  浏览器的渲染机制：
• 对DOM元素的大小、位置进行修改后，浏览器需要重新计算元素的几何信息，会触发重排。
• 只对DOM的样式进行修改，比如color和background-color，浏览器不需要重新计算DOM元素的集合信息，直接绘制了该元素的新样式。这时会触发重绘。

6. 元素水平垂直居中的方式有哪些？

1. flex
2. absolute + margin
3. absolute + transform
4. gird
5. table

7. CSS属性中有那些可以被继承，那些不可以被继承？

• 能够继承的属性：

1. 字体系列的属性：font-size、font-family、font-weight、font-style;
2. 文本系列的属性：

1. 内联元素：color、line-height、word-spacing、letter-spacing、text-transform;
2. 块级元素：text-align、text-indent、

3. 元素可见性：visibility

• 不能被继承的属性：

1. 盒子模型的属性：width、height、margin、padding、border；
2. 背景属性：background、background-color、background-image
3. 定位属性：float、clear、position、top、left、right、bottom、overflow、min-width、max-width、min-height、max-height;

8. CSS预处理器？

LESS、SASS
CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。
优点：提高代码复用率和可维护性
缺点：需要引入编译过程 有学习成本

9. grid布局基础知识

1. grid布局的基本概念
   grid容器：采用grid布局的父元素。
grid项目：grid布局中每个格子内部放置的元素。
grid内容：显示项目的区域。
   行：横向
   列：纵向
   网格线：网格布局中横向和纵向的线条。
   单元格：横纵线交汇的区域被称为单元格。
   间距：网格与网格之间的距离被称为间距。
2. 容器属性

• 容器划分行列
  • 取值为数值
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
  • 取值百分比
    grid-template-rows: 20% 30% 50%;
    grid-template-columns: 20% 30% 50%;
  • 重复函数 repeat
    grid-template-rows: repeat(3, 20%);
    grid-template-columns: repeat(3, 100px);
  • 自动填充
    grid-template-rows: repeat(auto-fill, 15%);
    grid-template-columns: repeat(auto-fill, 15%);
  • auto自动
    grid-template-rows: 100px auto 100px;
    grid-template-columns: 100px auto 100px;
  • fr片段划分
    grid-template-rows: 1fr 2fr 3fr;
    grid-template-columns: 1fr 2fr 3fr;
  • minmax()
    grid-template-rows: 200px 200px minmax(100px, 200px);
    grid-template-columns: 200px 200px minmax(100px, 200px);
• 调整间距
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  grid-gap: 20px 10px;
  gap: 30px 10px;
• 容器内内容的对齐方式
  justify-content: center;
  align-content: center;
  place-content: center;
  place-content: space-between space-evenly;
  取值范围：start、end、center、space-around（间距环绕）、space-between（两端对齐）、space-evenly（间距平分）。
• 网格内项目的对齐方式
  justify-items: center;
  align-items: center;
  place-items: center;

4. 项目属性

• 合并单元格属性
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row: 1/2;
  grid-column: 4/6;
• 单个项目位置

```justify-self 和 align-self`justify-self` 属性设置单元格内容的水平位置（左中右），跟 `justify-items` 属性的用法完全一致，但只作用于单个项目。`align-self` 属性设置单元格内容的垂直位置（上中下），跟 `align-items` 属性的用法完全一致，也是只作用于单个项目。.item {justify-self: start | end | center | stretch;align-self: start | end | center | stretch;/* 简写 place-self: <align-self> <justify-self>; */}
```

注意点：复合属性的书写都是先上下再左右