CSS常见面试题笔记整理：问题和答案解答

2021年12月12日20:13:34 发表评论 653 次浏览

什么是 CSS？

CSS 代表级联样式表。它是一种样式表语言，用于确定页面中元素/内容的外观/显示方式。CSS 用于为所有页面开发一致的外观。

CSS 由万维网联盟 ( W3C )开发和维护。它于 1996 年 12 月 17 日首次发布。CSS 工作组目前正在与不同的浏览器供应商合作，以在所有浏览器中添加/实施新功能/规范。

CSS 可以将内容与演示文稿分开。这种分离为网站的外观提供了很大的灵活性和控制。这是使用 CSS 的主要优点。

CSS3 或 Cascading Style Sheets Level 3 是 CSS 标准的第三个版本，用于设计和格式化网页。CSS3 结合了 CSS2 标准并对其进行了一些改进。CSS3 的主要变化是将标准划分为不同的模块，使 CSS3 更易于学习和理解。了解更多。

CSS常见面试题有哪些？本文涵盖了面向新生和有经验的候选人最常见的 CSS 和 CSS3 面试问题。

基础CSS常见面试题和答案合集

1. CSS中的Box模型是什么？哪些 CSS 属性是其中的一部分？

每个 HTML 元素周围都包裹着一个矩形框。框模型用于确定矩形框的高度和宽度。CSS 框由宽度和高度（或在没有宽度和高度的情况下，默认值和内部内容）、填充、边框、边距组成。

CSS常见面试题笔记整理：问题和答案解答
  • 内容：  放置文本或图像的框的实际内容。
  • 填充：内容周围的区域（边框和内容之间的空间）。
  • 边界：填充周围的区域。
  • 边距：边界周围的区域。

2、使用CSS有什么好处？

CSS面试题解析：CSS的主要优点如下：

  • 内容与展示的分离——CSS 提供了一种在移动设备、台式机或笔记本电脑中以多种展示格式展示相同内容的方法。
  • 易于维护 -有效构建的 CSS 可用于通过进行小的更改来更改外观和感觉。要进行全局更改，只需更改样式，所有网页中的所有元素都会自动更新。
  • 带宽 -有效使用，样式表将存储在浏览器缓存中，它们可以在多个页面上使用，而无需再次下载。

3. CSS 的局限性是什么？

CSS的缺点如下：

  • 浏览器兼容性：支持某些样式选择器，有些则不支持。我们必须使用@support 选择器来确定支持或不支持哪种样式）。
  • 跨浏览器问题：某些选择器在不同浏览器中的行为不同）。
  • 没有父选择器：目前，使用 CSS，你无法选择父标签。

4.如何在网页中包含CSS？

有多种方法可以在网页中包含 CSS， 

1 - 外部样式表：链接到 HTML 文档的外部文件：使用链接标签，我们可以将样式表链接到 HTML 页面。

<link rel="stylesheet" type="text/css" href="mystyles.css" />

2 - 使用样式标签嵌入 CSS：HTML 页面中包含的一组 CSS 样式。

<style type="text/css">

/*Add style rules here*/

</style>

在开始和结束样式标签之间添加 CSS 规则，并按照与在独立样式表文件中完全相同的方式编写 CSS。

3 - 向 HTML 元素添加内联样式（直接在 HTML 标签内应用的 CSS 规则。）：可以使用样式标签将样式直接添加到 HTML 元素。

<h2 style="color:red;background:black">Inline Style</h2>

4 - 导入样式表文件（导入到另一个 CSS 文件中的外部文件）：另一种添加 CSS 的方法是使用 @import 规则。这是在 CSS 本身中添加一个新的 CSS 文件。

@import "path/to/style.css";

5. CSS 中有哪些不同类型的选择器？

CSS 选择器是 CSS 规则集的一部分，它实际选择要设置样式的内容。下面列出了不同类型的选择器。

通用选择器：通用选择器的工作方式类似于通配符，选择页面上的所有元素。在给定的示例中，提供的样式将应用于页面上的所有元素。

* {
  color: "green";
  font-size: 20px;
  line-height: 25px;
}

元素类型选择器：这个选择器匹配一个或多个同名的 HTML 元素。在给定的示例中，提供的样式将应用于页面上的所有 ul 元素。

ul {
  line-style: none;
  border: solid 1px #ccc;
}

ID 选择器：此选择器匹配任何具有与选择器相同的 ID 属性的 HTML 元素。在给定的示例中，提供的样式将应用于所有具有 ID 作为页面容器的元素。

#container {
  width: 960px;
  margin: 0 auto;
}

<div id="container"></div>

类选择器：类选择器还匹配页面上所有类属性设置为与类相同的值的元素。在给定的示例中，提供的样式将应用于所有具有 ID 作为页面上的框的元素。

.box {
  padding: 10px;
  margin: 10px;
  width: 240px;
}

<div class="box"></div>

后代组合器：后代选择器，或者更准确地说，后代组合器让你可以组合两个或多个选择器，以便你可以更具体地选择方法。

#container .box {
	float: left;
	padding-bottom: 15px;
} 

<div id="container">
	<div class="box"></div>
	
	<div class="box-2"></div>
</div>

<div class=”box”></div>

此声明块将应用于所有具有 box 类的元素，该类位于具有容器 ID 的元素内。值得注意的是，.box元素不必是直接子元素：可能有另一个元素 wrapping .box，并且样式仍然适用。

子组合器：使用子组合器的选择器类似于使用后代组合器的选择器，除了它只针对直接子元素。

#container> .box {
	float: left;
	padding-bottom: 15px;
}

<div id="container">
	<div class="box"></div>
	
	<div>
		<div class="box"></div>
	</div>
</div>

选择器将匹配所有属于该元素的类box并且是该#container元素的直接子元素的元素。这意味着，与后代组合器不同，不能有另一个元素包装.box它，它必须是直接子元素。

