CSS面试问题：前端面试速查表

前端面试并非最简单。你要如何准备？从哪里开始？ 在前端面试中可能会问各种各样的问题。这些肯定会包括有关您的经验和对CSS的熟悉程度的问题，CSS是任何网页的基本组成部分之一。

今天，我将在前端采访中帮助您准备CSS问题。本文提供有关CSS概念以及常见面试问题的复习。这适用于准备进行前端面试的任何人。对于解决方案及其每个主题的解释，还存在一些示例性挑战。

今天，我们将介绍：

CSS基础刷新
CSS选择器和特异性
CSS文字，颜色，字体
CSS Float属性
CSS Flexbox
高级CSS问题
接下来要学什么

前端采访。

涵盖您可能会在前端面试中测试的一系列CSS问题。

前端面试CSS

CSS基础刷新

CSS范围很广，前端面试中提出的问题范围很广-从基本样式到高级概念，例如伪元素和伪选择器。因此，刷新甚至最基本的CSS问题也很重要。让我们潜入。

什么是CSS？

CSS代表层叠样式表。CSS是一种编程语言，可确定任何HTML网页的内容样式。

CSS2和CSS3有什么区别？

有四个主要区别：

几乎所有浏览器都支持CSS3模块，但CSS2不支持。
CSS3分为两个部分，称为模块。在CSS2中，所有内容都包含在单个文档中，其中包含所有信息。
有了CSS3，你可以使用多个背景具有以下属性：background-image，background-repeat styles，和background-position。
CSS3引入了CSS2中不可用的图形，例如Flexbox，Border-radius和box-shadow。

当前版本的CSS中使用哪些模块？

选择器
背景和边框
盒子模型
动画制作
多列布局
文字字体和颜色
2D / 3D转换
使用者介面（UI）

如何将CSS集成到HTML页面中？

集成CSS的三种流行方法：

用 inline-styling
使用style-tagsHTML页的页眉
将CSS作为单独的文件编写，并使用link标记将其添加到HTML页面

CSS的优缺点是什么？

以下是CSS的主要优点：

您可以使用单个CSS页面控制多个文档的样式
多个HTML元素可以包含许多文档
您可以使用分组方法对复杂情况的样式进行分组

以下是CSS的主要缺点：

可以限制垂直控制
没有列声明或表达式
您无法通过选择器升序

今天使用的主要CSS库是什么？

Bootstrap：移动优先网站最受欢迎的库
语义UI：由LESS和jQuery支持的现代前端框架
基础：具有响应式网格，CSS UI组件和模板的前端框架
Ulkit：用于构建Web界面的轻量级模块化前端框架

什么是CSS预处理程序？

CSS预处理器是使用其自己的语法编写CSS的程序。它们使CSS更具可读性。这些扩展了CSS并添加了其他功能，例如嵌套选择器，mixins和继承选择器。流行的CSS预处理器是SASS。

CSS选择器和特异性

现在，我们已经刷新了CSS的基础知识，让我们进入有关选择器和特异性的中间问题。您可以期待有关这些主题的面试问题，因为它们是CSS整体的基础。

什么是CSS选择器，如何使用？

CSS选择器定义了一组CSS规则适用的元素。CSS规则基于相关因子应用于元素。这被称为“ 特异性”，这是浏览器确定哪些CSS属性值将应用于元素的方式。

基本选择器包括类型，类和id选择器。组合器选择器的示例包括：后代组合器，用于选择作为第一元素的后代的节点（AB）；子组合器（A> B），用于选择作为第一元素的直接子代的节点。选择器可以通过用逗号分隔规则进行分组,。

CSS的特异性是什么？

特异性是浏览器如何确定哪些CSS属性值与元素最相关的方式。这是浏览器选择要应用的值的方式。特异性基于匹配规则。换句话说，特异性是任何CSS声明的权重。

如果多个声明具有特定性，则应用最后一个声明。直接定位的元素优先于从父级或祖先继承的元素。

