2024前端面试真题【CSS篇】

已于 2024-07-17 15:48:04 修改
阅读量855 收藏 27
点赞数 26
分类专栏： CSS 面试锦囊 CSS3 文章标签： 前端 面试 css
于 2024-07-09 23:27:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leatitia/article/details/140304825
版权
面试锦囊 同时被 3 个专栏收录
13 篇文章 1 订阅
订阅专栏
CSS
3 篇文章 0 订阅
订阅专栏
CSS3
3 篇文章 0 订阅
订阅专栏

盒子模型

盒子模型：box-sizing，描述了文档中的元素如何生成矩形盒子，并通过这些盒子的布局来组织和设计网页。包含content、padding、margin、border四个部分。

分类

  • W3C盒子模型（content-box）：标准盒子模型，Width = width
  • IE盒子模型（border-box）：Width = width + padding + border

BFC

BFC：块级上格式下文，是一块具有自己渲染规则的渲染区域。
渲染规则：

  • 内部盒子垂直向上一个接一个堆叠
  • 同一个BFC的两个相邻盒子的margin会重叠
  • BFC的区域不会与float元素区域重叠
  • 计算BFC的高度时，浮动子元素也参与计算
  • 每个元素的左外边距与包含块的左边界相接触；
    -BFC就是一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

BFC的触发条件

触发BFC的条件包含但不局限于：

  • 根元素
  • 浮动元素：left、right
  • overflow的值除了visible外
  • display的值为inline-、flex-等；
  • position的值为absolute或fixed

BFC应用场景

  1. 防止margin塌陷
  2. 清除内部浮动
  3. 自适应多栏布局

响应式设计

特点

  • 同时适配PC + 平板 + 手机等；
  • 根据视口调整模块大小和位置

实现方式

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。为了处理移动端，页面头部必须有meta声明viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"></meta>

实现方式：

  • 媒体查询：@media screen and (max-width: 1920px) {...}
  • 百分比：height、width属性的百分比依托父元素的宽高，但是其它属性不完全依赖；
  • vw/vh：相对于视图窗口的宽高；
  • rem：相对于根元素html的font-size属性，默认情况下浏览器大小为16px，此时，1rem = 16px

元素的水平垂直居中方法

实现方式：

  1. 定位 + margin: auto
  2. 定位 + margin: 负值
  3. 定位 + transform
  4. table布局
  5. flex布局
  6. grid布局：网格布局

多栏布局、剩余宽度自适应

两栏布局

两栏布局一般是一个定宽栏和一个自适应的栏并排展示存在。
实现思路：

  • float左浮左边栏
  • 右边模块使用margin-left撑出内容块做内容展示
  • 为父级元素添加BFC，防止下方元素飞向上
.box {
	overflow: hidden;
}
.left {
	width: 200px;
	flot: left;
	height: 100%;
}
.right {
	margin-left: 200px;
	height: 100%;
}

三栏布局

实现思路：

  • 两边固定宽度、float，中间使用margin
  • 两边定宽、使用absolute，中间使用margin
  • 两边使用float和负margin
  • flex实现

弹性布局

  • flex-direction
  • flex-wrap
  • flex-flow: flex-direction flex-wrap;
  • justify-content
  • align-items：定义项目在交叉轴上如何对齐
  • align-content：定义多根轴线的对齐方式。
  • order：项目的排列顺序，数值越小，排列越靠前，默认为0
  • flex-grow：定义项目的放大比例，默认为0，即存在剩余空间也不放大；
  • flex-shrink：定义项目的缩放比例
  • flex-basis：设置元素在主轴上的初始尺寸，默认为内容决定；
  • align-self：单个项目的对齐方式

CSS选择器

分类：

  • id选择器
  • 类选择器
  • 标签选择器
  • 后代选择器（div p）
  • 子选择器（div > p）
  • 相邻同胞选择器（div + p）
  • 群组选择器（div, p）
  • 伪类选择器：（first-child、:nth-child()等）
  • 属性选择器（[attribute~=value]等）
  • 层次选择器（p~ul：选择前面有p元素的每个ul）

实现单行/多行文本溢出的省略样式

  1. 单行文本溢出省略
<style>
.text-ellipsis {
	overflow: hidden;
	line-height: 40px;
	height: 40px;
	width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap; /*文本不换行*/
}
</style>
  1. 多行文本溢出省略
  • 基于高度截断：伪元素+定位