General Sibling Combinator：一个选择器，它使用通用兄弟组合器根据兄弟关系匹配元素。所选元素在 HTML 中彼此相邻。

h2 ~ p {
	margin-bottom: 20px;
}

<h2>Title</h2>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<div class=”box”>
	<p>Paragraph example.</p>
</div>

在此示例中，所有段落元素 (<p>) 都将使用指定的规则设置样式，但前提是它们是<h2>元素的兄弟元素。<h2>和之间可能还有其他元素，<p>样式仍然适用。

Adjacent Sibling Combinator：使用相邻兄弟组合器的选择器使用加号（+），和一般的兄弟选择器几乎一样。不同之处在于目标元素必须是直接兄弟，而不仅仅是一般兄弟。

p + p {
	text-indent: 1.Sem;
	margin-bottom: 0;
}

<h2>Title</h2>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<p>Paragraph example.</p>

<div class=”box”>
	<p>Paragraph example.</p>
	<p>Paragraph example.</p>
</div>

上面的例子只会将指定的样式应用到紧跟在其他段落元素之后的段落元素。这意味着页面上的第一个段落元素不会收到这些样式。此外，如果另一个元素出现在两个段落之间，则两个段落中的第二个段落将不会应用样式。

属性选择器：属性选择器基于 HTML 属性的存在和/或值来定位元素，并使用方括号声明。

input [type=”text”] {
	background-color: #444;
	width: 200px;
}

<input type="text">

6. 什么是 CSS 预处理器？什么是 Sass、Less 和 Stylus？人们为什么使用它们？

CSS 预处理器是一种工具，用于通过其自己的脚本语言扩展默认 vanilla CSS 的基本功能。它可以帮助我们使用复杂的逻辑语法，例如变量、函数、mixin、代码嵌套和继承等等，从而增强你的普通 CSS。

SASS：Sass 是“Syntactically Awesome Style Sheets”的首字母缩写词。SASS 可以使用 SASS 或 SCSS 以两种不同的语法编写

SASS 与 SCSS

  • SASS 基于缩进，而 SCSS(Sassy CSS) 不是。
  • SASS 使用 .sass 扩展名，而 SCSS 使用 .scss 扩展名。
  • SASS 不使用大括号或分号。SCSS 使用它，就像 CSS 一样。

SASS 语法

$font-color: #fff 
$bg-color: #00f

#box
	color: $font-color
	background: $bg-color

SCSS 语法

$font-color: #fff;
$bg-color: #00f;

#box{
	color: $font-color;
	background: $bg-color;
}

LESS： LESS 是“Leaner Stylesheets”的首字母缩写词。通过使用 NPM 或 less.js 文件，LESS 很容易添加到任何 javascript 项目中。它使用扩展名 .less。

LESS 语法与 SCSS 相同，但有一些例外。LESS 使用@ 来定义变量。

@font-color: #fff;
@bg-color: #00f

#box{
	color: @font-color;
	background: @bg-color;
}

Stylus： Stylus 在编写语法方面提供了很大的灵活性，支持原生 CSS 并允许省略括号、冒号和分号。它不使用 @ 或 $ 来定义变量。

/* STYLUS SYNTAX WRITTEN LIKE NATIVE CSS */
font-color= #fff;
bg-color = #00f;

#box {
	color: font-color;
	background: bg-color;
}

/* OR */

/* STYLUS SYNTAX WITHOUT CURLY BRACES */
font-color= #fff;
bg-color = #00f;

#box
	color: font-color;
	background: bg-color;

7.什么是CSS中的VH/VW（视口高度/视口宽度）？

它是一个 CSS 单位，用于测量相对于视口的高度和宽度的百分比。它主要用于响应式设计技术。度量值 VH 等于视口高度的 1/100。如果浏览器的高度是1000px，1vh就等于10px。同理，如果宽度是1000px，那么1 vw就等于10px。

8. 重置与规范化 CSS 之间的区别？。它们有何不同？

重置 CSS：CSS 重置旨在删除所有内置浏览器样式。例如，所有元素的边距、填充、字体大小都重置为相同。 

规范化 CSS：规范化 CSS 旨在使内置浏览器样式在浏览器之间保持一致。它还纠正了常见浏览器依赖项的错误。

9. CSS常见面试题和答案合集：inline、inline-block、block有什么区别？

块元素：块元素总是从一个新行开始。它们还将占用整行或整行的空间。块元素列表是 <div>、<p>。

内联元素：内联元素不会从新行开始，它们与内容和旁边的标签显示在同一行。内联元素的一些示例是 <a>、<span>、<strong> 和 <img> 标签。 

行内块元素：行内块元素类似于行内元素，除了它们可以有填充和边距以及设置高度和宽度值。

10. 在不同浏览器中测试网页重要吗？

当你第一次设计网站或进行重大更改时，最重要的是在不同的浏览器中测试网站。但是，定期重复这些测试也很重要，因为浏览器会经历大量更新和更改。

11.什么是伪元素和伪类？

伪元素允许我们创建通常不存在于文档树中的项目，例如 ::after。

  • ::before
  • ::after
  • ::first-letter
  • ::first-line
  • ::selection

在下面的例子中，颜色只会出现在段落的第一行。

p: :first-line {
	color: #ffOOOO;
	font-variant: small-caps;
}

伪类选择常规元素，但在某些条件下，例如当用户将鼠标悬停在链接上时。

  • :link
  • :visited
  • :hover
  • :active
  • :focus

伪类示例，在下面的示例中，颜色应用于悬停时的锚标记。

/* mouse over link */
a:hover {
	color: #FFOOFF;
}

12. 如何在 CSS 中指定单位？有哪些不同的方法？