浏览器如何确定哪些元素与CSS选择器匹配？

浏览器将从最右到左匹配选择器。浏览器根据键选择器过滤出元素。它们将遍历父元素。如果选择器链较短，则浏览器可以更快地确定匹配项。

现在，让我们看一下在采访中可以期待的关于CSS选择器和特异性的挑战性问题。

CSS选择器挑战

挑战：您将需要在给定的HTML中添加CSS组合器，以便输出如下图所示。HTML处于只读状态，使其更具挑战性。使用的颜色是黄色，黑色和橙色。边框和内边距分别为10px和30px。

使用下面的代码环境，在检查解决方案之前先尝试一下。

解决方案评论：CSS选择器挑战

在这里，我们使用border属性在身体周围添加实线边框。边框颜色为黑色，厚10像素。padding属性在边框的边缘和所有区域的内容区域的边缘之间增加了间距（30px）。

>是直接子选择器。在这种情况下，我们将其与结合使用:first-of-type以选择第一段并将背景设置为黄色。最后，我们选择所有与a相邻的兄弟段落div并将其背景设置为橙色。

CSS文字，颜色，字体

CSS最常用于处理文本，包括位置，颜色和字体。您可能会在前端面试中遇到与文本处理有关的问题和编码挑战。

我们可以通过几种方式更改文本的颜色？

我们可以通过四种方式更改颜色。

// Color name
p {
    color: red;
}
 
// Hex value
p {
    color: #ccc;
    color: #cccccc;
}
 
// RGB value
p {
    color: rgb(129, 176, 78);
}
 
// HSL value 
p {
    color: hsl(130, 90%, 40%);
}

什么是CSS渐变？

CSS中的渐变允许我们在两种或多种颜色之间创建平滑的转换。我们可以在CSS中使用两种类型的渐变：“线性渐变”和“径向渐变”。

您如何设置`h2`和`h3`具有相同的样式？

您可以通过用逗号（,）分隔项目来设置具有相同样式的多个元素。例如：

h2, h3 {
 
color: yellow;
 
}

所有CSS元素使用的默认字体大小是多少？

默认大小为16像素。

CSS中使用的不同单位是什么？

在CSS中，length是一个数字，后跟一个长度单位。CSS有两种长度类型，用不同的单位表示：相对长度和绝对长度。相对单位如下：em，ex，ch，rem，vw，vh，vmin，vmax，和%。Abolsute单位如下：cm，mm，in，px，pt，和pc。

您如何将Google字体添加到网页？

该<link>标签用于在添加谷歌字体head的部分html页面。语法类似于：

<link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap" rel="stylesheet">

font-family: 'Balsamiq Sans', cursive;

现在，让我们尝试一下CSS文本颜色挑战。检查答案之前，请先尝试解决方案。

CSS文字颜色挑战

挑战：挑战中使用的颜色是钢蓝和珊瑚色。将根元素（html）的字体大小设置为10px。段落的字体家族是Helvetica Neue。这是您的输出目标：

解决方案评论：CSS文本颜色挑战

我们已将10个像素分配font-size给HTML标签，这是我们页面的根元素。我们已成立coral为background-color我们的body标签。

h1标签的文本颜色设置为白色。将font-size其增加到5rem（1 rem = 1 x根元素像素），以便5rem等于50像素。在中text-shadow: 5px 5px 1px steelblue, 3px 3px 1px steelblue;，5px 5px 1px steelblue是水平阴影，3px 3px 1px steelblue是垂直阴影值，其中1px是模糊半径。文本在中对齐center。每个字母之间的间距为4个像素。

选择第一段，并将其font-weight设置为bold使用相邻的同级选择器。对于使用::first-line伪元素选择器的段落的第一行，字母之间的间距为4像素，单词之间的间距也为4像素。

该font-size段落是集1.5rem（15个像素）。文本color设置为白色。该font-family: Helvetica Neue用于段落。每行之间的间隔设置为1.5（15像素）。字母之间的间距设置为1个像素。

