李钟意讲前端

外观

咨询/接单/付费bug修复/学习交流群

2023-07-14 前端面试题 ​

2023-07-14-css.doc

  1. CSS position 有几个值？
  2. CSS 盒子模型？
  3. CSS 包含块是什么？
  4. CSS 选择器优先级？
  5. CSS 动画用过吗？

CSS position 属性有以下五个值： ​

1.static：这是默认值。元素按照在 HTML 文档流中的正常位置进行布局。top、right、bottom、left和z-index属性将无效。

  1. relative：元素首先按照正常流进行布局，然后根据top、right、bottom和left属性的值进行偏移。偏移不会影响其他元素的位置。

  2. absolute：元素的位置相对于最近的已定位祖先元素（即position值为relative、absolute、fixed或sticky的元素）进行定位。如果没有已定位的祖先元素，那么它的位置相对于初始包含块。元素的位置通过top、right、bottom和left属性进行指定。

4.fixed：元素的位置相对于浏览器窗口进行定位，即使页面滚动，它仍然会停留在同一的位置。元素的位置通过top、right、bottom和left属性进行指定。

  1. sticky：元素根据用户的滚动位置进行定位。它基于用户的滚动位置在relative和fixed定位之间切换。也就是说，它在滚动在某一范围内时表现为相对定位，而当元素在设定的滚动范围之外时则表现为固定定位。

要注意，z-index属性只在position属性为absolute、fixed或relative时生效。

CSS 盒子模型？ ​

CSS 盒子模型是一种用于描述设计和布局中 HTML 元素所占空间的概念模型。

在 CSS 盒子模型中，每个元素被表示为一个矩形盒子，包含以下几个部分（从内到外）：

  1. 内容（Content）：这是元素的实际内容，如文本、图片等，由width和height属性决定。

  2. 填充（Padding）：围绕内容的空间，这个区域的背景色会被背景图片或背景颜色覆盖。由padding属性控制。

  3. 边框（Border）：围绕在内边距和内容外的边框。由border属性控制。

  4. 外边距（Margin）：在边框外的空白区域，用来将元素与其他元素分开。由margin属性控制。

默认情况下，元素的width和height只包括内容的宽度和高度，不包括内边距、边框和外边距。这意味着如果你设置了元素的宽度和高度，然后添加内边距、边框或外边距，那么元素的总宽度和总高度将会比你设置的值大。

然而，你可以通过设置box-sizing属性为border-box来改变这种行为。当box-sizing设置为border-box时，元素的width和height将包括内容、内边距和边框，但不包括外边距。这就意味着添加内边距和边框不会影响元素的总宽度和总高度。

理解 CSS 盒子模型对于掌握布局和设计的 CSS 技巧非常重要。

CSS 包含块是什么？ ​

在 CSS 中，包含块（containing block）是一个很重要的概念，用于确定一个元素的布局和定位。

一个元素的包含块是由其最近的祖先元素计算得到的矩形盒，这个祖先元素也可以是块级元素或定位元素（position为relative、absolute或fixed）。对于特定类型的元素，包含块的计算方法有所不同：

1.对于position为static、relative或sticky的元素，包含块通常由其最近的块级（例如display设置为block或flex）祖先元素的内容边界构成。

2.对于position为absolute的元素，包含块由其最近的position设置为非static（也就是relative、absolute、fixed或sticky）的祖先元素的内边距边界构成。

3.对于position为fixed的元素，包含块是视窗（也就是 viewport）本身。

  1. 对于根元素（HTML 元素）或者position属性为fixed或sticky且其父元素不是滚动容器的元素，其包含块是初始化包含块，由视口边缘形成，考虑滚动条的存在。

包含块的概念在处理元素的定位、浮动、溢出以及一些其他布局特性时都会起到关键作用。

CSS 选择器优先级 ​

在 CSS 中，当多个规则可以应用于同一元素时，需要根据每个规则的特异性或优先级来确定哪个规则会被应用。选择器的优先级按照以下顺序进行评定：

  1. !important: 无论何时，都会覆盖其他任何声明，除非有另一个!important在后面覆盖它。

  2. 内联样式: 在 HTML 元素内部的style属性里定义的样式（例如，<div style="color: red">）。这种样式的优先级高于任何在外部 CSS 文件中定义的样式。

  3. ID 选择器: 使用元素的 id 选择元素（例如，#myId）。这个选择器的优先级比类选择器、属性选择器和标签选择器高。

  4. 类选择器、属性选择器和伪类: 使用元素的 class 名选择元素（例如，.myClass），或者使用元素的属性选择元素（例如，[type="text"]），或者使用元素的伪类选择元素（例如，:hover）。这些选择器的优先级比标签选择器和伪元素高。

  5. 标签选择器和伪元素: 使用元素的标签名选择元素（例如，div），或者使用伪元素选择元素（例如，::before）。这些选择器的优先级是最低的。

  6. 通配符选择器(*)、关系选择器（+, ~, >, 空格）、否定伪类（:not()）等对特异性没有影响。

在相同的优先级中，后出现的规则会覆盖先出现的规则。如果优先级相同，那么源代码中后出现的规则会覆盖先出现的规则。

在计算优先级时，可以将内联样式、ID 选择器、类选择器/属性选择器/伪类、标签选择器/伪元素的数量视为一个"a-b-c-d"的四位数，比如如果有一个 ID（b=1），两个类选择器（c=2）和一个标签选择器（d=1），则该规则的优先级为 0-1-2-1。当比较两个规则的优先级时，从左到右进行比较，直到找出优先级较高的规则为止。

需要注意的是，使用!important声明的样式优先级最高，可以覆盖其他所有样式，除非后面还有更高级别的!important声明。然而过度使用!important会导致样式难以维护，因此应尽量避免使用。

CSS 动画用过吗？ ​

CSS 动画可以通过两个主要的方法创建：使用transition属性或@keyframes规则和animation属性。

  1. transition：这种方法常用于在状态改变时产生动画效果。例如，当鼠标悬停在一个元素上时，你可以改变元素的颜色，并使用transition让这种颜色变化在一段时间内平滑发生，而不是立即发生。以下是一个简单的示例：

    css
    .my-element {
  background-color: blue;
  transition: background-color 0.5s ease;
}

.my-element:hover {
  background-color: red;
}

    在这个例子中，.my-element的背景颜色将在 0.5 秒内平滑地从蓝色过渡到红色，当鼠标悬停在元素上时。

  2. @keyframes和animation：这种方法用于创建更复杂的动画，可以在多个关键帧上定义元素的样式。以下是一个简单的示例：

    css
    @keyframes my-animation {
  0% {
    background-color: blue;
  }
  50% {
    background-color: red;
  }
  100% {
    background-color: green;
  }
}

.my-element {
  animation: my-animation 2s infinite;
}

    在这个例子中，.my-element的背景颜色将在 2 秒内从蓝色过渡到红色，然后过渡到绿色，然后这个过程将无限次重复。

transition和@keyframes/animation提供了创建动态和引人注目的网页的强大工具。然而，动画可能会对性能产生影响，因此应谨慎使用。在可能的情况下，应优先使用transform和opacity的动画，因为浏览器可以对它们进行优化。