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

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 布局,开发者可以根据具体的需求和情况选择合适的布局方式,从而实现对页面布局和样式的控制。