2023前端面试题集(含答案)之HTML+CSS篇(一)
在又到了金三银四的招聘季,不管你是刚入行的小白,亦或是混迹职场的老鸟,还在为面试前端工程师时不知道面试官要问什么怎么回答而苦恼吗?为了帮助你获得面试官的青睐,顺利通过面试,跳槽进入大厂,走上人生巅峰,整理了一些前端面试,希望对在面试中或学习工作中的你有所帮助!
01、CSS3的新特性
盒子阴影:(box-shadow);
边框:边框圆角 (border-radius)、边框背景图片 (border-image);
IE(怪异)盒模型:(box-sizing:border-box);
背景:背景图片尺寸(background-size)、规定背景图片的位置相对于什么位置来定位(background-origin)、背景的绘制区域(background-clip);
弹性布局:flex;
渐变:线性渐变(linear-gradient)、径向渐变(radial-gradient);
过渡效果:transition;
2D转换:transform:移动translate(x,y)、旋转rotate(x,y)、翻转skew(x,y)、缩放scale(x,y);
3D转换:translate3d(tx,ty,tz)、rotate3d(x, y, z, a)、scale3d(sx, sy, sz)、perspective(l)等;
自定义动画:animation;
媒体查询:@media。
02、H5的新增特性
新增语义化标签:header、nav、article、section、aside、footer;
新增数据存储方法:sessionStorage、localStorage;
新增视频 video 标签和音频 audio 标签;
新增绘画canvas和svg元素;
新增input标签的type属性类型:date、time、month、email、url、search、range、color、number;
新增表单input元素验证:required、pattern;
新增获取用户地理位置定位API:Geolocation。
03、简述盒模型
盒模型分为两种:标准盒模型(W3C盒模型)和怪异盒模型(IE盒模型)。
盒模型是依次由margin(外边距)+ border(边框)+ padding(内边距)+ content(内容)组成的。
标准盒模型的width指的是内容content的宽度,height指的是内容content的高度;怪异盒模型(IE盒模型)的width指的是content(内容) + padding(内边距)+ border(边框)的总宽度,height也是同样。
在IE浏览器的IE6、IE7、IE8版本中会触发怪异模式(IE盒模型),在其它浏览器中默认为W3C标准模式。标准(W3C)盒模型的CSS属性为box-sizing: content-box,怪异(IE)盒模型的CSS属性为box-sizing: border-box。
04、link标签和import的区别
link 属于 html 标签,可以加载css文件,还可以定义RSS、rel连接属性等;而@import 是 css 提供的,是有导入样式的作用。
页面被加载时,link 会同时被加载,而@import 引用的 css 会等到页面加载结束后加载。
link 是 html 标签,因此没有兼容性,而@import 只有 IE5 以上才能识别。
link 方式样式的权重高于@import 的。
link可以使用js动态创建并导入,@import则不行。
05、水平垂直居中的实现方式
CSS中实现元素水平垂直居中的几种方法总结,总有一种适合你!
06、CSS中的BFC
一文弄懂CSS中的BFC
07、块元素和行元素区别
行内元素会在一行上显示,当此行上剩余的空间无法承载当前的行内元素时,此行内元素才会在新的一行上显示,每个元素是水平排列的;每个块级元素各占据一行,每个元素时竖直方向排列的。
块级元素可以包含行内元素和块级元素,宽度默认100%,即和浏览器同宽。行内元素不能包含块级元素。
行内元素与块级元素属性的不同,主要是盒模型属性上。
常见的块元素有div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、header、section、article、footer等。
常见的行元素以及行内块元素有span、img、a、label、input、em、i、textarea、select、strong等。
转为块元素:display: block;
转为行元素:display: inline;
转为行内块元素:display: inline-block。
08、高度塌陷和清除浮动
高度塌陷:
标准的文档流,在不给父元素设置高度的情况下,父元素的高度是由子元素撑开的,子元素多高,父元素就多高,但当子元素设置浮动后,子元素会脱离标准文档流,从而导致不占位置,父元素的高度就会变为 0,这种现象,叫做高度塌陷。
高度塌陷大部分都是由子元素脱标不占位置导致的父元素高度的丢失,一般在子元素浮动后会产生高度塌陷。所以,解决的办法可以使用清除浮动的方式来解决。
清除浮动的方式:
浮动的元素会脱离标准文档流,脱离标准文档流的元素在文档流中不占位置。
给浮动元素的父元素设置高度;
给父元素设置overflow: hidden属性;
在父元素内部的最后面添加一个块级元素的空标签,并给这个空标签设置clear: both;
单伪元素:
.clearfix::after { content: ''; clear: both; display: block; height: 0; visibility: hidden; zoom: 1;
}
双伪元素(推荐使用):
.clearfix::before, .clearfix::after { content: ''; clear: both; display: block; height: 0; visibility: hidden; zoom: 1;
}
09、position的属性及作用
position 几个属性一般都要配合"left"、“top”、"right"以及 “bottom” 属性使用。
相对定位relative:如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它元素。
绝对定位absolute:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于。absolute 定位使元素的位置与文档流无关,因此不占据空间。absolute 定位的元素和其他元素重叠。
固定定位fixed:元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关,因此不占据空间。Fixed 定位的元素和其他元素重叠。
粘性定位sticky:元素先按照普通文档流定位,然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。而后,元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
默认定位static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit:规定应该从父元素继承 position 属性的值。
10、实现元素隐藏的方法
设置透明度为0:opacity: 0;
元素显示设为无:display: none(在网页中不占位置);
隐藏元素:visibility: hidden(网页中依然占据位置);
让元素缩小到0:transform: scale(0);
设置元素的层级:z-index: 9999,元素需要设置position: absolute。
11、css reset的作用
重置浏览器的css默认属性,因为各个品牌浏览器的默认样式不用,使用css reset重置,使在各个浏览器上样式统一。
12、css sprites(css精灵)的作用
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了,减轻服务器对图片的请求数量。原理就是利用CSS的background-image、background- repeat、background-position的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。
13、css有哪些选择器,优先级如何
主要的选择器有:id、class、标签、伪元素、伪类、属性选择、通配符、继承等。
同一元素引用了多个样式时,排在后面的样式属性的优先级高;
样式选择器的类型不同时,优先级顺序为:id 选择器 > class 选择器 > 标签选择器;
标签之间存在层级包含关系时,后代元素会继承祖先元素的样式。如果后代元素定义了与祖先元素相同的样式,则祖先元素的相同的样式属性会被覆盖。继承的样式的优先级比较低,至少比标签选择器的优先级低;
带有!important 标记的样式属性的优先级最高;
样式表的来源不同时,优先级顺序为:内联样式> 内部样式 > 外部样式 > 浏览器用户
自定义样式 > 浏览器默认样式。
优先级:!important > 行内样式 > id > class > 标签/伪类/属性选择 > 伪元素 > 继承 >通配符
14、transition和animation的区别
transition 是过渡效果,只有两个状态:起始状态和结束状态,主要强调样式值的变化过程,不可设置中间状态;需要某个事件的触发(例如:鼠标经过、点击等)。
animation 是动画,也叫关键帧,可以设置多个关键帧;可以再任意一个中间帧设置状态;不需要依附事件的触发就可以自动执行。
15、css去掉iPhone的默认按钮样式
input[type="button"],
input[type="submit"],
input[type="reset"] {-webkit-appearance: none;
}
textarea { -webkit-appearance: none;
}
16、Doctype的作用
DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档。只有确定了一个正确的文档类型,超文本标记语言或可扩展超文本标记语言中的标签和层叠样式表才能生效,甚至对JavaScript脚本都会有所影响。
标签完整格式为<!DOCTYPE>。
17、严格模式和混杂模式的区别
标准模式是指浏览器按照W3C的标准对文档进行解析和渲染;怪异模式浏览器按照旧有的、非标准的实现方式对文档进行解析和渲染。浏览器解析时到底使用标准模式还是怪异模式,与你网页中的文档类型定义(DTD)声明直接相关,文档类型定义(DTD)声明定义了标准文档的类型(标准模式解析)文档类型,会使浏览器使用相应的方式加载网页并显示,忽略文档类型定义(DTD)声明,将使网页进入怪异模式。
为什么会产生这两种模式呢?
现代的浏览一般都有两种渲染模式:标准模式(Standard Mode)和怪异模式(Quirks Mode)。在标准模式下,浏览器按照HTML和CSS标准对文档进行解析和渲染;而在怪异模式下浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染,对于旧有的网页,浏览器就会启动怪异模式能够使得旧网页正常显示。
触发严格模式:
<!-- HTML 4.01 严格型 --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!-- XHTML 1.0 严格型 --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
触发混杂模式
<!-- HTML 4.01 过渡型 --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><!-- HTML 4.01 框架集型 --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd"><!-- XHTML 1.0 过渡型 --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- XHTML 1.0 框架集型 --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
18、双边距重叠问题(外边距折叠)
多个相邻(兄弟或者父子关系)普通流的块元素垂直方向 marigin 会重叠。
折叠的结果为:
两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
两个外边距一正一负时,折叠结果是两者的相加的和。
19、清除元素模式转化为行内块后出现的缝隙
元素的模式转换为行内块后,行内块元素之间会产生缝隙,往往是因为代码换行导致的。
给父元素设置 font-size:0;给行内块元素重新设置 font-size 大小(推荐);
给行内块元素设置左外边距或右外边距,并将值设置为负值;
使用 display:table;和 display:table-cell;属性代替 display:inline-block;
在父元素上设置 display:flex;属性(推荐);
手动删除行内块之间的换行。
20、rgba()和opacity的透明效果区别
rgba()和 opacity 都能实现透明效果,但最大的不同是 opacity 作用于元素,以及元素内的所有内容的透明度;rgba() 只作用于元素的颜色或其背景色。(设置 rgba 透明的元素的子元素不会继承透明效果!)
总结
感谢您的阅读!本篇文章就先总结到这里,近期会一直更新web前端的面试,包括html+css、js、es6、vue等专题内容,希望这些前端知识对您面试或者工作学习中有所帮助提升。想要文章,您可以移步到wxgzh【前端胡说】的菜单栏【优质文章】中观看阅读。
原文链接:2023前端面试题集(含答案)之HTML+CSS篇(一)
相关文章:
2023前端面试题集(含答案)之HTML+CSS篇(一)
在又到了金三银四的招聘季,不管你是刚入行的小白,亦或是混迹职场的老鸟,还在为面试前端工程师时不知道面试官要问什么怎么回答而苦恼吗?为了帮助你获得面试官的青睐,顺利通过面试,跳槽进入大厂,…...
设计模式2 - 观察者模式
定义: 观察者模式又叫发布订阅模式,它定义了对象之间的一对多依赖,这样一来,当一个对象改变状态时,它的所有依赖者都会收到通知并自动更新。 组成: Subject(通知者/被观察者)&#…...
ini配置文件
ini配置文件 ini文件是initialization file的缩写,即初始化文件,是widows系统配置文件所采用的存储格式。 文件扩展名: .ini ini配置文件的后缀名也不一定必须是.ini, 也可以是.cfg, .conf或者是.txt ini文件格式 ini配置文件由参数, 节, 注解组成 参…...
蓝桥杯备赛经验 pythonA组(非科班选手)
个人2022 CA组江苏省一等奖,决赛成绩不理想,没有拿到一二等奖,但是因为自己是非科班的学生,所以能拿到这样的成绩自己其实也应该知足了 题外话: 很多ACMer嘲笑蓝桥杯非常水,但是据我观察CA组决赛一等奖获奖…...