CSS面试题解析：有多种方法可以在 CSS 中指定单位，例如 px、em、pt、百分比 (%)。px(Pixel) 提供细粒度控制并保持对齐，因为 1 px 或 1 px 的倍数保证看起来清晰。px 不是级联的。em 保持相对大小。你可以有响应式字体。em，将级联 1em 等于元素的当前字体大小或浏览器默认。如果你将字体大小发送到 16px，则 1em = 16px。通常的做法是将默认正文字体大小设置为 62.5%（等于 10px）。

pt(point) 传统上用于打印。1pt = 1/72 英寸，它是一个固定大小的单位。

%(percentage) 设置相对于正文字体大小的字体大小。因此，你必须将正文的字体大小设置为合理的大小。

13. margin-top 或 margin-bottom 对内联元素有影响吗？

不，它不会影响内联元素。内联元素随页面内容一起流动。

14. 改变字体使用什么属性？

我们可以使用 font-family 属性来实现这一点。该font-family属性用于指定需要在目标 DOM 元素上应用什么字体。它可以保存多个字体名称作为“后备”机制的一部分，以防浏览器不支持这些字体。例如，我们可以使用：

 p {
  font-family: "Times New Roman", Times, serif;
}

在上面的一段代码中，我们将 font-family 属性应用于段落元素。

  • 它告诉浏览器寻找“Times New Roman”字体并应用它。
  • 如果未安装或不支持“Times New Roman”字体，则它会要求浏览器使用 Times 字体。
  • 如果“Times New Roman”和Times 都不支持，那么它会要求浏览器使用任何支持的属于serif 的通用字体。

如果你不希望段落元素的 font-face 是 Times New Roman/Times/serif 字体，而你想要使用 Arial/Helvetica/sans-serif 字体，那么我们可以只更新段落元素的 CSS 属性作为：

 p {
  font-family: Arial, Helvetica, sans-serif;
}

15.CSS常见面试题有哪些：自适应设计和响应式设计有什么区别？

适应性设计响应式设计
自适应设计专注于开发基于多种固定布局尺寸的网站。响应式设计侧重于根据可用的浏览器空间显示内容。
当在桌面浏览器上打开使用自适应设计开发的网站时，首先检测可用空间，然后选择最合适尺寸的布局用于显示内容。调整浏览器窗口的大小对设计没有影响。当在桌面浏览器上打开使用响应式设计开发的网站时，当我们尝试调整浏览器窗口的大小时，网站的内容会动态地以最佳方式重新排列以适应窗口。
通常，自适应设计使用六种标准屏幕宽度 - 320 px、480 px、760 px、960 px、1200 px、1600 px。检测这些尺寸并加载适当的布局。此设计利用 CSS 媒体查询根据目标设备属性更改样式以适应不同的屏幕。
首先检查最终用户的选择和现实，然后为他们设计最佳的自适应解决方案需要花费大量的时间和精力。通常，响应式设计在构建和设计可根据屏幕尺寸容纳屏幕内容的流畅网站方面花费的工作要少得多。
对设计进行大量控制以开发特定屏幕的站点。这里没有提供对设计的太多控制。

16. CSS 选择器如何通过浏览器匹配元素？

匹配选择器的顺序是从选择器表达式的右到左。DOM 中的元素由浏览器根据键选择器进行过滤，然后向上遍历到父元素以确定匹配项。确定元素的速度取决于选择器链的长度。考虑一个例子：

 p span{ 
    color: black;
}
CSS常见面试题笔记整理：问题和答案解答

在这里，浏览器首先找到spanDOM 中的所有元素，然后遍历它的每个父元素以检查它们是否是段落p元素。

一旦浏览器找到所有匹配的以段落元素为父元素的跨度标签并将黑色应用于内容，匹配过程就会停止。

17. border-box 和 content-box 有什么不同？

content-box是默认值 box-sizing 属性。高度和宽度属性仅包含内容，不包括边框和填充。考虑如下示例：

div{
    width:300px;
    height:200px;
    padding:15px;
    border: 5px solid grey;
    margin:30px;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
}

此处，div 元素的框大小为 content-box。这意味着，为 div 内容考虑的高度和宽度不包括填充和边框。我们将获得为内容指定的完整高度和宽度参数，如下图所示。

CSS常见面试题笔记整理：问题和答案解答

该border-box属性包括高度和宽度属性中的内容、内边距和边框。考虑如下示例：

