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

作者 : IT 大叔 本文共6813个字,预计阅读时间需要18分钟 发布时间: 2020-08-26

CSS面试问题:前端面试速查表插图

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

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

今天,我们将介绍:

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

前端采访。

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

前端面试CSS

CSS基础刷新

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

什么是CSS?

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

CSS2和CSS3有什么区别?

有四个主要区别:

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

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

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

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

集成CSS的三种流行方法:

  1. 用 inline-styling
  2. 使用style-tagsHTML页的页眉
  3. 将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面试问题:前端面试速查表插图(2)

解决方案评论: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中使用两种类型的渐变:“线性渐变”和“径向渐变”。

您如何设置h2h3具有相同的样式?

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

h2, h3 {
 
color: yellow;
 
}

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

默认大小为16像素。

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

在CSS中,length是一个数字,后跟一个长度单位。CSS有两种长度类型,用不同的单位表示:相对长度和绝对长度。相对单位如下:emexchremvwvhvminvmax,和%。Abolsute单位如下:cmmminpxpt,和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面试问题:前端面试速查表插图(4)

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

我们已将10个像素分配font-size给HTML标签,这是我们页面的根元素。我们已成立coralbackground-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: nonefloat: 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面试问题:前端面试速查表插图(6)

解决方案评论:CSS浮动

首先,我们通过设置文本样式font-sizefont-familyline-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面试问题:前端面试速查表插图(8)

解决方案评论: CSS Flexbox

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

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

接下来,我们通过设置样式的锚标签font-familycolor 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最佳做法
免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » CSS面试问题:前端面试速查表

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论