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

2023-12-18 22:24:39

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-shadowtext-shadow属性,使得开发者能够为元素和文本添加阴影效果。

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

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

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

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

3、Padding和Margin有什么区别?

PaddingMargin 都是 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文档的<head>中使用<style>标签来定义样式。这种方法可以在一个HTML文档中复用样式,但在多个HTML文档中仍然需要重复定义。
    例如:

    <head>
      <style>
        .red-text {
          color: red;
        }
      </style>
    </head>
    <body>
      <div class="red-text">This is a red text.</div>
    </body>
    
  3. 外部样式:通过<link>标签或者@import规则来引入外部的CSS文件。这种方法可以在多个HTML文档中复用样式,是最推荐的方法。
    例如:

    <head>
      <link rel="stylesheet" href="styles.css">
    </head>
    

    或者

    <head>
      <style>
        @import url('styles.css');
      </style>
    </head>
    

<link>@import的主要区别在于:

  1. 加载顺序<link>是HTML方式,与页面同时加载;@import是CSS方式,需要等到页面加载完才加载CSS。

  2. 兼容性<link>标签几乎被所有浏览器所支持;@import是CSS2.1提出的,低版本的浏览器可能不支持。

  3. 使用限制<link>可以定义RSS等其他事务;@import只能加载CSS。

  4. DOM可控<link>是HTML标签,因此可以通过JS操作DOM,插入标签来改变样式;而@import不行。

因此,一般情况下更推荐使用<link>方式来引入CSS。

5、简述CSS选择符有哪些?

CSS选择符(或称选择器)是用来选中页面中特定元素并应用样式的工具。以下是主要的CSS选择器:

  1. 元素选择器:这是最基础的选择器,它根据HTML元素的类型进行选择。例如,h1 { color: blue; }会将所有的h1元素的文字颜色设置为蓝色。

  2. ID选择器:通过元素的id属性进行选择,id选择器在CSS中具有很高的优先级。例如,#myId { color: blue; }会将id为myId的元素的文字颜色设置为蓝色。

  3. 类选择器:通过元素的class属性进行选择。例如,.myClass { color: blue; }会将class为myClass的所有元素的文字颜色设置为蓝色。

  4. 属性选择器:通过元素的属性进行选择。例如,[href] { color: blue; }会将所有含有href属性的元素的文字颜色设置为蓝色。

  5. 后代选择器:选中某元素的后代元素。例如,div p { color: blue; }会将所有在div元素内部的p元素的文字颜色设置为蓝色。

  6. 子元素选择器:选中某元素的直接子元素。例如,div > p { color: blue; }会将所有直接在div元素下一级的p元素的文字颜色设置为蓝色。

  7. 相邻兄弟选择器:选中某元素的下一个兄弟元素。例如,h1 + p { color: blue; }会将所有紧跟在h1元素后面的p元素的文字颜色设置为蓝色。

  8. 通用选择器:选中所有元素。例如,* { color: blue; }会将所有元素的文字颜色设置为蓝色。

此外,CSS3还引入了一些新的选择器,如:

  • 结构伪类选择器:例如:first-child:last-child:nth-child()等,用来选择特定位置的元素。
  • 否定伪类选择器:例如:not(),用来选择除某些元素以外的元素。
  • 伪元素选择器:例如::before::after,用来选择元素的一部分,或者在元素前后插入内容。

以上只是一部分选择器,CSS中还有许多其他的选择器等待你去发现和使用。

6、CSS居中(包括水平居中和垂直居中)的方案有哪些 ?