C++实现通讯录管理系统
通讯录是一个可以记录亲人、好友信息的工具,本博客借助黑马程序员的项目进行修改,利用C实现一个通讯录管理系统,旨在复习C的语法。 一、系统需求 系统需要实现的功能如下: 添加联系人∶向通讯录中添加新人,信息包括…...

开关电源Y电容放置的位置
Y电容,是我们工程师做开关电源设计时都要接触到的一个非常关键的元器件,它对EMI的贡献是相当的大的,但是它是一个较难把控的元器件,原理上并没有那么直观易懂,在EMI传播路径中需要联系到很多的寄生参数才能够去分析。 …...

二叉树的最小深度——递归法、迭代法
1题目给定一个二叉树,找出其最小深度。最小深度是从根节点到最近叶子节点的最短路径上的节点数量。说明:叶子节点是指没有子节点的节点。示例 1:输入:root [3,9,20,null,null,15,7]输出:2示例 2:输入&…...
Vue中常使用的三种刷新页面的方式
一、通过js原始方法刷新 缺点: 出现闪白 目录 一、通过js原始方法刷新 二、通过Vue自带的路由进行跳转 三、通过在APP页面进行demo进行刷新(推荐) 1.vue2写法 2. vue3.2写法 <template><div><div class"header"><button clic…...