CSS Float属性

有关float CSS属性的问题在访谈中很常见。这些属于CSS问题的中级水平。让我们来看看一些关于浮动的值得注意的面试问题，并尝试挑战这些概念。

CSS中的float属性是什么？

float属性用于将元素放置在容器的左侧或右侧。这允许文本环绕对象，同时将其从页面的正常流程中移除。有三种用途浮动：float: none，float: left，和float: right。

float属性使用的默认值是什么？

None是float属性的默认值。这样可以确保元素不会浮动。要将元素设置为左侧或右侧，我们必须具体化该样式。

哪个浮点值将采用其父代的float属性？

如果float: inherit;在元素上设置，它将从其父元素继承float属性的值。

我们如何控制浮动元素的行为？

我们必须使用该clear属性。如果我们不添加clear属性，则元素将使现有的浮动元素变得混乱。例如，我们希望3个<p>标签浮动在的页面右侧width: 30%;，我们必须编写：

p {
    border: 2px solid coral;
  float: right;
  width: 30%;
  clear: both;
}

现在，让我们尝试挑战我们对CSS float属性的知识。在检查解决方案之前，请尝试自己编写代码。

破解前端面试并掌握CSS。

本课程汇编了广泛的问题，您最有可能在前端面试中对这些问题进行测试。探索200多种CSS编码挑战和多项选择题。在本课程结束时，您将有信心去回答任何CSS问题。

CSS浮动挑战

挑战：将相关的float属性添加到给定的div中，以使文本显示在两个框之间，如下图所示。挑战中使用的颜色是深蓝色。框的宽度和高度为150像素。

解决方案评论：CSS浮动

首先，我们通过设置文本样式font-size，font-family和line-height性能。所有元素border-box周围都必须有一个，以便将填充和边框包括在元素的总宽度和高度中。

接下来，将外部的宽度设置div为90％，并在框的所有边上添加0.5em的填充。然后，通过将设置border-radius为5px并为其设置宽度和高度为150px，使框看起来像是带有圆角的正方形。最后，我们将文本的颜色设置为white。

我们还为背景色赋予steelblue了挑战说明中指定的值。为了帮助文本对齐，我们将padding-top属性设置为3em。这将文本向下推。

CSS Flexbox

在CSS规范中，Flexbox被描述为用于用户界面设计的布局模型。Flexbox的主要功能是Flex布局中的项目可以增长和收缩。可以为项目本身分配空间，也可以在项目之间或周围分配空间。您可以在CSS Flexbox上期待问题，因为它是CSS3的主要补充。

什么是CSS flexbox？

flexbox布局是CSS3的新布局模块。它可用于改善容器内的物品对齐，方向和组织。它可以应用于动态项目。

CSS flexbox的所有属性是什么？

CSS3中flexbox的六个属性：

flex-direction
flex-wrap
justify-content
align-items
flex-flow
align-content

`flex-container`默认情况下，元素朝哪个方向对齐？

声明时，所有项目都水平对齐display: flex;。

CSS语法有`flex: 1`什么作用？

此语法将在之间分配相等的宽度flex-items。

假设有多个flex容器，并且您想对齐它们。使用以下哪个属性？

该align-content属性用于对齐多个flex容器。

现在，让我们尝试一个CSS flexbox挑战来测试我们的技能。在检查解决方案之前，请先尝试答案。

CSS Flexbox挑战

面临的挑战：创建一个微型网站，将其悬停在导航栏项上时会更改背景颜色。小部件中已经给出了HTML结构。您将需要在CSS标签中编写代码。

输出窗口的高度为500像素，使用的颜色为#ddd和#444。使用#666的边界。在此挑战中使用的字体家族是Helvetica Neue。在给定的挑战中使用flexbox属性，以便您的输出如下图所示：

解决方案评论： CSS Flexbox

