CSS面试题汇总
在前端开发领域,CSS 是一项不可或缺的技术。无论是页面布局、样式设计还是动画效果,CSS 都扮演着重要的角色。因此,在前端面试中,CSS 相关的知识点往往是面试官重点考察的内容。为了帮助大家更好地准备面试,本文汇总了一些常见的 CSS 面试题,并提供了详细的解答和分析。
一、基础概念
(一)BFC 是什么?它的触发条件有哪些?
BFC(Block Formatting Context) 是块级格式化上下文,它是一个独立的布局环境,内部的元素布局与外部互不影响。触发 BFC 的方式有很多,常见的有:
- 设置浮动(
float
不为none
) overflow
设置为auto
、scroll
或hidden
position
设置为absolute
或fixed
应用场景:
- 解决浮动元素导致父元素高度坍塌的问题
- 解决非浮动元素被浮动元素覆盖的问题
- 解决外边距垂直方向重合的问题
(二)CSS 中的盒模型有哪些?它们的区别是什么?
CSS 中有两种盒模型:W3C 盒模型 和 IE 盒模型。
- W3C 盒模型:元素的总宽度 =
width
+padding
+border
+margin
- IE 盒模型:元素的总宽度 =
width
(width
包括padding
和border
)
在现代浏览器中,默认使用 W3C 盒模型。如果需要使用 IE 盒模型,可以通过设置 box-sizing: border-box
来实现。
(三)CSS 中的 display
属性有哪些值?它们的作用是什么?
display
属性用于控制元素的显示类型,常见的值有:
none
:元素不显示,且不占据空间block
:块级元素,独占一行inline
:行内元素,不独占一行inline-block
:行内块级元素,可以设置宽高,但不独占一行flex
:弹性布局grid
:网格布局
二、布局与样式
(一)如何实现一个元素的水平垂直居中?
水平垂直居中有多种实现方式,主要分为两类:定宽高和不定宽高。
-
定宽高:
- 使用定位 +
margin
:element {position: absolute;left: 50%;top: 50%;margin-left: -250px;margin-top: -250px;width: 500px;height: 500px; }
- 使用定位 +
transform
:element {position: absolute;left: 50%;top: 50%;width: 500px;height: 500px;transform: translate(-50%, -50%); }
- 使用定位 +
-
不定宽高:
- 使用定位 +
transform
:element {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%); }
- 使用定位 +
(二)如何实现多行文本溢出省略效果?
-
CSS 实现方式:
- 单行:
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
- 多行:
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* 行数 */ overflow: hidden;
- 单行:
-
兼容性解决方案:
p {position: relative;line-height: 20px;max-height: 40px;overflow: hidden; } p::after {content: "...";position: absolute;bottom: 0;right: 0;padding-left: 40px;background: -webkit-linear-gradient(left, transparent, #fff 55%);background: -o-linear-gradient(right, transparent, #fff 55%);background: -moz-linear-gradient(right, transparent, #fff 55%);background: linear-gradient(to right, transparent, #fff 55%); }
(三)如何实现一个自适应的正方形?
-
方法一:利用
vw
单位:.square {width: 10vw;height: 10vw;background: red; }
-
方法二:利用
padding-bottom
:.square {width: 10%;padding-bottom: 10%;height: 0;background: red; }
三、性能优化
(一)如何避免重绘和重排?
-
集中改变样式:通过改变类的方式集中改变样式,减少重绘和重排的次数。
const theme = isDark ? 'dark' : 'light'; ele.setAttribute('className', theme);
-
使用
DocumentFragment
:通过DocumentFragment
批量操作 DOM,减少重排次数。var fragment = document.createDocumentFragment(); for (let i = 0; i < 10; i++) {let node = document.createElement("p");node.innerHTML = i;fragment.appendChild(node); } document.body.appendChild(fragment);
-
提升为合成层:使用
will-change
属性将元素提升为合成层,减少重绘和重排的性能开销。#target {will-change: transform; }
(二)如何优化图片加载?
- 使用懒加载:对于页面中的图片,采用懒加载的方式,只有当图片进入可视区域时才加载。
- 使用雪碧图:将多个小图标合并到一张图片中,减少 HTTP 请求次数。
- 选择合适的图片格式:根据图片的特点选择合适的格式,如 JPEG、PNG、WebP 等。
四、高级特性
(一)CSS 动画的实现方式有哪些?
-
transition
:用于实现简单的过渡动画。element {transition: all 0.5s ease; } element:hover {transform: scale(1.2); }
-
animation
:用于实现复杂的动画效果。@keyframes example {0% { transform: scale(1); }50% { transform: scale(1.2); }100% { transform: scale(1); } } element {animation: example 2s infinite; }
(二)如何使用 CSS 实现一个三角形?
利用 border
属性可以实现一个三角形:
div {width: 0;height: 0;border: 10px solid transparent;border-top-color: red;
}
五、面试题实战
(一)@import
和 <link>
的区别
-
从属关系:
@import
是 CSS 提供的语法规则,只能加载 CSS 文件。<link>
是 HTML 提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS 等。
-
加载顺序:
<link>
标签引入的 CSS 文件会并行下载,不阻塞页面渲染。@import
引入的 CSS 文件会串行下载,可能阻塞页面渲染。
-
兼容性:
<link>
标签在所有浏览器中都支持。@import
在 IE5+ 中支持。
-
DOM 可控性:
<link>
标签可以通过 JavaScript 动态修改。@import
无法通过 JavaScript 控制。
(二)如何实现一个三栏布局?
-
方法一:使用
flex
:<div class="container"><div class="left">left</div><div class="main">main</div><div class="right">right</div> </div>
.container {display: flex; } .left {flex-basis: 200px;background: green; } .main {flex: 1;background: red; } .right {flex-basis: 200px;background: green; }
-
方法二:使用
position
和margin
:<div class="container"><div class="left">left</div><div class="right">right</div><div class="main">main</div> </div>
.left, .right {position: absolute;top: 0;background: red; } .left {left: 0;width: 200px; } .right {right: 0;width: 200px; } .main {margin: 0 200px;background: green; }
(三)如何实现一个响应式布局?
-
使用媒体查询:
@media screen and (max-width: 768px) {body {background-color: lightblue;} }
-
使用流式布局:
.container {width: 100%;padding: 0 15px; }
-
结合栅格系统:
.row {display: flex;flex-wrap: wrap; } .col {flex: 1;padding: 15px; }
相关文章:
CSS面试题汇总
在前端开发领域,CSS 是一项不可或缺的技术。无论是页面布局、样式设计还是动画效果,CSS 都扮演着重要的角色。因此,在前端面试中,CSS 相关的知识点往往是面试官重点考察的内容。为了帮助大家更好地准备面试,本文汇总了…...
光谱相机的空间分辨率和时间分辨率
一、空间分辨率 定义与参数 概念:指单个像素对应实际地物的最小尺寸,常用地面采样距离(GSD,单位:米)或像素大小(单位:微米)表示。 分类: 高空…...
【研0学习计划表】
前言 以下学习计划并不固定: 1.若当前阶段的学习任务学习结束,对下一阶段的学习计划进行适当调整,提前进入下一阶段学习任务。 若当前阶段学习任务未完成,则根据每一阶段的学习情况,进行学习总结,然后对下…...
还没用过智能文档编辑器吗?带有AI插件的ONLYOFFICE介绍
在当今激烈的数字化竞争中,文档处理效率直接影响企业的决策与响应速度。然而,许多办公平台仅支持基础流程,查阅、批注和修改仍需借助外部工具,增加了操作复杂性和沟通成本。本文将探讨如何在自己的网站、平台、系统或者服务中集成…...
机器学习前言2
1.机器学习 2.机器学习模型 3.模型评价方法 4.如何选择合适的模型 介绍 机器学习(Machine Learning, ML)是人工智能(AI)的核心分支,致力于通过数据和算法让计算机系统自动“学习”并改进性能,而无需显式编…...
在多个SpringBoot程序中./相对路径下隐患、文件覆盖问题
概述 两个 Spring Boot 应用生成的配置文件被覆盖,是因为 相对路径的解析依赖于当前工作目录(Working Directory),而你可能在运行应用时未正确设置各自的工作目录。以下是具体原因和解决方案: 原因分析 相对路径…...
弦理论的额外维度指的是什么,宇宙中有何依据
弦理论中的额外维度是解释微观世界与宏观宇宙矛盾的关键假设之一。它们并非科幻中的平行宇宙,而是通过严谨的数学框架提出,并可能留下可观测的宇宙学痕迹。以下是具体解析: 一、弦理论为何需要额外维度? 数学自洽性要求 弦理论中…...
FC7300 GPT MCAL 配置引导
一、配置约束 FCPIT:仅FC7240型号芯片支持。如果GPT模块与PWM/ICU/OCU模块使用相同的FTU实例,配置工具将报告一个错误。如果GPT通道使用FTU,时钟源来自PCC,则GptFtuChannelClkSrc必须选择GPT_FTU_BUS_CLK。二、MCU 组件 - 配置WDG采用的定时器时钟 Examle:WDG选用AONTIMER…...
LangFlow技术深度解析:可视化编排LangChain应用的新范式 -(2)流编辑器系统
Flow Editor System | langflow-ai/langflow | DeepWiki 流编辑器系统 相关源文件 流编辑器系统是 Langflow 的核心交互式组件,允许用户直观地创建、编辑和管理 LLM 驱动的应用程序。它提供了一个直观的画布,用户可以在其中添加节点、将其与边缘连接并…...
okcc呼叫中心系统搭建的方案方式
传统企业呼叫中心多采用 PC和手机软件,很难与客户保持良好的沟通。因此,需要建设一套呼叫中心系统来实现与客户实时有效沟通。那么,呼叫中心搭建的方案方式有哪些呢?下面详细介绍一下。 呼叫中心系统的搭建方式需根据企业规模、预算和业务需…...
asp.net IHttpHandler 对分块传输编码的支持,IIs web服务器后端技术
IHttpHandler,不支持分块传输编码(Chunked Transfer)吧? IHttpHandler 对分块传输编码的支持 实际上,IHttpHandler 完全支持分块传输编码(Chunked Transfer Encoding),但具体行为取…...
芍药BAHD酰基转移酶-文献精读128
PoDPBT, a BAHD acyltransferase, catalyses the benzoylation in paeoniflorin biosynthesis in Paeonia ostii PoDPBT,一种BAHD酰基转移酶,在芍药(Paeonia ostii)中催化芍药苷生物合成中的苯甲酰化反应。 摘要 PoDPBT是属于BA…...
GTS-400 系列运动控制器板卡介绍(三十三)---运动程序单线程累加求和
运动控制器函数库的使用 运动控制器驱动程序、dll 文件、例程、Demo 等相关文件请通过固高科技官网下载,网 址为:www.googoltech.com.cn/pro_view-3.html 1 Windows 系统下动态链接库的使用 在 Windows 系统下使用运动控制器,首先要安装驱动程序。在安装前需要提前下载运动…...
C# 面向对象 构造函数带参无参细节解析
继承类构造时会先调用基类构造函数,不显式调用基类构造函数时,默认调用基类无参构造函数,但如果基类没有写无参构造函数,会无法调用从而报错;此时,要么显式的调用基类构造函数,并按其格式带上参…...
数字化工厂升级引擎:Modbus TCP转Profinet网关助力打造柔性生产系统
在当今的工业自动化领域,通信协议扮演着至关重要的角色。Modbus TCP和Profinet是两种广泛使用的工业通信协议,它们分别在不同的应用场景中发挥着重要作用。然而,有时我们可能需要将这两种协议进行转换,以实现不同设备之间的无缝通…...
【编译原理】词法分析器
//简单实现,伪代码 int code,value; strToken :" "; //置strToken为空串 GetChar();GetBC(); if(IsLetter()) beginwhile(IsLetter() or IsDigit())beginConcat();GetChar();endRetract();code:Reserve();if(code0)beginvalue:InsertId(strToken);retu…...
记录一次vue项目页面内嵌iframe页面实现跨域上传和下载附件的功能
功能背景:项目部署在外网,然后其中有一个功能需要上传下载附件,附件是上传到华为云对象存储服务OBS中(私有云),所以采用iframe嵌套页面的方式解决跨域问题。 实现思路: 1、父窗口封装一个组件专…...
【Win32 API】 lstrcpyA()
作用 将字符串复制到指定的字符串缓冲区。 函数 LPSTR lstrcpyA(LPSTR lpString1, LPCSTR lpString2); 参数 lpString1 类型:LPTSTR 一个缓冲区,用于接收由 lpString2 参数指向的字符串的内容。 缓冲区必须足够大才能包含字符串,包括终止…...
报表控件stimulsoft教程:如何在报表和仪表板中创建热图
Stimulsoft Ultimate (原Stimulsoft Reports.Ultimate)是用于创建报表和仪表板的通用工具集。该产品包括用于WinForms、ASP.NET、.NET Core、JavaScript、WPF、PHP、Java和其他环境的完整工具集。无需比较产品功能,Stimulsoft Ultimate包含了…...
Axure疑难杂症:剖析面包屑导航“用户不迷路”(玩转导航)
亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢! Axure产品经理精品视频课已登录CSDN可点击学习https://edu.csdn.net/course/detail/40420 课程主题:剖析面包屑导航“用户不迷路” 主要内容:面包屑导航各种做法 应用场景:页面导航、页面路径、用户选择路径、…...
中exec()函数因$imagePath参数导致的命令注入漏洞
exec(zbarimg -q . $imagePath, $barcodeList, $returnVar); 针对PHP中exec()函数因$imagePath参数导致的命令注入漏洞,以下是安全解决方案和最佳实践: 一、漏洞原理分析 直接拼接用户输入$imagePath到系统命令中,攻击者可通过注入特殊字…...
HTML常用标签用法全解析:构建语义化网页的核心指南
HTML作为网页开发的基石,其标签的合理使用直接影响页面的可读性、SEO效果及维护性。本文系统梳理HTML核心标签的用法,结合语义化设计原则与实战示例,助你构建规范、高效的网页结构。 一、基础结构与排版标签 1.1 文档结构 <!DOCTYPE htm…...
【Linux】动静态库链接原理
📝前言: 这篇文章我们来讲讲Linux——动静态库链接原理 🎬个人简介:努力学习ing 📋个人专栏:Linux 🎀CSDN主页 愚润求学 🌄其他专栏:C学习笔记,C语言入门基础…...
Axure设计的“广东省网络信息化大数据平台”数据可视化大屏
在数据驱动决策的时代,数据可视化大屏成为了展示数据、洞察趋势的重要工具。今天,让我们一同深入了解由Axure设计的“广东省网络信息化大数据平台”数据可视化大屏,看看它如何通过精心的布局和丰富的图表类型,将复杂的数据以直观易…...
linux安装宝塔面板到数据盘
操作很简单,假如数据盘挂载在cipan1,在数据盘新建目录www,为了方便对应。 执行一下命令,创建软连接 ln -s /cipan1/www www 此时,根目录就出现了www文件夹 下面正常安装宝塔即可...
数学实验(Matlab编程基础)
一、函数文件 Matlab编程基础 Matlab作为一种广泛应用于科学计算的工具软件,不仅具有强大的数值计算、符号计算、矩阵运算能力和丰富的绘图功能,同时也具有和C、FORTRAN等高级语言一样进行程序设计 利用Matlab的程序控制功能,可以将有关Ma…...
不同坐标系下MATLAB绘制阵列的方向图
不同坐标系下MATLAB绘制阵列的方向图 球坐标系,极坐标系、直角坐标系 文章目录 前言一、极坐标系二、球坐标系三、直角坐标系总结 前言 \;\;\;\;\; 在阵列信号处理和天线设计中,方向图(Pattern)是描述波束形成性能的关键工具&…...
python可视化:北方省市人口流动与春运数据综合分析5
python可视化:北方省市人口流动与春运数据综合分析5 一、北方省市常住人口数据及变化趋势(2023-2024第一季度) 1. 主要城市常住人口数据(按城市等级分类) 城市类型2023Q1常住人口(万)2024Q1常住人口(万)变化量(万)变…...
Java并发编程-线程池(四)
文章目录 线程池实现原理WorkerWorker 核心设计总结 runWorker(Worker w)总结 线程池实现原理 上一篇我们看了 addWork 方法,那接下来就让我们详细看看内部类Worker。 Worker private final class Workerextends AbstractQueuedSynchronizerimplements Runnable …...
力扣热题——最长相邻不相等子序列 |
题目要求从字符串数组 words 中选出一个最长的子序列,使得该子序列中相邻字符串对应的 groups 数组中的值不同。通过贪心算法,可以高效地解决该问题。具体步骤为:初始化一个结果列表,遍历 words 数组,检查当前字符串的…...
筑牢信息安全防线:涉密计算机与互联网隔离的理论实践与风险防控
在数字化时代,信息安全已成为国家安全体系的重要组成部分。涉密计算机作为承载敏感信息的核心载体,其安全防护工作直接关系到国家利益与社会稳定。违规连接互联网这一行为,如同在严密的防护体系中打开一扇危险的"暗门",…...
sqli-labs靶场29-31关(http参数污染)
目录 前言 less29(单引号http参数污染) less30(双引号http参数污染) less31(双引号括号http参数污染) 前言 在JSP中,使用request.getParameter("id")获取请求参数时,如果存在多个同名参数&a…...
基于Linux环境实现Oracle goldengate远程抽取MySQL同步数据到MySQL
基于Linux环境实现Oracle goldengate远程抽取MySQL同步数据到MySQL 场景说明: 先有项目需要读取生产库数据,但是不能直接读取生产库数据,需要把生产数据同步到一个中间库,下游系统从中间库读取数据。 生产库mysql - OGG - 中间库…...
linux,我启动一个springboot项目, 用java -jar xxx.jar ,但是没多久这个java进程就会自动关掉
当使用 java -jar xxx.jar & 启动 Spring Boot 项目后进程自动关闭时,可能由多种原因导致。以下是常见排查步骤和解决方案: 一、查看日志定位原因 进程异常关闭通常会在控制台或日志中留下线索,建议先获取完整日志: 1. 查看…...
pytorch 14.3 Batch Normalization综合调参实践
文章目录 一、Batch Normalization与Batch_size综合调参二、复杂模型上的Batch_normalization表现1、BN对复杂模型(sigmoid)的影响2、模型复杂度对模型效果的影响3、BN对复杂模型(tanh)的影响 三、包含BN层的神经网络的学习率优化…...
供应链安全检测系列技术规范介绍之一|软件成分分析
软件成分分析的概念及意义 软件成分分析Software Compostition Analysis(SCA)是一种用于管理开源组件应用安全的方法。软件成分分析系统可以快速跟踪和分析应用软件的开源组件,发现相关组件、支持库以及它们之间直接和间接依赖关系࿰…...
pytorch 15.1 学习率调度基本概念与手动实现方法
文章目录 一、学习率对模型训练影响 二、学习率调度基本概念与手动实现方法1.模型调度基本概念2.手动实现学习率调度3.常用学习率调度思路 从本节开始,我们将介绍深度学习中学习率优化方法。学习率作为模型优化的重要超参数,在此前的学习中,我…...
c++ 类的语法4
测试析构函数、虚函数、纯虚函数: void testClass5() {class Parent {public:Parent(int x) { cout << "Parent构造: " << x << endl; }~Parent() {cout << "调用Parent析构函数" << endl;}virtual string toSt…...
品铂科技在UWB行业地位综述(2025年更新)
一、行业领先地位 国内UWB领域头部企业 在2025年中国UWB企业综合实力排行榜中位列第一,技术研发、市场份额及行业影响力均处于领先地位。连续多年获评中国物联网产业联盟“中国最有影响力物联网定位企业”。 2.全球技术竞争力 .2016年IPSN微软国际室内…...
muduo库EventLoop模块详解
muduo库EventLoop模块深度解析 EventLoop是muduo网络库实现Reactor模型的核心调度中枢,负责驱动整个事件循环机制,协调Poller、Channel、TimerQueue等组件的工作。其设计遵循"One Loop Per Thread"原则。 一、核心职责与设计思想 1. 核心职责…...
循环导入(Circular Import) 错误
ImportError: cannot import name event_type_data_tree from partially initialized module routers.ticket (most likely due to a circular import) (E:\ai12345\backend\app\routers\ticket.py) 这是什么错,中文回答 这个错误是 循环导入(Circular …...
基于大数据的租房信息可视化系统的设计与实现【源码+文档+部署】
课题名称 基于大数据的租房信息可视化系统的设计与实现 学 院 专 业 计算机科学与技术 学生姓名 指导教师 一、课题来源及意义 租房市场一直是社会关注的热点问题。随着城市化进程的加速,大量人口涌入城市,导致租房需求激增。传统的租…...
奥运数据可视化:探索数据讲述奥运故事
在数据可视化的世界里,体育数据因其丰富的历史和文化意义,常常成为最有吸引力的主题之一。今天我要分享一个令人着迷的奥运数据可视化项目,它巧妙地利用交互式图表和动态动画,展现了自1896年至今奥运会的发展历程和各国奥运成就的…...
linux环境下 安装svn并且创建svn版本库详细教程
一、安装SVN 通过yum安装Subversion 在Linux系统中执行以下命令安装: yum install subversion -y 安装完成后,验证版本: svnserve --version 二、创建版本库 选择存储路径并创建目录 通常将版本库放在/var/svn或/usr/local/…...
STM32控制电机
初始化时钟:在 STM32 的程序中,初始化系统时钟,一般会使用 RCC(Reset and Clock Control)相关函数来配置时钟。例如,对于 STM32F103 系列,可能会使用 RCC_APB2PeriphClockCmd 函数来使能 GPIO 和…...
Ubuntu 更改 Nginx 版本
将 1.25 降为 1.18 先卸载干净 # 1. 完全卸载当前Nginx sudo apt purge nginx nginx-common nginx-core# 2. 清理残留配置 sudo apt autoremove sudo rm -rf /etc/apt/sources.list.d/nginx*.list修改仓库地址 # 添加仓库(通用稳定版仓库) codename$(…...
微服务初步学习
系统架构演变过程 一、单体架构 前后端都在一个项目中,包括我们现在的前后端分离开发,都可以看作是一个单体项目。 二、集群架构 把一个服务部署多次,可以解决服务不够的问题,但是有些不必要的功能也跟着部署多次。 三、垂直架…...
旧 docker 版本通过 nvkind 搭建虚拟多节点 gpu 集群的坑
踩坑 参考nvkind教程安装到Setup这一步,由于docker版本较旧,–cdi.enabled 和 config 参数执行不了 手动修改 /etc/docker/daemon.json 配置文件 "features": {"cdi": true}手动修改 /etc/nvidia-container-runtime/config.toml 配…...
Fabric 服务端插件开发简述与聊天事件监听转发
原文链接:Fabric 服务端插件开发简述与聊天事件监听转发 < Ping通途说 0. 引言 以前写过Spigot的插件,非常简单,仅需调用官方封装好的Event类即可。但Fabric这边在开发时由于官方文档和现有互联网资料来看,可能会具有一定的误…...
Wise Disk Cleaner:免费系统清理工具,释放空间,提升性能
Wise Disk Cleaner是一款功能强大且完全免费的系统清理工具,专为帮助用户清理系统中的无用文件和垃圾文件而设计。它能够有效释放磁盘空间,提高系统运行速度,确保电脑始终保持最佳性能。无论是日常维护还是深度清理,Wise Disk Cle…...