div{
    width:300px;
    height:200px;
    padding:15px;
    border: 5px solid grey;
    margin:30px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

此处，div 元素的框大小指定为边框框。这意味着为 div 内容考虑的高度和宽度也将包括内边距和边框。这意味着 div 内容的实际高度将是：

actual height = height - 
                padding on top and bottom - 
                border on top and bottom
              = 200 - (15*2) - (5*2) 
              = 160 px

div 内容的实际宽度为：

actual width  = width - 
                padding on right and left - 
                border on right and left
              = 300 - (15*2) - (5*2) 
              = 260 px

这在下图中表示：

CSS常见面试题笔记整理：问题和答案解答

18、CSS3中如何规定不透明度？

不透明度是指内容透明或不透明的程度。我们可以使用name属性opacity，它的取值范围为0到1。0表示元素完全透明，1表示元素完全不透明。我们可以使用 opacity 属性如下：

 div { 
    opacity: 0.6;
}

在上面的示例中，将 60% 的不透明度应用于 div 部分。Internet Explorer 浏览器不支持 opacity 属性。为了让它在那里工作，我们需要使用过滤器属性作为 polyfill，如下面的例子所示。

 div { 
    opacity: 0.6;
    filter: alpha(opacity=60);
}
CSS常见面试题笔记整理：问题和答案解答

19. 为什么要在 CSS 中使用 float 属性？

float 属性用于将 HTML 元素水平定位到容器的左侧或右侧。例如，

 float-demo {
     float: right; 
}

在这里，应用类的元素确保该元素位于容器的右侧。如果指定 float 的值为 left，则元素将放置在容器的左侧。

20.什么是z-index，它的作用是什么？

z-index 用于指定在其定位时发生的重叠元素的垂直堆叠。它指定了元素的垂直堆叠顺序，有助于定义在重叠的情况下元素的显示方式。

此属性的默认值为 0，可以为正也可以为负。除了 0，z-index 的值可以是：

  • 自动：堆栈顺序将设置为与父级相同。
  • 数字：数字可以是正数或负数。它定义了堆栈顺序。
  • 初始值：将属性设置为默认值 0。
  • 继承：属性是从父级继承的。

具有较小 z-index 值的元素比具有较高 z-index 的元素堆叠得更低。

CSS常见面试题笔记整理：问题和答案解答

从上图可以看出，随着z-index的值沿z轴增加，堆叠的顺序会沿垂直轴向其他元素的顶部。

21.以下CSS选择器是什么意思？

  1. div, p
  2. div p
  3. div ~ p
  4. div + p
  5. div > p

给定选择器列表的含义如下：

  • div, p: 这个选择器意味着选择所有 div 元素和所有 p 元素。

考虑以下示例：

 <h1>Heading 1</h1>
   <div>
       Division 1
       <p> paragraph 1</p> <!-- Will be selected -->
   </div>
   <p> paragraph 2</p> 
   <p> paragraph 3</p> 
   <div>
       Division 2
   </div>
   <span> Span 1 </span>

在这里，浏览器会选择所有div 元素和 p 元素，而不管它们的父元素或放置它们的位置。其余标签如 h1 和 span 将被忽略。

  • div p: 这个选择器告诉选择 div 元素内的所有 p 元素。考虑以下示例：
  <h1>Heading 1</h1>
<div>
    Division 1
    <p> paragraph 1</p> <!-- Will be selected -->
    <div>
        <p> Inner Div Paragraph </p> <!-- Will be selected -->
    </div>
</div>
<p> paragraph 2</p>
<p> paragraph 3</p>
<div>
    Division 2
</div>
<span> Span 1 </span>

在这里，<p> paragraph 1</p>和<p> Inner Div Paragraph </p>将由浏览器选择并应用属性。其余的段落标记未被选中。

  • div ~ p: 这个选择器告诉选择所有在任何地方都有 div 元素的 p 元素。考虑一个例子，
<h1>Heading 1</h1>
<div>
   Division 1
   <p> paragraph 1</p>
</div>
<p> paragraph 2</p> <!-- Will be selected -->
<p> paragraph 3</p> <!-- Will be selected -->
<div>
   Division 2
</div>
<span> Span 1 </span>

在这里，将选择第 2 段和第 3 段元素，如上面代码中的标记。

  • div + p: 这个选择器表示选择紧跟在 div 元素之后的所有 p 元素。在这种情况下考虑一个例子：
    <h1>Heading 1</h1>
   <div>
       Division 1
       <p> paragraph 1</p>
   </div>
   <p> paragraph 2</p> <!-- Will be selected -->
   <p> paragraph 3</p> 
   <div>
       Division 2
   </div>
   <span> Span 1 </span>

在这种情况下，我们有紧跟在 div 标签之后的第 2 段元素。因此，只会选择该元素。

  • div > p：这个选择器表示选择所有具有 div 作为直接父元素的 p 元素。在下面的同一个例子中：
    <h1>Heading 1</h1>
   <div>
       Division 1
       <p> paragraph 1</p> <!-- Will be selected -->
   </div>
   <p> paragraph 2</p> 
   <p> paragraph 3</p> 
   <div>
       Division 2
   </div>
   <span> Span 1 </span>

仅<p> paragraph 1</p>在这种情况下会被选中，因为它具有直接的 div 作为父级。

22. CSS常见面试题和答案合集：flexbox 有哪些属性？

Flexbox 代表弹性盒，它于 2017 年左右在 CSS 中引入，目的是提供一种有效的方式来处理布局、对齐其中的元素并在动态/响应条件下在项目之间分配空间。它提供了一种增强的能力来改变物品的尺寸并有效地利用容器中的可用空间。为了实现这一点，CSS3 提供了一些属性。

flexbox的属性如下：

  • flex-direction：此属性有助于定义容器应堆叠针对 flex 的项目的方向。该属性的值可以是
    • row：在 flex 容器中从左到右水平堆叠项目。
    • column：在 flex 容器中从上到下垂直堆叠项目。
    • row-reverse：在 flex 容器中从右到左水平堆叠项目。
    • column-reverse：在 flex 容器中从底部到顶部垂直堆叠项目。
  • flex-wrap：此属性指定是否应包装 flex 项目。可能的值为：
    • wrap：如果需要，弹性项目将被包装。
    • nowrap：这是默认值，表示项目不会被包装。
    • wrap-reverse：这指定项目将在需要时以相反的顺序包装。
  • flex-flow：此属性用于在一个语句中设置 flex-direction 和 flex-wrap 属性。
  • justify-content：用于对齐弹性项目。可能的值为：
    • 中心：这意味着所有的弹性项目都存在于容器的中心。
    • flex-start：该值表示项目在容器的开头对齐。这是默认值。
    • flex-end：该值确保项目在容器的末尾对齐。
    • space-around：该值显示项目之间、之前、周围有空间的项目。
    • space-between：此值显示行之间有空格的项目。
  • align-items：这用于对齐弹性项目。
  • align-content：这用于对齐弹性线。

23. CSS 中的层叠是什么？

“级联”是指通过样式声明并定义样式规则的权重或重要性的过程，这些规则有助于浏览器选择在发生冲突时必须应用的规则。这里的冲突是指适用于特定 HTML 元素的多个规则。在这种情况下，我们需要让浏览器知道需要对元素应用什么样式。这是通过级联样式声明元素列表来完成的。

例如，如果我们有以下样式：

p{
    color:white;
}

并且我们在其下方或已链接到该页面的另一个样式表中还有以下声明：

p{
    color: black;
}

我们在此处的段落元素的颜色属性存在冲突。在这里，浏览器只是向下级联以识别最新和最具体的样式并应用它。由于我们有color:black;最具体的声明，黑色应用于段落元素。现在，如果你想确保将白色应用于段落，我们可以通过添加!important如下所示来定义该样式的权重：

p{
    color:white !important;
}

!important 确保该属性在存在其他冲突属性的情况下具有最大权重。

高级CSS常见面试题有哪些？

24.解释CSS位置属性？

  • Absolute：将元素准确放置在你想要放置的位置。绝对位置实际上是相对于元素的父元素设置的。如果没有父级可用，则为页面本身的相对位置（它将默认一直返回到元素）。
  • Relative： “相对于自身”。设置位置：相对；在一个元素上并且没有其他定位属性，它不会影响它的定位。它允许在元素上使用 z-index 并限制绝对定位的子元素的范围。任何子元素都将绝对定位在该块中。 
  • Fixed：元素相对于视口或浏览器窗口本身定位。如果滚动，视口不会改变，因此固定元素将保持在同一位置。 
  • Static：每个页面元素的静态默认值。你将元素设置为 position: static 的唯一原因是强行删除一些应用于你控制之外的元素的定位。
  • Sticky：粘性定位是相对定位和固定定位的混合体。元素被视为相对定位，直到它超过指定的阈值，此时它被视为固定定位。

25. DOM回流什么时候发生？

CSS面试题解析：Reflow 是 Web 浏览器进程的名称，用于重新计算文档中元素的位置和几何形状，以重新渲染部分或全部文档。 

回流发生在：

  • 在 DOM 中插入、删除或更新元素。
  • 修改页面上的内容，例如输入框中的文本。
  • 移动一个 DOM 元素。
  • 动画 DOM 元素。
  • 对元素进行测量，例如 offsetHeight 或 getComputedStyle。
  • 更改 CSS 样式。

26. 不同的盒子尺寸属性？

box-sizing CSS 属性设置如何计算元素的总宽度和高度。

  • Content-box：默认宽度和高度值仅适用于元素的内容。填充和边框被添加到框的外部。
  • Padding-box：宽度和高度值适用于元素的内容及其填充。边框被添加到框的外部。目前，只有 Firefox 支持 padding-box 值。
  • Border-box：宽度和高度值适用于内容、填充和边框。

27. 如何在另一个 div 中居中对齐一个 div？

  • 以表格为中心：

HTML：

<div class=”cn”><div class=”inner”>your content</div></div>

CSS：

.cn {
	display: table-cell;
	width: 500px;
	height: 500px;
	vertical-align: middle;
	text-align: center;
}

.inner {
	display: inline-block;
	width: 200px; height: 200px;
}
  • 以transform为中心

HTML：

<div class="cn"><div class="inner">your content</div></div>

CSS：

.cn {
	position: relative;
	width: 500px;
	height: 500px;
}

.inner {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
	width: 200px;
	height: 200px;
}
  • 使用 Flexbox 居中

HTML：

<div class="cn"><div class="inner">your content</div></div>

CSS：

.cn {
	display: flex;
	justify-content: center;
	align-items: center;
}
  • 以网格为中心

HTML：

<div class=”wrap_grid”>
	<div id=”container”>vertical aligned text<br />some more text here
	</div>
</div>

CSS：

.wrap-grid {
	display: grid;
	place-content: center;
}

28. 你能说出@media 属性的四种类型吗？

@media 属性的四种类型是：

  1. 全部 → 这是默认属性。用于所有媒体类型设备。
  2. 屏幕 → 用于电脑屏幕、手机屏幕。
  3. 打印 → 用于打印机。
  4. 语音 → 用于屏幕阅读器。

29.什么是网格系统？

CSS Grid Layout 是 CSS 中最强大的布局系统。据说它是一个二维系统，这意味着它可以处理列和行，不像 flexbox 主要是一个一维系统。

30. 使用 CSS 隐藏元素的不同方式有哪些？

  • 使用显示属性（显示：无）。它不适用于屏幕阅读器。如果使用 display: none 元素将不存在于 DOM 中。
  • 使用可见性属性（可见性：隐藏），将占用元素的空间。它将可供屏幕阅读器用户使用。该元素实际上会出现在 DOM 中，但不会显示在屏幕上。
  • 使用位置属性（position: absolute）。使其在屏幕外可用。

31. :root 伪类指的是什么？

:root 选择器允许你定位 DOM 或文档树中最高级别的“父”元素。它在 CSS Selectors Level 3 规范中定义。

32. 可访问性 (a11y) 是什么意思？

可访问性是指如何设计软件或硬件组合以使系统可供视觉障碍、听力损失或灵活性有限的残疾人使用。

例如，考虑到可访问性而开发的网站可能具有文本转语音功能。在美国，公共网站必须具有可访问的合规性。它在 508 合规性中定义。它为所有网站用户提供了指南和最佳实践，这些指南和最佳实践应该在可访问性的关键领域得到满足。

33.如何恢复属性的默认值？

关键字 initial 可用于将其重置为其默认值。

34. CSS grid 和 flexbox 的区别？

  • CSS Grid Layout 是一个二维系统，这意味着它可以处理列和行。网格布局适用于设计上不是线性的大规模布局。
  • Flexbox 主要是一个一维系统（在列或行中）。Flexbox 布局最适合应用程序的组件。

35. Calc 是如何工作的？

CSS3 calc() 函数允许我们对属性值执行数学运算。例如，我们可以使用 calc() 来指定宽度是两个或多个数值相加的结果，而不是声明元素宽度的静态像素值。

.foo {
	Width: calc(100px + 50px)
}

36. CSS 自定义属性变量是什么意思？

自定义属性（有时称为 CSS 变量或级联变量）由用户定义，其中包含要在整个文档中重复使用的特定值。该值是使用 -- 概念设置的。并且使用 var() 函数访问这些值。

:root {
	--main-bg-color: brown
}

.one {
	color: white;
	background-color· var (--main-bg-color);
	margin: l0px,
	width: 50px,
	height: 5Opx;
	display: inline-block;
}

37. CSS 变量和预处理器（SASS、LESS、Stylus）变量有什么区别？

  • 无需预处理器即可使用 CSS 变量。目前，所有主流浏览器都支持 CSS 变量。 
  • CSS 变量级联。但是预处理器变量不会级联。 
  • CSS 变量可以在 javascript 中访问和操作。

38. * { box-sizing: border-box; 有什么作用？} 做？它的优点是什么？

  • 它使文档中的每个元素都包含元素内部维度中的填充和边框，用于计算高度和宽度。  
  • 在 box-sizing:border-box 中，元素的高度现在由内容的高度 + 垂直填充 + 垂直边框宽度计算。
  • 元素的宽度现在由内容的宽度 + 水平填充 + 水平边框宽度计算。

39. !important 在 CSS 中是什么意思？

样式具有重要的将具有最高优先级，它会覆盖级联属性。

 p {
 	color: red !important;
 }
 #thing {
 	color: green;
 } 
 <p id="thing">Will be RED.</p>

