帅地
帅地

42道CSS高频题整理(附答案背诵版)

1、简述CSS3选择器优先级及计算？

CSS的选择器优先级是一个相对复杂的概念，它规定了在一组样式冲突时，哪些样式将被浏览器采纳。选择器优先级是通过一个四位的值来计算的，形式为：[内联样式, ID选择器, 类选择器/属性选择器/伪类, 元素选择器/伪元素]。这四个等级的优先级从左到右递减，左边的优先级最高，右边的优先级最低。

  1. 内联样式：直接在HTML元素中的"style"属性里定义的样式，优先级最高，记为1000。
  2. ID选择器：通过元素的id选择元素，记为0100。
  3. 类选择器、属性选择器、伪类：通过元素的class、属性或者伪类选择元素，记为0010。
  4. 伪元素、元素选择器：通过元素名称或者伪元素选择元素，记为0001。

比如：

  • h1 { color: red; } // 优先级为0001
  • .class { color: blue; } // 优先级为0010
  • #id { color: green; } // 优先级为0100
  • < p style=“color: yellow;”> // 优先级为1000

如果一个选择器同时包含多个部分，那么优先级就是这些部分的和。比如：#id .class h1 { color: black; } 的优先级为0111 (0100 + 0010 + 0001)。

在实际应用中，如果我们想要覆盖掉某些已经定义好的样式，就需要利用这个优先级规则，通过增加选择器的优先级来实现。

需要注意的是，!important规则的优先级最高，它可以覆盖所有其他的样式，但是过度使用可能会导致代码难以维护，所以一般情况下我们应尽量避免使用。

2、详细说明CSS3新特性 ？

CSS3引入了许多新特性，使得前端开发者能够创建更加丰富和交互性强的网页。以下是一些主要的新特性：

  1. 选择器：CSS3引入了许多新的选择器，例如属性选择器、结构伪类选择器、否定伪类选择器等，这些新的选择器使得开发者能够更精准地选中需要的元素。

  2. 盒模型：CSS3引入了box-sizing属性，使得开发者能够更方便地控制元素的大小。此外，还引入了flex布局和grid布局，大大增强了CSS的布局能力。

  3. 颜色：CSS3支持更多种类的颜色值，例如RGBA、HSLA等，这些颜色值支持透明度设置，使得颜色控制更加灵活。

  4. 渐变：CSS3支持线性渐变（linear-gradient）和径向渐变（radial-gradient），使得开发者能够创建更丰富的背景效果。

  5. 阴影：CSS3引入了box-shadow和text-shadow属性，使得开发者能够为元素和文本添加阴影效果。

  6. 2D/3D转换：CSS3的transform属性支持2D和3D转换，使得开发者能够创建出各种各样的动画效果。

  7. 过渡和动画：CSS3的transition属性和animation属性支持过渡和动画效果，使得元素状态的变化能够更加平滑和生动。

  8. 媒体查询：CSS3的媒体查询功能使得开发者能够根据设备的特性（例如屏幕宽度、设备类型等）来应用不同的样式，这对于响应式设计非常重要。

以上只是CSS3新特性的一部分，还有许多其他的新特性等待开发者去发现和利用。

3、Padding和Margin有什么区别？

Padding 和 Margin 都是 CSS 中用来控制元素周围空白区域的属性，但它们的用途和效果有一些不同。

  1. Padding（内边距）：Padding 是元素的内边距，它位于元素的边框和内容之间。增加 Padding 可以增大元素的总尺寸，因为 Padding 是添加到元素内容的宽度和高度之上的。如果元素有背景色或背景图，Padding 区域也会显示这个背景。

    例如：

    div {
  background-color: lightblue;
  padding: 10px;
}

    这会创建一个 div，其内容周围有 10px 的 lightblue 背景色区域。

  2. Margin（外边距）：Margin 是元素的外边距，它位于元素的边框和其他元素之间。增加 Margin 不会增大元素本身的尺寸，但会增大元素周围的空白区域。Margin 区域是透明的，不显示元素的背景色或背景图。

    例如：

    div {
  background-color: lightblue;
  margin: 10px;
}

    这会创建一个 div，其周围有 10px 的透明区域，这个区域会将 div 与其他元素分开。

总结一下，Padding 是元素的内部空间，它会影响元素的尺寸，并且会显示元素的背景。Margin 是元素的外部空间，它不影响元素的尺寸，只影响元素与其他元素的距离，并且不显示元素的背景。

4、CSS引入的方式有哪些? link和@import的区别是?

CSS可以通过以下三种方式引入：

  1. 内联样式：直接在HTML元素中使用"style"属性来定义样式。这种方法的优先级最高，但不利于样式的复用和维护。
    例如：

    <div style="color: red;">This is a red text.div>

  2. 内部样式：在HTML文档的中使用