<style>
.text-ellipsis1 {
	position: relative;
	line-height: 20px;
	height: 40px;
	overflow: hidden;
	word-break: break-all;
}
.text-ellipsis1:after {
	content: '...';
	position: absolute;
	bottom: 0px;
	right: 0px;
	padding: 0 20px 0 10px;
}
</style>
  • 基于行数截断（-webkit-box-clamp）：
<style>
.text-ellipsis2 {
	width:100%;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>

CSS 实现一个三角形

<style>
.border {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 50px 50px;
	border-color: transparent transparent #ff0000;
}
</style>

CSS3 动画

  • transition实现渐变动画：transition: all 2s ease-in 500ms;
  • transform转变动画：scale、translate、rotate、skew
  • animation实现自定义动画：通过@keyframes来定义关键帧
<style>
@keyframes rotate {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(180deg)
	}
}
div {
	animation: rotate 2s;
}
</style>

CSS的设备像素、css像素、设备独立像素、dpr、ppi

css像素

逻辑像素**：也称为CSS像素，设备独立像素DIP，是一种虚拟的像素单位，用于设备元素在设备上的真实风格。一个逻辑像素可以对应多个物理像素。

css像素以px为后缀，是一个长度单位，是一种相对单位，相对的是设备像素。
一般情况，页面缩放比为1,1个css像素 = 1个设备独立像素。

px会受到下面的因素的影响而变化：

  • 每英寸像素（PPI）
  • 设备像素比（DPR）

设备像素（物理像素）

物理像素：是设备屏幕实际拥有的最小单位，这些像素点是真实存在的，决定了屏幕的分辨率和显示质量。固定不变，单位为pt。

设备独立像素

设备独立像素，与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念。
一个设备独立像素里可能包含一个或者多个物理像素点，包含的越多则屏幕看起来越清晰。
至于1个虚拟像素被换算成几个物理像素，这个数值就成为设备像素比（DPR）。

设备像素比（DPR）

DPR = 设备像素 / 设备独立像素，在window中通过window.devicePixelRatio获取。

总结

  • 无缩放情况下，1个css像素 = 1个设备独立像素；
  • 设备像素由屏幕生成之后确定，不变；
  • PC中，1个设备独立像素 = 1个设备像素（未缩放情况下）；
  • 移动端中，标准屏幕（160ppi）下，1个设备独立像素 = 1个设备像素；
  • 设备像素比（dpr） = 设备像素 / 设备独立像素；
  • 每英寸像素（ppi），值越大越清晰

px、em、rem、vh、vw

  • px：绝对单位，大小与元素的其它属性无关；

  • em：相对长度单位，相对于当前对象内文本的字体尺寸，特点

    • em的值不固定；
    • em会继承父级元素的字体大小；
    • em是相对单位，相对于当前对象内文本的字体尺寸；
    • 任意浏览器的默认字体高都是16px（1em = 16px）；
    • 为了简化font-size的计算，我们只需要配置body的font-size: 62.5%;即可，此时：1em = 10px。

  • rem：相对单位，相对HTML根元素的font-size的值。

Chrome支持12px

解决方案：

  • zoom: 0.8;
  • -webkit-transform: scale()
  • -webkit-text-size-adjust: none;

回流和重绘

回流：布局引擎根据各种样式计算每个盒子在页面上的大小和位置；在页面初始渲染阶段，会留不可避免的会触发。
重绘：当计算好盒模型的位置、大小和其它属性后，浏览器会根据每个盒子的特性进行绘制。

触发回流一定会触发重绘。回流的阶段主要是计算节点的位置和集合信息，当页面布局或者几何信息发生变化，则需要回流。重绘的阶段主要是做样式修改渲染。

如何减少回流

  • 样式组合
  • 避免内联样式使用
  • 复杂的动画应尽可能脱离文档流；
  • 使用css3硬件加速，transform等动画不会引起回流重绘；
  • 等；

css预编译语言

css提高性能的方法有哪些？

  • 内联首屏关键css
  • 异步加载css
  • 资源压缩
  • 合理使用选择器
  • 不要使用@import：会影响浏览器的并行下载，是的页面夹杂延迟
  • 把小的icon图片转base64编码使用等

移动端适配、兼容问题

适配

目前主流的IOS设备主要有iPhone SE（4英寸）、iPhone6s/8E（4.7英寸）等，都是采用了Retina视网膜屏幕，其中，iPhone 6s/7/8 Plus 和 iPhone X 采用的是3倍率的分辨率，其他都是采用的2倍率的分辨率，无论是栏高度还是应用图标，设计师提供给开发人员的切片大小，前者始终是后者的1.5倍，并分别以@3x和@2x在文件名结尾命名，程序再根据不同分辨率自动加载@3x或者@2x的切片。