40.什么是特异性？如何计算特异性？

确定将哪个 CSS 规则应用于元素的过程。它实际上决定了哪些规则优先。内联样式通常取胜然后是 ID 然后是类值（或伪类或属性选择器），通用选择器 (*) 没有特殊性。ID 选择器比属性选择器具有更高的特异性。

41.什么是渐进式渲染？你如何在网站中实现渐进式渲染？它的优点是什么？

渐进式渲染是用于提高网页性能（特别是改进感知加载时间）以尽可能快地渲染内容以供显示的技术的名称。

我们可以通过加载图片的延迟加载来实现页面的渐进式渲染。我们可以使用 Intersection Observer API 来延迟加载图像。API 使检测元素何时进入视口并在进入时采取行动变得简单。一旦图像进入视口，我们将开始加载图像。

下面给出了一个示例片段。

<img class="lazy"
src="placeholder-image.jpg" alt="CSS常见面试题笔记整理：问题和答案解答"
data-src="image-to-lazy-load-1x.jpg" alt="CSS常见面试题笔记整理：问题和答案解答"
data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x"
alt="I'm an image!">

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to event handlers here
  }
});

42.使用translate()代替绝对位置有什么好处？

Translate() 不会导致浏览器触发重绘和布局，而是仅作用于合成器。绝对位置会触发重绘或 DOM 回流。所以， translate() 提供了更好的性能。