【Shell】脚本
Shell脚本脚本格式第一个Shell脚本:hello.sh脚本常用执行方式1. bash或sh脚本的相对路径或绝对路径2. 输入脚本的绝对路径或相对路径3. 在脚本的路径前加上.或者source脚本格式 脚本以#!/bin/bash开头(指定解析器) #! 是一个约定的标记&…...
Mybatis的多表操作
1.Mybatis多表查询 1.1一对一查询 1.一对一查询的模型 用户表和订单表的关系为,一个用户有多个订单,一个订单只从属于一个用户 一对一查询的需求:查询一个订单,与此同时查询出该订单所属的用户2.创建Order和User实体public class…...
【JVM】字节码指令全解
文章目录 入门案例原始 java 代码编译后的字节码文件常量池载入运行时常量池方法字节码载入方法区main 线程开始运行,分配栈帧内存执行引擎开始执行字节码bipush 10istore_1ldc #3istore_2iload_1iload_2iaddistore_3getstatic #4iload_3invokevirtual #5return条件判断指令循…...

【精品】华为认证数通HCIA+HCIP题库分享(含答案解析)
嗨~大家好久不见,我是薄荷学姐,随着华为业务也全球领域的迅猛发展,越来越多人开始重视华为认证的重要性。今天给大家分享一下去年8月份的题库,基本都是一样,希望可以帮助到大家哈想要通过华为认证,除了进行…...
Qt cmake 资源文件的加载
Qt cmake 资源文件的加载概述qt_add_resourcesqt5_add_resourcesqt6_add_resources是否需要加载qrc文件需要加载qrc的情况不需要加载qrc的情况C 代码加载示例加载PNG加载CSS文件加载qrc文件Qt6相对于Qt5的一些变化Qt6和Qt5在加载资源文件方面的区别主要集中在两个方面ÿ…...

