整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
**2024 高频前端面试题汇总之CSS篇（二）**
**引言：**
在Web前端领域，CSS作为视觉呈现的灵魂，一直是各大公司面试考核的重点之一。为了帮助广大前端开发者充分准备即将到来的面试，本文将继续盘点2024年高频CSS面试题目，并通过详尽的解析与实例代码，带您巩固和拓展CSS知识体系，提升面试成功率。
## **一、CSS布局进阶**
**题目1：Flexbox布局的基本原理与应用场景**
**解答：**
Flexbox布局（弹性盒布局）是一种现代化的CSS布局方式，通过`display: flex`声明父元素为弹性容器，然后通过一系列相关的属性（如`flex-direction`、`justify-content`、`align-items`等）对子元素进行灵活的定位与尺寸分配。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: flex;
flex-direction: row; /* 主轴方向，默认为水平 */
justify-content: space-around; /* 主轴上的对齐方式 */
align-items: center; /* 交叉轴上的对齐方式 */
}
.box {
flex: 1; /* 子元素按比例分配空间 */
border: 1px solid black;
padding: 1em;
margin: 0.5em;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
```
**题目2：Grid布局的特点与难点**
**解答：**
CSS Grid布局提供了一个二维网格系统，用于定义行与列，并精确放置和对齐项目。相较于Flexbox，Grid布局更适合处理复杂的二维布局问题。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 创建3等宽的列 */
grid-gap: 10px; /* 设置行与列之间的间距 */
}
.grid-item {
border: 1px solid black;
padding: 1em;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<!-- ... 更多网格项 -->
</div>
</body>
</html>
```
## **二、CSS选择器与优先级**
**题目3：CSS选择器的层级关系与权重计算**
**解答：**
CSS选择器的优先级由内联样式（1000）、ID选择器（100）、类选择器（10）、属性选择器（10）、伪类（10）、元素选择器（1）和通用选择器（0）依次递减。当多个选择器应用于同一元素时，优先级高的规则生效。
```css
/* 例子：优先级比较 */
#id .class[attr] p:hover {
color: red; /* 优先级：1013 */
}
.class p {
color: blue; /* 优先级：11 */
}
```
## **三、CSS单位与响应式设计**
**题目4：rem、em与vw/vh单位在响应式设计中的应用**
**解答：**
- `rem`是相对于根元素（通常是`html`）的字体大小的单位，便于实现整体布局的响应式调整。
- `em`是相对于父元素字体大小的单位，常用于局部相对单位的设定。
- `vw/vh`分别代表视窗宽度和高度的百分比，适合创建完全依赖视口大小的响应式设计。
```css
/* 示例 */
html {
font-size: 16px; /* 根元素字体大小 */
}
.container {
width: 80%; /* 百分比单位 */
}
.title {
font-size: 2rem; /* 相对于根元素字体大小 */
}
.subtitle {
font-size: 1.2em; /* 相对于父元素字体大小 */
}
.hero-image {
width: 100vw; /* 占满整个视口宽度 */
height: 50vh; /* 占视口高度的一半 */
}
```
## **四、CSS性能优化**
**题目5：如何优化CSS以提高渲染性能？**
**解答：**
- 减少CSS文件体积，通过合并、压缩和精简CSS代码。
- 采用现代CSS特性替代旧有的布局和定位方式，如Flexbox和Grid布局。
- 避免过于复杂的选择器，减少CSS解析时间和渲染性能损耗。
- 使用媒体查询优化不同设备的加载与渲染，实现按需加载CSS。
- 利用CSS3硬件加速属性（如`transform`和`will-change`）提高动画性能。
以上只是部分CSS高频面试题的解析与示例，希望能帮助您在面试前全方位地复习和掌握CSS的核心知识点。持续关注本系列教程，我们将持续提供更多有价值的前端面试攻略，助您在职业生涯中乘风破浪，披荆斩棘！
一篇文章，小编结合自己的实际和各种面试经历总结整理了一些比较重点和常用的CSS知识点，大伙可以边看边动手写一写，实践是检验真理的唯一标准嘛。
1.px (pixel，像素)
是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。
2.em(相对长度单位，相对于当前对象内文本的字体尺寸)
是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。
3.rem(root em，根em)
rem是一个相对单位，1rem等于html元素上字体设置的大小。我们只要设置html上font-size的大小，就可以改变rem所代表的大小。这样我们就有了一个可控的统一参考系。我们现在有两个目标：
rem与em的区别：
4.vw、vh
css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。各个单位具体的含义如下：
这里我们发现视窗宽高都是100vw／100vh，那么vw或者vh，下简称vw，很类似百分比单位。vw和%的区别为：
圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局
1.相对布局
.container { width: 100%; min-height: 300px; padding: 0 60px; box-sizing: border-box;}
.container > div { position: relative; float: left;}
.left, .right { width: 60px; height: 100%;}
.left { left: -60px; margin-left: -100%;}
.right { right: 0; margin-right: -100%;}
.main { width: 100%; height: 100%;}
2.flex布局
.container {
width: 100%;
min-height: 300px;
display: flex;
}
.main {
flex-grow: 1;
}
.left {
order: -1;
flex-basis: 60px;
}
.right {
flex-basis: 60px;
}
3.绝对布局
.container {
width: 100%;
min-height: 300px;
position: relative;
}
.container > div {
position: absolute;
}
.left, .right {
width: 60px;
height: 100%;
}
.main {
width: calc(100% - 120px);
height: 100%;
left: 60px;
}
.left {
left: 0;
}
.right {
right: 0;
}
流式布局使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进 行伸缩，不受固定像素的限制，内容向两侧填充。
响应式开发利用CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页布局。
由于响应式开发显得繁琐些，一般使用第三方响应式框架来完成，比如 bootstrap 来完成一部分工作，当然也 可以自己写响应式。
CSS 中的 transform，transition 和 animation 是分开的三部分内容，其中 transfrom 主要是控制元素变形，并没有一个时间控制的概念，而 transition 和 animation 才是动画的部分，它们可以控制在一个时间段里，元素在两个或以上的状态切换的效果。
1.transition
transition 属性：
transition 相关的事件
transitionend 事件会在 transition 动画结束的时候触发。通常我们会在动画结束后执行一些方法，例如继续下一个动画效果或者其他。Zepto.js 中的动画方法都是使用 CSS 动画属性来处理，而其中动画运行后的回调便应该是使用这个事件来处理。
2.animation
虽然 transition已经提供了很棒的动画效果了，但是我们只能够控制从一个状态到达另外一个状态，没法来控制多个状态的不断变化，而 animation 而帮助我们实现了这一点。使用 animation 的前提是我们需要先使用 @keyframes 来定义一个动画效果，@keyframes 定义的规则可以用来控制动画过程中的各个状态的情况，语法大抵是这个样子：
@keyframes test {
from { left: 0; top: 0; }
to { left: 100%; top: 100%; }
}
@keyframes 关键词后跟动画的名字，然后是一个块，块中有动画进度的各个选择器，选择器后的块则依旧是我们常见的各个 CSS 样式属性。
animation 属性:
由于 animation 提供了循环的控制，所以还有两个值是 alternate 和 alternate-reverse，这两个值会在每次循环开始的时候调转动画方向，只不过是起始的方向不同。
animation 相关事件
可以通过绑定事件来监听 animation 的几个状态，这些事件分别是：
BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。要明白BFC到底是什么，首先来看看什么是视觉格式化模型。
视觉格式化模型
视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制，它也是CSS中的一个概念。
视觉格式化模型定义了盒（Box）的生成，盒主要包括了块盒、行内盒、匿名盒（没有名字不能被选择器选中的盒）以及一些实验性的盒（未来可能添加到规范中）。盒的类型由display属性决定。
怎样才能形成BFC
根元素或其它包含它的元素；
浮动 (元素的float不为none)；
绝对定位元素 (元素的position为absolute或fixed)；
行内块inline-blocks(元素的 display: inline-block)；
表格单元格(元素的display: table-cell，HTML表格单元格默认属性)；
overflow的值不为visible的元素；
弹性盒 flex boxes (元素的display: flex或inline-flex)；
但其中，最常见的就是overflow:hidden、float:left/right、position:absolute。也就是说，每次看到这些属性的时候，就代表了该元素已经创建了一个BFC了。
浏览器对BFC区域的约束规则：
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。我们可以利用BFC的这个特性来做很多事。
基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
容器的属性：
1.flex-direction： 属性决定主轴的方向（即项目的排列方向）
2.flex-wrap ：默认情况下，项目都排在一条线（又称"轴线"）上
3.flex-flow：是flex-direction属性和flex-wrap属性的简写形式
4.justify-content：定义了项目在主轴上的对齐方式
5.align-items：定义项目在交叉轴上如何对齐
6.align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
项目的属性
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
grid 布局是 css 中的一种新的布局方式，对盒子和盒子内容的位置及尺寸有很强的控制能力。与 flex 不同，flex 着重于单轴，而 grid 适应于多轴，下面就来做个简单的介绍。
flex 布局示意
grid 布局示意
基本概念
设置 display: grid; 的元素称为容器，它的直接子元素称为项目，但注意子孙元素不是项目。
容器属性
grid 容器的属性还是有点多的，一共有 18 个，但是很多可以通过简写完成，所以也不用太紧张。
设置CSS盒模型为标准模型或IE模型。标准模型的宽度只包括content，而IE盒模型包括border和padding，box-sizing属性可以为三个值之一：
有时候动画可能会导致用户的电脑卡顿，你可以在特定元素中使用硬件加速来避免这个问题：
.block {
transform: translateZ(0);
}
你并不会察觉有什么不同，但浏览器会为这个元素进行3D硬件加速，在will-change这个特殊属性未被全面支持之前，这个方法还是很有用的。
这里总结CSS中比较常用也是比较重要的十三个知识点，内容比较多，希望大伙能多看多写，好的程序员是写出来的，这也算是小编对自己的激励吧。
oder
这是接上一篇JS篇的内容，没有看到的朋友可以关注我们，在找对应的文章。
吐槽几句：前几天自己在掘金发布了俩篇自己毕业找工作的面试总结，小火了一把之后...没想到评论区炸开了，有diss我的，也有支持我的。更有的伙伴们特地到我们的公众号（IT面试填坑小分队）留言谢谢我们，这让我保持了动力，因为每次文章的更新对于我来说都是一次鞭策，让我写了一天需求回家之后没有懈怠，继续保持学习状态。
我的掘金：https://juejin.im/user/5b4ca7c76fb9a04fd55ac00d/posts
有经验、想指导的：可以留言指导，你的指导都可以帮助我和看官们少走一些弯路，我们都会由衷感谢您，
和我一样刚毕业的童鞋们: 我们可以一块交流，不同的见解可能碰撞出美妙的答案。
准备入行、准备面试的童鞋们，希望你们不要单纯的去背面试题，学会理解知识，行业浮躁但是行业中的我们不要浮躁。背一道题你只会一道，理解一道题、一个知识点可以帮你会做一个类型的题，后者更累可是效率也更高，希望马上要实习或者校招的你们有一个好的未来。加油！
话不多说~~
BFC的内容需要好好理解、一般会结合实际问题：比如margin重叠问题。
结合上个问题。元素的padding是相对于父元素的宽度来计算的，那么答案是不是一目了然。还有一个答案可以参考下一个问题。
针对于万一让你说两种情况或者flex布局你紧张的遗忘了，请大胆使用圣杯布局与双飞燕布局大法。
亲身经历过一小段时间的rem布局，可以了解一下Retina屏，以及一些物理像素的知识，淘宝的无限适配可以了解一下，媒体查询也不要忘记。
这个问题涉及一个渲染层的内容。如果回答出来可能顺势就问到如何创建一个渲染层。
对于浏览器重拍重绘问题不再这里讨论了，我还得捋一捋忘的厉害，在以后继续学习浏览器性能方面一定会再拿出来讨论。
上面这个小箩筐问题相对来说，见的应该已经很多了。而且是真的出现在自己平时的学习与做的小项目中，我也就就不多提了，也不确定面试会不会问。
这些css问题在我看来使用率是真的很高的。移动端rem布局、flex布局、css动画、高度宽度百分比问题。尤其是在接触与vue、react这种框架一块使用的UI库比如element-ui以及ant-desgin你没有这些知识，没有这些知识的储备想要修改这些UI库的样式达到自己想要的效果就很难了。css是一个黑魔法，知识可以说是无穷无尽，希望大家正视它。
虽然做的是面试题的总结。但是每每回想这些面试题的内容，我就在考虑这些知识是不是很难一蹴而就、一学就会的？好像是。 做为一名刚入行的小白菜前端，每天做着产品经理给的需求，除了周六日（双休的公司还蛮幸福的）已经很难找到大块时间去学习了，周六周天想要打磨自己的基础，但是一想上了五天班看什么书，玩去咯。每一项基础知识都在改变你写代码的习惯。当你知道translate会创建新的层的时候，不考虑兼容的话，你就会更多的使用它。当你了解了重排重绘的原因，你有意回避这些的出现，你的项目流畅性就会越来越好，扎实的基础真的可以帮助你更合理的考虑问题与编码。扯远了扯远了，愿每一位看官看完这一段鸡汤有一个好心情。
*请认真填写需求信息，我们会在24小时内与您取得联系。