43.style1.css 是不是需要先下载并解析style2.css 才能获取？

<head>
	<link h ref=" stylel. css" rel=" stylesheet">
	<link href="style2.css" rel="stylesheet">
</head>

不，浏览器将按照其在 HTML 页面上出现的顺序下载 CSS。

44.如何判断浏览器是否支持某个功能？

CSS 中的@support 对于扫描当前浏览器是否支持某个功能非常有用。

@supports (display: grid) {
	div {
		display: grid;
	}
}

45、绝对定位是如何工作的？

绝对定位是一种非常强大的定位机制，它允许用户将任何元素放置在任何他们想要的精确位置。CSS 属性 right、left、top、bottom 并定义你需要放置元素的确切位置。在绝对定位中，需要考虑以下几点：

  • 应用绝对定位的元素从 HTML 文档的正常工作流中删除。
    • HTML 布局不会在其页面布局中为该元素创建任何空间。
  • 该元素相对于最近的定位祖先定位。如果不存在这样的祖先，则元素相对于初始容器块放置。
  • 元素的最终位置是根据提供给顶部、右侧、左侧、底部的值确定的。

46.这个属性如何工作overflow: hidden？

CSS 中的overflow 属性用于指定当内容大小超过指定的内容所包含的容器大小时，是否必须剪切内容或将滚动条添加到内容区域。如果overflow 的值是隐藏的，内容会被剪切到容器的大小，从而使内容不可见。例如，

div {
    width: 150px;
    height: 50px;
    overflow: hidden;
}

如果 div 的内容非常大并且超过 50px 的高度，则内容会在 50px 后被剪裁，其余内容将不可见。

47. 如何将 p 标签内的内容对齐在 div 内的正中心？

我们可以text-align: center在父 div 中添加属性来水平对齐内容。但它不会垂直对齐内容。我们可以通过使父元素具有相对定位而子元素具有绝对定位来垂直对齐内容。子元素的顶部、底部、右侧、左侧的值应为 0，以使其垂直居中。然后我们需要将边距设置为自动。假设子元素和母元素都具有高度和宽度值。

假设我们有一个高度和宽度占屏幕尺寸 20% 的 div 元素，我们有一个高度为 1.2em 和宽度为 20% 的段落元素。如果我们要使段落元素居中（垂直和水平）对齐，我们编写以下样式：

div {
    position : relative;  // Make position relative
    height : 20%;
    width : 20%;
    text-align : center; //Align to center horizontally
}
p {
    position : absolute; // Make position absolute
    top:0;                // Give values of top, bottom,left, right to 0
    bottom:0;
    left:0;
    right:0;
    margin : auto;        // Set margin as auto
    height : 1.2 em;
    width : 20%;
}

48.CSS 中的边距与填充有什么不同？

我们可以使用边距属性在元素周围创建空间。我们还可以为在外部定义的边界创造空间。我们有以下用于定义边距的属性：

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
    margin 属性本身的值如下：
  • auto – 当我们使用它时，浏览器会自动计算边距。
  • length – 此属性的值可以是 px、pt、cm、em 等。这些值可以是正数或负数。
  • % – 我们还可以为元素提供百分比值作为边距。
  • 继承 - 使用此属性，可以从父元素继承边距属性。

padding 属性用于在元素内容周围和任何已知边框内生成空间。填充还具有子属性，例如：

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