CSS中实现元素居中的方法很多,具体的方法取决于你的布局需求和要居中的元素的特性。以下是一些常见的水平居中和垂直居中的方法:

  1. 行内元素的水平居中:可以通过设置父元素的 text-align: center; 来实现。

  2. 块级元素的水平居中:如果元素的宽度已知,可以通过设置 margin-leftmargin-rightauto 来实现。

  3. 绝对定位元素的水平居中:如果元素使用了绝对定位,可以通过设置 left: 50%;transform: translateX(-50%); 来实现。

  4. Flex布局的水平居中和垂直居中:设置父元素为Flex布局,然后通过 justify-content: center;(水平居中)和 align-items: center;(垂直居中)来实现。

  5. 单行文本的垂直居中:可以通过设置 line-height 等于元素的高度来实现。

  6. 绝对定位元素的垂直居中:如果元素使用了绝对定位,可以通过设置 top: 50%;transform: translateY(-50%); 来实现。

  7. Grid布局的水平居中和垂直居中:设置父元素为Grid布局,然后通过 justify-items: center;(水平居中)和 align-items: center;(垂直居中)来实现。

以上只是一部分方法,CSS中还有许多其他的方法可以实现元素的居中。不同的方法有各自的优点和适用场景,需要根据实际需求来选择合适的方法。

7、解释CSS的盒子模型?

CSS的盒模型是一个用于设计和布局的基本概念,它将HTML元素视为一个矩形的盒子,这个盒子由内到外包含以下几个部分:

  1. 内容(Content):这是盒子里面的实际内容,比如文本、图片等,由widthheight属性定义。

  2. 内边距(Padding):围绕在内容周围的空间,由padding属性定义。内边距是可选的,它的大小会影响到元素的最终尺寸,因为它会增加到内容的宽度和高度上。

  3. 边框(Border):围绕在内边距和内容外的线,由border属性定义。边框是可选的,它的大小同样会影响到元素的最终尺寸。

  4. 外边距(Margin):围绕在边框外部的空间,由margin属性定义。外边距是可选的,它不会影响元素本身的尺寸,但会影响元素与其他元素的距离。

在CSS中,盒模型的尺寸计算有两种模式:标准模式和怪异模式(Quirks Mode)。在标准模式下,元素的总宽度(或高度)= 内容宽度(或高度)+ 左右(或上下)内边距 + 左右(或上下)边框。在怪异模式下,元素的总宽度(或高度)= 内容宽度(或高度),但内容宽度(或高度)包含了左右(或上下)的内边距和边框。

CSS3引入了一个新的box-sizing属性,通过设置这个属性为border-box,可以使元素始终按照怪异模式来计算尺寸,这在很多情况下会使布局更加方便。

8、CSS 选择符有哪些?哪些属性可以继承?

CSS 选择符(选择器)的种类非常多,下面是一些常见的选择器:

  1. 元素选择器:选择特定类型的HTML元素,例如pdivh1等。

  2. 类选择器:通过元素的class属性进行选择,例如.myClass

  3. ID选择器:通过元素的id属性进行选择,例如#myId

  4. 属性选择器:通过元素的属性进行选择,例如[href][type="text"]等。

  5. 子代选择器:选择某元素的直接子元素,例如div > p

  6. 后代选择器:选择某元素的所有后代元素,例如div p

  7. 相邻兄弟选择器:选择某元素的下一个兄弟元素,例如h1 + p

  8. 一般兄弟选择器:选择某元素后面所有的兄弟元素,例如h1 ~ p

  9. 伪类选择器:选择特定状态的元素,例如:hover:focus:active:visited:first-child等。

  10. 伪元素选择器:选择元素的某个部分,或者在元素前后插入内容,例如::before::after::first-letter等。

CSS中,有一些属性是可以继承的,这意味着如果没有为某个元素指定这些属性,那么它会继承其父元素的属性值。可以继承的属性有很多,下面是一些常见的可以继承的属性:

  • 文本相关的属性,如colorfontletter-spacingline-heighttext-aligntext-indenttext-transform等。
  • 列表相关的属性,如list-stylelist-style-typelist-style-positionlist-style-image等。
  • 表格布局相关的属性,如border-collapseborder-spacing等。
  • 光标相关的属性,如cursor等。
  • 可见性相关的属性,如visibility等。