设计适配
一般情况下，选择中间尺寸750 * 1134作为基准，向上和向下适配。

兼容问题

  1. ios端兼容input光标高度

    描述：input输入框，在安卓上没问题，但是IOS上点击输入，光标高度等于父盒子高度（过长）。这是由于通常我们用 height 属性设置行间的高度和line-height设置行间的距离，当点击输入的时候，光标的高度就自动与父盒子保持一致了。
    解决办法
    高度height和line-height内容用padding撑开。

  2. ios端微信h5页面上下滑动时卡顿、页面缺失

    描述：在ios端，上下滑动页面是，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况。这是由于按住奥使用的是webkit内核，ios使用的是Safari内核，Safari对于over-scrolling用了原生空间来实现。对于有webkit-over-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。
    解决办法
    在公共样式中，添加* {-webkit-over-scrolling: touch}即可。

  3. IOS键盘唤起，键盘收起以后页面不归位

    描述：输入呢你人，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑。这是由于固定定位的元素，在元素内input框聚焦的时候，弹出的软键盘占位，失去焦点的时候软键盘小时，但是还是占位的。导致input框不能再次输入。
    position: fixed的元素在ios里，收起键盘的时候会被顶上去，特别是第三方键盘
    解决办法

<div class="list-warp">
	<divclass="title">
		<span>投·被保险人姓名</span>
	</div>
	<divclass="content">
		<input class="content-input"placeholder="请输入姓名"v-model="peopleList.name" @focus="changefocus()" @blur.prevent="changeBlur()"/>
	</div> 
</div>

changeBlur(){ 
	let u = navigator.userAgent, app = navigator.appVersion; 
	let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
	
	if(isIOS){ 
		setTimeout(() => {
			const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
			window.scrollTo(0, Math.max(scrollHeight - 1, 0)) }, 200
		)}
	}
}

  1. 安卓弹出的键盘遮盖文本框

    描述：安卓微信H5弹出软键盘后遮挡住input框。

    解决办法
    给input 和 textarea标签添加focus事件。判断安卓机型操作下，延迟0.5s，将输入框滚动至可视区域内（如果已经滚动到底部了，则无法再展示）

  2. Vue中路由使用hash模式，开发微信H5页面分享时，安卓上设置分享成功，但是ios分享异常
    描述：ios当前页分享给好友，点进去是正常的，如果二次分享，则跳转至首页；使用Vue router跳转到第二个页面后再分享时，分享设置失败。这是由于js sdk是后端进行签署，前端校验，但是貌似系统不一样，传参内容也不一样，每次获取URL并不能获取到这些参数。

    解决办法
    使用window.location.href跳转，代替VueRouter跳转方法。