需要注意的是，填充不允许负值。

从下图中，我们可以看到 Margin 是 CSS Box Model 的最外层实体，位于边界之外，而 padding 位于边界内。

CSS常见面试题笔记整理：问题和答案解答

49.要自动编号章节和类别的标题值，你需要做什么？

我们可以使用 CSS 计数器的概念。这让我们可以根据文档中的位置调整内容的外观。使用时，我们需要先初始化 counter-reset 属性的值，默认为 0。相同的属性也用于将值更改为我们需要的任何数字。初始化后，可以使用 counter-increment 属性递增或递减计数器的值。计数器的名称不能是 CSS 关键字，如“none”、“initial”、“inherit”等。如果使用 CSS 关键字，则声明将被忽略。

考虑如下所示的示例：

body {
  counter-reset: header;   /* define counter named 'header' whose initial value is 0 by default */
}

h2::before {
  counter-increment: header;   /* The value of header counter by 1.*/
  content: "Header " counter(header) ": ";  /* To display word Header and the value of the counter with colon before it.*/
}

在这里，我们试图实现 h2 标签的自动计数增量和显示功能。无论我们在哪里使用 h2 标签，内容都会以“Header 1 :”、“Header 2 :”、“Header 3 :”等为前缀。

50. CSS常见面试题有哪些：nth-child() 与第 n 个类型选择器有什么不同？

两者都是伪类（伪类是那些指定所选元素特殊状态的关键字）。的nth-child()伪类用于匹配基于表示基于所述同级的元素的位置的数量的元件。该数字用于根据元素在其同级中的位置来匹配元素。

例如，在下面的一段代码中，如果我们为 example 类提供 nth-child(4) ，那么无论元素类型如何，都会选择 example 类的第 4 个孩子。在这里，示例类的第四个子元素是 div 元素。该元素被选中，并为其添加黑色背景。

.example:nth-child(4) {   
    background: black; 
}
<div class="example">
	<p>This is a paragraph.</p>
	<p>This is a paragraph.</p>
	<p>This is a paragraph.</p>
	<div>This is a div.</div> <!-- 4th Element to select and apply style-->
	<div>This is a div.</div> 
	<p>This is a paragraph.</p>
	<p>This is a paragraph.</p>
	<div>This is a div.</div>
</div>

的nth-of-type()伪类是类似于第n个孩子，但它有助于在基于一个数字，表示该元素的是它的相同类型的兄弟姐妹中的元素中的位置选择器匹配。数字也可以作为函数给出，或者给出像奇数或偶数这样的关键字。

例如，在下面的一段代码中，如果我们p:nth-of-type(even)为 example 类给出，则在 example 类中选择所有偶数段落标签，并将背景黑色样式应用于它们。所选元素在以下代码的注释中标记：

.example p:nth-of-type(even) { 
    background: black; 
}
<div class="example">
	<p>This is a paragraph.</p> 
	<p>This is a paragraph.</p> <!-- Select this and apply style-->
	<p>This is a paragraph.</p> 
	<div>This is a div.</div>
	<div>This is a div.</div> 
	<p>This is a paragraph.</p> <!-- Select this and apply style-->
	<p>This is a paragraph.</p> 
	<div>This is a div.</div>
	<p>This is a paragraph.</p> <!-- Select this and apply style-->
	<div>This is a div.</div>
</div>

51. CSS Sprites 的重要性是什么？

CSS面试题解析：CSS sprites 用于将多个图像组合在一个较大的图像中。它们通常用于表示用户界面中使用的图标。使用精灵的主要优点是：

  • 它减少了获取多个图像数据的 HTTP 请求数量，因为它们仅通过发送单个请求来获取。
  • 它有助于提前下载有助于在悬停或其他伪状态时显示图标或图像的资产。
  • 当有多个图像时，浏览器会分别调用以获取每个图像的图像。使用精灵，图像合并为一个，我们可以使用一次调用来调用该图像。

考虑一个示例，其中我们的应用程序需要 3 个图像，如下所示（没有 Sprites 部分）。如果我们尝试独立加载图像，我们需要 3 个不同的 HTTP 请求来获取数据。但是如果我们有 CSS Sprites，其中所有 3 个图像被组合成 1 个，由一些空格分隔，那么我们只需要 1 个 HTTP 请求。

CSS常见面试题笔记整理：问题和答案解答

我们可以通过访问定位属性来访问精灵中的每个图像，如下面的代码所示：

<!DOCTYPE html>
<html>
<head>
<style>
#home-icon {
  left: 0px;
  width: 46px;
  background: url('spriteFile.gif') 0 0;
}

#prev-icon {
  left: 63px;
  width: 43px;
  background: url('spriteFile.gif') -47px 0;
}

#next-icon {
  left: 129px;
  width: 43px;
  background: url('spriteFile.gif') -91px 0;
}
</style>
</head>
<body>

<img id="home-icon" src="spriteFile.gif" alt="CSS常见面试题笔记整理：问题和答案解答" width="1" height="1">    <!-- To display home icon here -->
<img id="next-icon" src="spriteFile.gif" alt="CSS常见面试题笔记整理：问题和答案解答" width="1" height="1">    <!-- To display next icon icon here -->
<img id="prev-icon" src="spriteFile.gif" alt="CSS常见面试题笔记整理：问题和答案解答" width="1" height="1">    <!-- To display previous icon icon here -->

</body>
</html>

在上面的代码中，我们试图通过使用 left、width 属性从 sprite 文件中访问每个元素 - 房屋、上一个和下一个图标。图像通过背景属性显示在 img 部分。请注意，图像的来源（img 标签的 src 属性）只是一个文件，spriteFile.gif根据 id 选择器中指定的规则，图像会相应地加载。

52.你对CSS中的tweening有什么理解？