【链表OJ题(九)】环形链表延伸问题以及相关OJ题
环形链表OJ题 1. 环形链表 链接:141. 环形链表 描述: 给你一个链表的头节点 head ,判断链表中是否有环。 如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达,则链表中存在环。 为了表示给定链表中的环&…...

【C++初阶】四、类和对象(下)
文章目录一、再谈构造函数构造函数体赋值初始化列表explicit关键字二、Static成员引入- 计算类中创建了多少个类对象概念特性静态成员函数的访问三、友元友元函数友元类四、内部类五、匿名对象六、拷贝对象时的一些编译器优化一、再谈构造函数 构造函数体赋值 在创建对象时&a…...

IDEA maven没有Import Maven projects automatically解决办法
去年装了个 IDEA2022版本 配置maven时我才发现是个大坑 他没有import Maven projects automatically配置项 当时看到我人都麻了 然后项目呢 用了依赖 这东西还不会自动下依赖 整的我那是相当难受 还在最后还是找到了解决办法 我们在配置文件上点击右键 然后鼠标选择如下图选项…...

Java实习生------MySQL10道面试题打卡
今日语录:“没有执行力,就没有竞争力 ”🌹 参考资料:图解MySQL、MySQL面试题 1、事务有哪些特性? 原子性: 一个事务中的所有操作,要么全部完成,要么全部不完成,不会出现…...
帆软报表设计器 数据集之数据库查询
当点击数据库查询时,调用TableDataTreePane的 public void actionPerformed(ActionEvent var1) {TableDataTreePane.this.dgEdit(this.getTableDataInstance().creatTableDataPane(), TableDataTreePane.this.createDsName(this.getNamePrefix()), false);} 然后调用TableDat…...
CSDN 第三十七期竞赛题解
很少有时间来玩玩题目,上一次因为环境极为嘈杂的原因在时间上没有进入前十,挺遗憾的。 在 CSDN 参加的第一次没出锅的比赛。 大概只有最后一题值得好好讲讲。 T1:幼稚班作业 幼稚园终于又有新的作业了。 老师安排同学用发给同学的4根木棒拼接…...
Vue实战【常用的Vue小魔法】
目录🌟前言🌟能让你首次加载更快的路由懒加载,怎么能忘?🌟你是否还记得有一个叫Object.freeze的方法?🌟异步组件那么强,你是不是没用过?🌟你是不是还在comput…...
synchronized 学习
学习源: https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖,也要考虑性能问题(场景) 2.常见面试问题: sync出…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用,可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器,能够帮助开发者更好地管理复杂的依赖关系,而 GraphQL 则是一种用于 API 的查询语言,能够提…...

STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA(Direct Memory Access)直接存储器存取 DMA可以提供外设…...
多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 (一)多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如,当用户上传一张“蓝色连衣裙”的图片时,接口可自动提取图像中的颜色(RGB值&…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!
5月28日,中天合创屋面分布式光伏发电项目顺利并网发电,该项目位于内蒙古自治区鄂尔多斯市乌审旗,项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站,总装机容量为9.96MWp。 项目投运后,每年可节约标煤3670…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

基于Java+MySQL实现(GUI)客户管理系统
客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息,对客户进行统一管理,可以把所有客户信息录入系统,进行维护和统计功能。可通过文件的方式保存相关录入数据,对…...
GitHub 趋势日报 (2025年06月06日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

PHP 8.5 即将发布:管道操作符、强力调试
前不久,PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5!作为 PHP 语言的又一次重要迭代,PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是,借助强大的本地开发环境 ServBay&am…...

stm32wle5 lpuart DMA数据不接收
配置波特率9600时,需要使用外部低速晶振...