但是大多数盒模型相关的属性(如widthheightmarginpaddingborder等)和定位相关的属性(如positiontopbottomleftrightz-index等)是不可继承的。具体哪些属性可以继承,可以查阅相关的CSS文档。

9、请阐述CSS3新增伪类举例?

CSS3 引入了许多新的伪类,这些伪类提供了更加强大的选择器功能,使得我们可以更加方便地选择到特定的元素。以下是一些常见的CSS3新增伪类:

  1. :nth-child(n): 选取每个父元素下的第n个子元素。例如,p:nth-child(2) 会选取每个父元素下的第二个 <p> 元素。
p:nth-child(2) {
  color: red;
}

以上代码将会使得每个父元素的第二个 <p> 元素的文本颜色为红色。

  1. :nth-last-child(n): 这个伪类的作用与 :nth-child(n) 类似,但是它是从后往前计数的。例如,p:nth-last-child(1) 会选取每个父元素下的最后一个 <p> 元素。

  2. :last-child: 选取每个父元素的最后一个子元素。例如,p:last-child 会选取每个父元素的最后一个 <p> 元素。

  3. :first-of-type: 选取父元素的第一个特定类型的子元素。例如,p:first-of-type 会选取每个父元素的第一个 <p> 元素。

  4. :last-of-type: 选取父元素的最后一个特定类型的子元素。例如,p:last-of-type 会选取每个父元素的最后一个 <p> 元素。

  5. :nth-of-type(n): 选取父元素的第n个特定类型的子元素。例如,p:nth-of-type(2) 会选取每个父元素的第二个 <p> 元素。

  6. :nth-last-of-type(n): 这个伪类的作用与 :nth-of-type(n) 类似,但是它是从后往前计数的。例如,p:nth-last-of-type(1) 会选取每个父元素下的最后一个 <p> 元素。

  7. :only-child: 选取父元素下唯一的子元素。例如,如果一个元素下只有一个 <p> 元素,那么 p:only-child 就可以选取到这个 <p> 元素。

  8. :only-of-type: 选取父元素下唯一的特定类型的子元素。例如,如果一个元素下只有一个 <p> 元素,那么 p:only-of-type 就可以选取到这个 <p> 元素。

  9. :empty: 选取不包含子元素或者文本的元素。

以上就是CSS3新增的一些伪类,它们使得我们能够更加灵活地选择到页面上的特定元素。

10、为什么要初始化CSS样式?

初始化 CSS 样式,也被称为 CSS Reset,主要是为了解决不同浏览器之间的默认样式差异问题。因为不同浏览器对于一些标签的默认样式可能会有所不同,这可能会导致你的网页在不同的浏览器下看起来不一样。

例如,某些浏览器可能会对 <h1> 标签应用较大的外边距,而其他浏览器可能不会。如果你没有明确设置 <h1> 标签的外边距,那么它在不同浏览器下可能会有不同的显示效果。

初始化 CSS 样式的方法通常是在你的 CSS 文件的开始部分,添加一段 CSS 代码,明确设置所有元素的一些基本样式,例如外边距,内边距,字体大小等。这样可以确保你的网页在所有浏览器下都有一致的基本样式。

例如,以下是一个非常简单的 CSS 初始化代码:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

以上代码将所有元素的外边距和内边距设置为0,并且设置所有元素的盒模型为 box-sizing。这样可以确保你的布局在不同浏览器下都有一致的效果。

总的来说,初始化 CSS 样式是为了解决浏览器之间的样式差异,确保你的网页在所有浏览器下都有一致的显示效果。

11、使用 CSS 预处理器的优缺点有哪些?

CSS 预处理器如 Sass、Less 和 Stylus 等,可以帮助我们编写更加结构化、可维护的 CSS 代码,提高开发效率。它们的优缺点如下:

优点:

  1. 嵌套语法:CSS 预处理器支持选择器的嵌套,这使得我们的 CSS 代码更加结构化,更易于阅读和维护。

  2. 变量和混合:CSS 预处理器允许我们定义可重用的 CSS 规则和值。例如,我们可以定义一个颜色变量,然后在整个样式表中使用这个变量,如果需要改变这个颜色,只需要改变变量的值即可。

  3. 函数和运算:CSS 预处理器支持一些编程特性,如条件语句,循环,函数等,使得我们可以编写更加动态的 CSS 代码。

  4. 导入和模块化:CSS 预处理器支持导入其他 CSS 文件,这使得我们可以将 CSS 代码分割成多个小的、可重用的模块,提高代码的可维护性。

  5. 厂商前缀自动化:一些 CSS 预处理器支持自动添加厂商前缀,这可以帮助我们解决 CSS3 在不同浏览器下的兼容性问题。

缺点:

  1. 需要编译:CSS 预处理器的代码需要编译成 CSS 代码才能在浏览器中运行,这增加了开发流程的复杂性。

  2. 学习成本:虽然 CSS 预处理器的语法通常都比较简单,但是对于初学者来说,还是需要花一些时间来学习。

  3. 调试困难:因为浏览器读取的是编译后的 CSS 文件,所以当出现问题时,直接在浏览器端调试可能会比较困难。不过现在有 Source Maps 技术可以映射到原始的预处理器文件,缓解了这个问题。

  4. 可能导致过度设计:CSS 预处理器的强大功能,如果使用不当,可能会导致过度设计,生成冗长和复杂的 CSS 代码。

总的来说,选择是否使用 CSS 预处理器,主要取决于项目的需求和团队的技术栈。

12、你用过媒体查询,或针对移动端的布局/CSS吗?

是的,我非常熟悉媒体查询和针对移动端的布局/CSS。

媒体查询是 CSS3 的一个重要特性,它允许我们根据设备的特性,如视窗宽度,像素密度等,来应用不同的 CSS 规则。这在创建响应式设计的网站时非常有用,因为我们可以根据用户设备的屏幕大小来调整布局和样式。

例如,以下的 CSS 代码会将视窗宽度小于600px的设备的背景颜色设置为灰色:

@media (max-width: 600px) {
  body {
    background-color: lightgray;
  }
}

针对移动端的布局/CSS,我们通常需要考虑的问题有:

  1. 触摸友好:移动设备主要通过触摸来操作,所以我们需要确保所有的可点击的元素都足够大,且有足够的间距,以避免误点击。

  2. 简洁的设计:移动设备的屏幕通常较小,所以我们需要保持设计的简洁,避免过多的元素导致界面显得拥挤。

  3. 优化图片:移动设备的网络连接可能较慢,所以我们需要优化图片,减少页面的加载时间。

  4. 流式布局:使用百分比、flexbox、grid 等技术来创建可以自适应屏幕大小的布局。

总的来说,媒体查询和针对移动端的布局/CSS 是现代前端开发中非常重要的技能。

13、简述写高效CSS时会有哪些问题需要考虑?

编写高效的 CSS 是一项重要的技能,需要考虑的问题包括但不限于以下几点:

  1. 选择器性能:尽量避免使用过于复杂的选择器,尤其是深度嵌套的选择器,因为它们会影响浏览器的渲染性能。通常来说,ID 选择器、类选择器和标签选择器的性能都比较好。

  2. 避免冗余代码:尽量避免编写重复的 CSS 规则,可以使用 CSS 预处理器的混合或 CSS 自定义属性来重用 CSS 规则。

  3. 代码组织:合理地组织你的 CSS 代码,可以提高代码的可读性和可维护性。你可以按功能、组件或者页面来组织你的 CSS 代码。

  4. 使用 CSS 预处理器:CSS 预处理器如 Sass、Less 和 Stylus 等,可以帮助你编写更加结构化、可维护的 CSS 代码。

  5. 媒体查询的使用:媒体查询可以帮助你创建响应式的布局,但是过度使用媒体查询可能会导致 CSS 代码变得复杂。一个好的做法是先设计移动版的布局,然后使用媒体查询来适应更大的屏幕。

  6. CSS 动画性能:并非所有的 CSS 属性都适合用来创建动画,一些属性的变化可能会导致浏览器重新布局或者重绘,这会影响动画的性能。通常来说,使用 transformopacity 来创建动画的性能比较好。

  7. 使用外部样式表:将 CSS 代码放在外部样式表中,可以利用浏览器的缓存机制,减少页面的加载时间。

  8. 减少 HTTP 请求:可以使用 CSS 雪碧图或者字体图标来减少 HTTP 请求的数量,提高页面的加载速度。

以上就是编写高效 CSS 时需要考虑的一些问题,希望对你有所帮助。

14、解释下浏览器是如何判断元素是否匹配某个CSS选择器?

浏览器判断元素是否匹配某个 CSS 选择器的过程,实际上是从右向左进行的。这种方式可以更快地确定是否有元素匹配选择器。

例如,对于选择器 div p span,浏览器首先会查找所有的 <span> 元素,然后向上查找其父元素是否有 <p> 元素,如果有,再继续向上查找其父元素中是否有 <div> 元素。如果所有条件都满足,则该 <span> 元素就匹配这个选择器。

这种从右向左的匹配方式的优点是,可以尽早地排除大部分不匹配的元素。因为页面中的大部分元素都是叶子节点(即没有子元素的节点),例如 <span><a><img> 等,如果从左向右匹配,可能会浪费大量时间去检查这些元素和其子元素,但是实际上它们大部分都不会匹配选择器。从右向左匹配则可以尽早地排除这些元素,提高匹配的效率。

需要注意的是,虽然选择器的匹配效率很重要,但是通常不会对页面的性能产生太大影响。相比之下,选择器的复杂性以及相应规则的数量和复杂性,对页面的性能影响更大。因此,编写简单、高效的 CSS 选择器是很重要的。

由于内容太多,更多内容以链接形势给大家,点击进去就是答案了

15. CSS浮动元素引起的问题和解决方法是什么?

16. 解释一下 CSS Sprite,以及如何在页面或网站中使用它 ?

17. 简要描述CSS中 content属性的作用 ?

18. 简述你对IFC规范的理解?

19. 简述GFC规范的理解 ?

20. 简述对FFC规范的理解?

21. 简述CSS什么是外边距重叠?重叠的结果是什么?

22. 简述CSS中,自适应的单位都有哪些?

23. 简述rem和em的区别 ?

24. 解释first-child与first-of-type的区别是什么?

25. 简述content-box盒模型 ?

26. 简述padding-box盒模型 ?

27. 简述Animation属性值有哪些?

28. CSS如何把一个元素旋转30°?

29. 简述CSS盒阴影的原理 ?

30. 简述CSS3中 transition属性值及含义 ?

31. 简述CSS中background-clip和 background- origin的区别?

32. CSS如何实现文本换行?

33. 简述CSS如何实现超出隐藏省略?

34. 简述CSS3实现动画的方式 ?

35. 简述CSS实现自适应正方形、等宽高比矩形 ?

36. 简述CSS实现两栏布局的方式 ?

37. 简述什么是Grid布局?

38. 简述元素?平垂直居中的方法有哪些?如果元素不定宽高呢?

39. 简述如何实现单行/多行文本溢出的省略样式 ?

40. 简述深入理解设备像素、CSS像素、设备独立像素、 DPR、PPI之间的区别与适配?案 ?

41. 简述如何使用Animation 实现自定义动画 ?

42. 简述transform、translate、transition 分别是什么属性?CSS 中常 用的实现动画方式 ?

文章来源:https://blog.csdn.net/m0_37907797/article/details/135070950
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。