LeaT07
关注
专栏目录
2024css超全面试题css经典面试题css理论知识前端面试题css最全的题包括面试题多年的积累。
碧海朝天素
04-09 923
圆角（边框半径）：border-radius 属性用于创建圆角边框图片：border-image: url(border.png) 30 30 round盒阴影：box-shadow: 10px 10px 5px #888888媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。
【面试题】2024前端面试真题_中国电信前端面试(1)
2401_84437604的博客
05-01 927
推荐：★★★★★前端面试题库2、前端技术导航大全推荐：★★★★★前端技术导航大全。
20道高频CSS面试题快问快答
前端啤酒屋
11-08 4056
在面试过程中，面试官通常会使用快问快答的方式来快速评估面试者的基础知识、思维能力和反应速度。来看一下进阶CSS常会问哪些高频问题吧！
web前端前端开发培训，CSS标准文档流
m0_60229361的博客
07-23 129
html、css基础 1，link和@import的区别？ 从属关系区别： link属于html标签，而@import是css提供的。 加载顺序区别： 页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载。 兼容性区别： import只在IE5以上才能识别，而link是html标签，无兼容问题。 dom可操作性区别： 可以通过JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式； 权重区
2024前端面试题-css篇
FormAda的博客
08-21 1158
使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决，只要加了-webkit-text-size-adjust:none;收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素，可以使用display：block/inline-block/...；‌3.使用display属性‌：将元素的display属性设置为inline-block、table-cell、table-caption、flex或grid等也可以触发BFC。
2024最新css3面试题理论，前端css面试题，移动端面试题理论
2401_83621541的博客
03-21 405
Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大 的 灵活性。任何一个容器都可以指定为 Flex 布局。14、Flex父项常见属性。rem是一个相对单位，rem的是相对于html元素的字体大小，没********有继承性****em是一个相对单位，是相对于父元素字体大小，有继承性。****px是一个“绝对单位”，就是css中定义的像素，利用px设置字体大小及元素的宽高等，比较稳定和精确。19、什么是媒体查询。在pc端中，视口指的是在pc端中浏览器的可视区域；
快速理解Vue组件化开发，爆肝半万字，干货太多，”建议收藏细品“
2401_84434331的博客
05-03 289
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
2024年最全CSS前端经典面试题及解析——小白入门必备，2024年最新计算机网络专业面试常问问题
2401_84617080的博客
05-14 973
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】在大型项目中，我会使用 Clearfix 方法，在需要的地方使用.clearfix。设置的方法可能使其子元素显示不完整，当子元素的高度大于父元素时。
前端面试，独有前端面试题详解，前端面试刷题必备，1000+前端面试真题，Html、Css、JavaScript、Vue
10-25
前端面试，独有前端面试题详解，前端面试刷题必备，1000+前端面试真题，Html、Css、JavaScript、Vue、React、Node、TypeScript、Webpack、算法、网络与安全、浏览器 最近更新 Day385:在一个 DOM 上同时绑定两个点击...
前端面试、面试真题整理
10-09
"前端面试、面试真题整理"这个资源包含了全面的面试准备材料，旨在帮助应聘者深入理解和掌握前端开发中的核心概念和技术。以下是对这些关键知识点的详细阐述： 1. HTML（超文本标记语言）：HTML是构建网页的基础，...
100IT名企前端面试真题
10-26
5. CSS布局优化：div+css布局相较于传统的table布局，提供了更简洁的页面结构、更快的加载速度、更好的SEO优化效果以及更方便的改版能力。这样的布局方式使得前端开发更加高效和现代。 6. HTML标签属性的区别和用途...
2024CSS前端面试题
weixin_43954835的博客
02-23 725
2024最新前端CSS面试题
2024css面试题理论题必修课经典面试题，html实体字符
2301_76379381的博客
04-03 778
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
2020大前端面试题（基础篇）
Mark Sheng的博客
12-03 810
1.前端简历书写注意事项 关于前端简历书写的建议： 不要将自己的爱好兴趣写进去 简历页数不超过2页 不写与前端无关的技术，当然可以适当写一门你熟悉的后端语言 不给自己挖坑，斟酌了解、熟悉、精通用词 简历中不要出现错误的单词拼写，注意技术名词的大小写 作为理工科的程序员，也要将简历中的语言表达通顺 切记不要写与前端无关的工作经验 简历不要造假，随时可能被 Pass 项目经历中是否担任过一些重要的职位，如小组长、负责人 突出个人亮点、做过什么大型项目、修改过公司什么难度的 ..
CSS面试题汇总（一）
酸狗的博客
10-12 5119
1. 实现不使用 border 画出 1px 高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。 参考答案： <div style="height:1px;overflow:hidden;background:red"></div> 2. 介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？ 参考答案： （1）有两种， IE 盒子模型、W3C 盒子模型； （2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(
经典css系列面试题。，2024年最新护理面试问题及答案
m0_61067876的博客
04-14 780
在pc端中，视口指的是在pc端中浏览器的可视区域；1是布局视口，2是视觉视口，3是理想视口移动端指的视口就是布局视口媒体查询是CSS3新语法。使用媒体查询，可以针对不同的媒体类型定义不同的样式媒体查询可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询1.百分比布局，但是无法对字体，边框等比例缩放2.弹性盒子布局 display:flex。
2024最新css3面试题理论，前端css面试题，移动端面试题理论。
最新发布
2401_86400201的博客
09-03 1437
Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大 的 灵活性。任何一个容器都可以指定为 Flex 布局。14、Flex父项常见属性。rem是一个相对单位，rem的是相对于html元素的字体大小，没********有继承性****em是一个相对单位，是相对于父元素字体大小，有继承性。****px是一个“绝对单位”，就是css中定义的像素，利用px设置字体大小及元素的宽高等，比较稳定和精确。19、什么是媒体查询。在pc端中，视口指的是在pc端中浏览器的可视区域；
前端面试必备：HTML/CSS真题解析
"前端面试宝典是一份涵盖了HTML、CSS、JavaScript等内容的面试题集，包含真实面试题目和答案，并带有索引目录，方便查阅。这份资料特别关注了前端开发中的浏览器兼容性、HTML文档声明、布局技术、元素属性以及设计...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值