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-tags
HTML页的页眉 - 将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-area
div 显示为弹性框。它们的边距和边距分别为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
- 没有金币/金币不足 怎么办?
- 本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
- 所有资源普通会员都能下载吗?
- 本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。