我们在这里要做的第一件事是box-sizing为页面上的所有元素设置属性，以便在每个元素的总宽度和高度中包括填充和边框。我们还将删除边框和元素周围的填充，因为这为我们提供了添加自定义值的空间。

请记住，必须添加display: flex;元素才能为其提供Flexbox布局属性。现在，我们的导航栏已应用Flexbox布局，并且将background-color其设置为#ddd。我们使用justify-content属性将弹性项目的末端（右侧）对齐。

接下来，我们通过设置样式的锚标签font-family，color 和text-align属性，去掉默认的下划线装饰。悬停时，我们还将更改background-color为＃444，并将文本color更改为#ddd。我们在顶部和底部使用1rem的填充，在每个锚标记的左侧和右侧应用1.5rem的填充。

现在，我们继续对样式进行样式设置。在中#maincontent，我们每边有10px的边距和填充，并带有2px的深灰色边框和非常浅的灰色背景（background-color: #ddd）。所有部分中的h3在中心对齐并带有下划线。

边栏和菜单通过display: flex;用于main-areadiv 显示为弹性框。它们的边距和边距分别为10像素和0.5rem，并带有2px的实心＃999边框。背景color设置为#ddd。

使用该flex-basis属性，边栏和菜单的宽度设置为30％。我们已将text-alignment所有弹性项目的设置为'居中'。

页脚在每侧的边距为10像素，在左侧和右侧的边距为10像素，这仅是因为主区域伸缩项已具有10像素的边距。我们使用font-weight属性使文本变为粗体。

对于最终的挑战要求，在小于500像素的屏幕上，我们将弹性项目的默认方向更改为列。这样做会使每个项目占用可用的全部宽度。边栏和菜单也必须采用完整宽度，因此我们添加了flex-basis: 100%;。

否则，它们将分别采用30％和70％的宽度。最后，我们在每个锚标记周围添加了1px的纯白色边框，以区分它们。

高级CSS问题

现在，我们已经介绍了CSS的基础知识和中级问题，下面让我们看一下在CSS前端访谈中可以期待的一些高级问题。我们今天不会讨论所有这些问题，但是我想向您提供一些您需要精通的高级主题才能破解前端面试。

CSS伪选择器

CSS中的伪元素是什么？
假设列表中有15个项目，并且您要设置第9个项目的样式。它使用什么语法？
您如何选择10个项目中的倒数第3个元素？
解释CSS中的伪元素的概念。
是否可以将多个伪类选择器与一个元素一起使用？
如果在:hover伪选择器之前不提及元素名称，将会发生什么？

块格式上下文（BFC）

什么是块格式化上下文？
如何使用display属性创建块格式上下文
将哪个position值添加到中div以创建块格式上下文？
将哪个float值添加到时不会创建块格式化上下文div？

清除技术

你如何与空div一起使用clear: both？
您如何使用该overflow方法？
您如何使用这项clearfix技术？
如何display: flow-root在父元素上使用？

重置与规范CSS

哪个CSS属性用于删除所有选定元素的属性？
我们为什么要添加normalize.css到HTML文档中？
为什么要在HTML文档中添加重置样式表？

一般高级问题

什么时候使用translate()绝对定位？
解释固定，相对，静态放置和绝对元素之间的区别。
什么是CSS中的供应商前缀？我们什么时候使用它们？
解释CSS如何在后台运行。
您将如何优化给定网页的印刷品？
以下哪个@viewport属性将文档锁定在指定的方向，纵向或横向？
screen媒体类型用于什么用途？

接下来要学什么

恭喜你！我希望通读这篇文章并应对挑战有助于您复习CSS知识。本备忘单向您介绍了从入门到高级的最常见CSS问题。还有很多东西要学习！除了我们今天介绍的内容之外，您还需要掌握以下CSS概念和问题：

CSS边框和背景属性
CSS溢出概念
CSS显示，位置，变换
CSS Box-模型
伪元素和类选择器
z-index和堆栈上下文
隐藏读者的内容
使用SVG和视网膜显示器
CSS最佳做法