补间是填充关键序列之间（即已创建的关键帧之间）间隙的过程。关键帧是那些代表动画动作开始和结束点的帧。补间涉及在两个图像之间生成中间关键帧，给人的印象是第一个图像已经平滑地演变为第二个图像。为此，我们使用变换等属性 - 矩阵、平移、缩放、旋转等。

在下面的示例中，我们正在生成段落元素的中间框架，以从浏览器的开始到右边缘滑动。

p {
  animation-duration: 2s;
  animation-name: slidethrough;
}

@keyframes slidethrough {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

在这里，段落元素指定动画过程从开始到结束执行需要 2 秒。这是通过使用animation-duration属性来完成的。的动画名称@keyframes使用属性定义animation-name。中间关键帧使用@keyframes规则定义。在这个例子中，我们只有 2 个关键帧。第一个关键帧从 0% 开始，一直运行到 100% 的左边距，这是包含元素的最右边。第二个关键帧从 100% 开始，其中左边距设置为 0%，宽度设置为 100%，这导致动画与容器区域的左边缘齐平。

53. 为什么我们需要在 CSS 中使用 clear 属性和浮点数？

clear 属性与 floats 一起用于指定浮动元素的哪一侧不应该浮动。具有 clear 属性的元素确保元素不会向上移动到浮动附近。但是元素将向下移动超过浮动。

让我们通过一个例子来理解这一点。我们知道浮动对象不会增加它们所在对象的高度。假设我们在另一个 id 为“main_div”的 div 元素中有一个类为“floated_div”的 div 元素。

<html>
    <head>
    <style>
        #main_div {
             width: 400px;
             margin: 10px auto;
             border: 4px solid #cccccc;
             padding: 5px;
        }

        .floated_div {
             float: left;
             width: 50px;
             height: 50px;
             border: 2px solid #990000;
             margin: 10px;
        }
    </style>
    </head>
    <body>
        <div id="main_div">
             <p>Clear Float Demo</p>
             <div class="floated_div"></div>
             <div class="floated_div"></div>
             <div class="floated_div"></div>
             <div class="floated_div"></div>
             <div class="floated_div"></div>
        </div>
    </body>
</html>

这段代码的结果如下所示。我们看到预期在 dev 内的方块不在主父 div 内。我们如何解决这个问题？

CSS常见面试题笔记整理：问题和答案解答

我们可以通过<div style="clear:both"></div>在最后一个浮动元素的末尾添加一行来实现，这样浮动元素就可以正确地放入主 div 容器中。

<html>
    <head>
    <style>
        #main_div {
             width: 400px;
             margin: 10px auto;
             border: 4px solid #cccccc;
             padding: 5px;
        }

        .floated_div {
             float: left;
             width: 50px;
             height: 50px;
             border: 2px solid #990000;
             margin: 10px;
        }
    </style>
    </head>
    <body>
        <div id="main_div">
             <p>Clear Float Demo</p>
            
             <div class="floated_div"></div>
             <div class="floated_div"></div>
             <div class="floated_div"></div>
             <div class="floated_div"></div>
             <div class="floated_div"></div>
             <div style="clear:both"></div>    <!-- Adding this fixed the issue -->
        </div>
    </body>
</html>

这样做的结果将是：

CSS常见面试题笔记整理：问题和答案解答

54. CSS常见面试题和答案合集：你将如何解决特定于浏览器的样式问题？

修复特定于浏览器的问题的不同方法。

  • 我们可以在不同的工作表中分别编写特定于浏览器的样式，并仅在使用特定浏览器时加载。这利用了服务器端渲染技术。
  • 我们可以使用 auto-prefix 在代码中自动添加供应商前缀。
  • 我们也可以使用 normalize.css 或重置 CSS 技术。

还有一些方法可以避免浏览器兼容性问题。它们如下：

  • 验证 HTML 和 CSS：我们知道，不同的浏览器会以不同的方式读取、解释和处理代码。我们需要验证 HTML 和 CSS 文件中缺少的结束标记或语法中缺少的分号，因为旧浏览器在呈现代码时可能会抛出错误。我们可以通过以下方式避免这些错误：
    • 维护对齐良好的代码，有助于提高可读性。
    • 在必要的地方插入评论。
    • 利用 Jigsaw CSS 验证器、W3C HTML 验证器等验证工具来识别代码中的语法问题。
  • 在布局中保持跨浏览器兼容性：在开发 Web 应用程序时，跨浏览器兼容性是必须的。我们希望我们的应用程序能够响应所有设备、浏览器和平台。布局不兼容的一些影响是移动设备中布局的无响应、现代和旧浏览器之间布局渲染的差异等。这些不兼容可以通过使用来避免：
    • CSS 多列布局 - 用于维护列和容器的正确布局。
    • HTML 视口元标记 - 用于确保内容在移动设备上正确跨越。
    • CSS Flexbox 和网格 - 根据内容和可用空间布局子元素。
    • CSS 重置样式表 - 用于减少浏览器在默认行高、字体大小、边距等方面的不一致。
  • 检查 JavaScript 库问题：确保明智地使用库，并且浏览器支持使用的库。
  • 检查 DOCTYPE 标签关键字： DOCTYPE 关键字用于定义代码中需要使用的规则。较旧的浏览器版本会在开始时检查 DOCTYPE 标记，如果未找到，则应用程序呈现将不正确。
  • 真机测试：虽然应用程序可以在虚拟环境下进行测试，但如果在真机和平台上进行测试会更有利。为此，我们可以使用 Testsigma 之类的工具，使我们能够在真实设备中并行测试。

结论

CSS 在 Web 开发领域扮演着最重要的角色。这是因为 CSS 有助于根据业务需求实现美观、响应式或自适应的网站。CSS 有助于构建更轻巧灵活的布局，有助于更快地加载页面并使内容具有视觉吸引力。CSS 不断发展并变得越来越强大，从而使其成为各种公司最追捧的网站开发技术。在本文中，我们看到了 CSS 中最常见的面试问题，尤其是 CSS3。

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: