今天还是把之前的面试题给总结一下吧，面试题系列均来自鱼皮的知识星球——编程导航

CSS 选择器有哪些？优先级分别是什么？

CSS 选择器可以根据不同的属性、标签名、类名、ID 等条件来选择页面中的元素，常用的选择器包括：

  1. 标签选择器：通过标签名选取元素，如 p、h1、div 等。
  2. 类选择器：以 “.” 开头，选取具有相同类名的元素，如 .red、.bold 等。
  3. ID 选择器：以 “#” 开头，选取具有相同 ID 的元素，如 #header、#content 等。
  4. 属性选择器：根据元素的属性值选取元素，如 [href]、[title]、[src] 等。
  5. 后代选择器：选取元素的后代元素，如 div p 选取所有 div 元素的后代 p 元素。
  6. 相邻兄弟选择器：选取元素的相邻兄弟元素，如 h1 + p 选取紧接在 h1 元素后面的 p 元素。
  7. 通用选择器：选取所有元素，使用 * 表示。

CSS 选择器的优先级按照如下规则计算：

  1. 标签内部样式（内联样式）具有最高优先级，其次是 ID 选择器，然后是类选择器和属性选择器，最后是标签选择器和通用选择器。
  2. 如果存在多个选择器的优先级相同，那么后面出现的选择器具有更高的优先级。
  3. !important 声明具有最高优先级。

使用 CSS 选择器，可以选择页面中的特定元素，并对其应用样式，从而实现对页面布局和样式的控制。

有哪些常见的 CSS 布局？

CSS 布局是指在网页上排版并定位元素的方式，常见的 CSS 布局包括：

  1. 盒模型布局：盒模型布局是指通过设置元素的 margin、padding、border 等属性，控制元素在页面中的位置和大小。
  2. 浮动布局：浮动布局是通过设置元素的 float 属性，使元素脱离文档流并向左或向右浮动，从而实现对页面布局的控制。
  3. 定位布局：定位布局是指通过设置元素的 position 属性为 relative、absolute 或 fixed，控制元素在页面上的位置。
  4. 弹性布局：弹性布局是通过设置元素的 display 属性为 flex 或 inline-flex，控制元素在页面中的位置和大小，从而实现响应式布局。
  5. 网格布局：网格布局是通过设置元素的 display 属性为 grid，使用网格线将页面分为若干行和列，控制元素在页面中的位置和大小。

以上是常见的 CSS 布局，开发者可以根据具体的需求和情况选择合适的布局方式，从而实现对页面布局和样式的控制。