百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

前端高频面试题-经典题型(前端高级面试题目及答案)

zhezhongyun 2025-01-31 16:15 16 浏览


1、简述!DOCTYPE的作用?

  决定浏览器渲染方式;
 
帮助浏览器正确地显示网页
 
文档类型声明(简称为 "DTD"),告诉浏览器这个文件的类型,让浏览器知道该用哪个规范来解析文档。
 
声明必须在HTML中的第一行,Doctype 是一条声明它不是一个HTML标签,只起到声明作用。
 
:用HTML5的doctype声明文件包含HTML5标记

2、常见的浏览器及其内核有哪些?

有五大浏览器,分别是:
1、chrome 浏览器 --Google公司
          特点 安全、高效、安全
              2013年前使用苹果公司的webkit内核,13年后开始使用 webkit 的分支 Blink 内核
          内核 webkit,Blink
 
2、Firefox 浏览器 --Mozilla公司
          特点 非盈利、Gecko项目开源
          内核 Gecko
 
3、safari 浏览器 --苹果公司
          特点 移动端占有率高
          内核 webkit
 
4、Opera 浏览器 --Opera Sftware ASA公司
          特点 自主研发presto内核
              使用自研的 Presto 内核 2016年被收购后改用 webkit 内核,后跟随谷歌改用 Blink 内核
          内核 presto、webkit -> blink
5、 IE 浏览器 --Microsoft微软公司
          特点 依托强大的Windows系统的市场占有率捆绑安装不可卸载
          内核 trident
 
 
    1)使用trident内核的IE,及一些国产浏览器
    2)使用Gecko内核的Mozilla Firefox
    3)使用blink内核的chrome、opera
    4)使用webkit内核的Safari、chrome,及一些国产的双核浏览器

3、常见的块级标签和行内标签分别有哪些?

块级标签
 
        h1-h6、p、div、ul、ol、dl、li、dt、dd、br、hr
 
行内标签
 
        span、i、em、b、strong、sub、sup、del

4、b 和 strong (i 和 em )标签的区别?

b 和 strong
    默认情况下它们起的均是加粗字体的作用
    二者所不同的是,标签是一个实体标签,用来呈现文字的粗体效果
    而标签是一个语义标签,它的作用是加强字符的语义,用来表示重要文本,在文本中呈现粗体效果
 
i 和 em
    默认情况下它们起的均是倾斜字体的作用
    二者所不同的是,标签是一个实体标签,文本呈现为斜体,没有特殊语义
    而标签是一个语义标签,它的作用是用来呈现被强调的文本,在文本中呈现斜体效果

5、谈谈对语义化的理解?

即根据页面内容的结构,选择合适的标签,便于开发者阅读和写出更优雅的代码,便于浏览器、搜索引擎解析,有利于SEO,便于团队开发和维护。如:标题用h1~h6,段落使用p标签
 
语义化的好处:
1)在没有css的情况下,页面也能呈现出较好的内容结构;
2)语义化使代码更具有可读性,便于团队开发和维护;
3)语义化有利于用户体验
4)语义化有利于SEO搜索引擎优化

6、如何合并表格单元格?

表格合并
        跨行合并    rowspan
 
        跨列合并    colspan

7、thead、tbody、tfoot 有什么作用?

thead、tbody、tfoot标签结合起来使用,用来规定表格的各个部分(表头、主体、页脚)
    标签默认不会影响表格布局

8、常见表格元素有哪些?

 标签定义 HTML 表格。
 
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。
 
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
 
caption 元素定义表格标题。
    caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
 
 标签定义 HTML 表格中的行。tr 元素包含一个或多个 th 或 td 元素。
 
td(标准单元格)|th(表头单元格)元素 定义表格内的表头单元格。
 

9、引入css的方式有几种?

引入的三种方式:
            行内样式/内部样式/外部样式
 
行内样式
    

内容

内部样式 外部样式

10、单行文本水平垂直居中如何实现?

先设置高度
    height:10px; 
 
行高等于高度
    line-height:10px; 
 
文本居中
    text-align:center;

11、选择器优先级如何计算?

一般来说选择器的权值越大,优先级越高
    基本选择器的权值由小到大分别为:
    
    通配符选择器(0)<标签选择器(1)

12、哪些CSS属性是可以继承的?

子标签可以继承父标签的样式
 
   1)、字体系列属性
  font-family:字体系列
  font-weight:字体的粗细
  font-size:字体的大小
	font-style:字体的风格
	line-height:行高
    
    2)、文本系列属性
  text-indent:文本缩进
  text-align:文本水平对齐
    color:文本颜色

13、简述css盒模型?

盒模型又称框模型(Box Model)在页面布局中,将页面元素合理有效地组织在一起,形成一套完整的、行之有效的原则和规范。,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。css盒模型的本质是一个盒子,封装周围的HTML元素
 
盒模型由:
    元素的内容(content) + 内边距(padding) + 边框(border) + 外边距(margin)要素组成
 
元素框的总宽度 = 元素(element)的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度;
 
元素框的总高度 = 元素(element)的height + padding的上下边距的值 + margin的上下边距的值 + border的上下宽度。

14、如何使用border实现小三角?

三角形
.box1 {
	width: 0;
	height: 0;
	border: 40px solid;
	border-color: #f30 transparent;
	border-bottom: 0;
	/* 清除ie6下默认高度和最小高度问题 */
	overflow: hidden;
	font-size: 0;
	line-height: 0;
}
 
空三角
.box2 {
	width: 1em;
	height: 1em;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(135deg);
}
 
 

15、margin外边距常见问题及处理方法?

(1)父子关系外边距塌陷问题——元素嵌套关系,子元素的margin值会叠加给父元素
    现象:给子元素设置外间距,会和父元素的外间距合并,最终会表现其中较大的外间距的值
    原因:父盒和子盒公用一个上外间距的区域
 
解决方法:
    给父元素设置边框或内边距;
    给父元素添加overflow:hidden属性,触发BFC,改变父元素的渲染规则
 
(2)兄弟关系的外边距叠加——元素并列关系,垂直方向上相邻的margin值相遇会出现叠加
    现象:上一个盒子设置下外间距,下一个盒子设置上外间距,两个值相同时,取当前值,如果两个值不同,取较大值
    原因:上、下两个兄弟关系的盒子共用一个外间距区域
 
解决方法:
    给两个盒子都套一个父盒子,父盒添加overflow属性
 
 
--->改变父级的渲染规则有以下四种:
    
        position: absolute/fixed;
        display: inline-block;
        float: left/right;
        overflow: hidden;

16、CSS选择器有哪些?优先级算法如何计算?内联和important哪个优先级高?

基本选择器:通配符选择器、标签选择器、类选择器、id选择器
 
基本选择器权值:通配符选择器(0)、标签选择器(1)、class选择器(10)、id选择器(100)
 
复合选择器:群组选择器、后代选择器、父子选择器、交集选择器、伪类选择器						        
               div,p	div p	 div>p	  div.box1
 
复合选择器权值计算方式:组成复合选择器的所有单一选择器的权值累加
 
选择器的权值越大,优先级越高,选择器中的权值使用加法计算,如果权值相同后写的内容覆盖先写的内容
 
行间样式的优先级高于id选择器的优先级
 
继承样式的权值为0,子元素中设置的样式,会覆盖继承到的样式;
 
在样式中定义!important ,优先级高于行间样式

17、行内元素和块级元素的特性,具体区别是什么?行内元素有哪些?块级元素有哪些?

行内元素:宽度自适应;高度自适应;默认并列在一行显示;具有部分盒模型特征(默认没有宽高[css定义宽高时无效],有横向间距margin-right、margin-left和留白padding-left、padding-right,没有纵向margin-top、margin-bottom和留白padding- top、padding-bottom,边框保留);换行会被解析成空格
 
行内元素:  a b strong em i del sup sub span
 
块级元素:宽度100%;高度自适应;默认独立成行;具有盒模型特征(默认可以设置盒子的宽、高、外间距、内填充、边框)
 
块级元素:div p h1 h2 h3 h4 h5 h6 form ul ol li dl dt dd

18、margin外间距常见问题及处理方法

(1)父子关系外边距塌陷问题——元素嵌套关系,子元素的margin值会叠加给父元素
    解决方法:
        给父元素设置边框或内填充;
        给父元素添加overflow:hidden属性,触发BFC,改变父元素的渲染规则
(2)兄弟关系的外边距叠加——元素并列关系,垂直方向上相邻的margin值相遇会出现叠加
    解决方法:  给两个盒子都套一个父盒子,父盒添加overflow属性
触发bfc,改变父级渲染规则的方法

19、浮动产生的问题,清浮动的方案?

元素浮动以后,脱离正常文档流,导致父元素高度塌陷,影响与父元素同级的后续元素的正常布局
1)为浮动元素的父级盒加固定的高度——不够灵活  
 
2)为浮动元素的父级盒加浮动——会产生新的浮动问题        
 
3)为浮动元素的父级盒设置overflow属性,属性值可以是hidden|scroll|auto——可能会导致内容显示不完全;代码简洁        
 
4)在浮动元素之后,跟浮动元素呈并列关系的位置,加一个空div,在空div上添加一个属性clear: both;——代码冗余;通俗易懂、书写方便                
 
5)推荐方法:
给浮动元素的父元素添加.clearfix,(不会在结构上产生冗余代码,可多次重复使用)
.clearfix{ *zoom: 1; } /*处理ie6,7兼容*/
.clearfix:after{ content: ""; display: block; clear: both; }

20、简述BFC规则,及解决的问题?

1)什么是BFC?
BFC(Block Formatting Context)是web页面的可视化CSS 视觉渲染的一部分,是页面中的一个独立的渲染区域。用于决定块盒子的布局及浮动元素与其他元素交互的一个区域,可以改变父级的渲染规则。
2)BFC规则:
	内部的标签会在垂直方向上一个接一个的放置
	垂直方向上的距离由margin决定,属于同一个BFC的两个相邻标签的margin会发生重叠
	每个标签的左外边距与包含块的左边界相接触(从左向右),即使浮动标签也是如此。
	BFC的区域不会与float的标签区域重叠
	计算BFC的高度时,浮动子标签也参与计算
	BFC就是页面上的一个隔离的独立容器,容器里面的子标签不会影响到外面标签,反之亦然
3)BFC解决的问题
	解决外边距折叠问题
	自适应两栏或三栏布局
	防止字体环绕
	清除浮动

21、如何让盒子水平垂直居中

1)margin负间距
	必须知道居中盒的宽度和高度;
	为居中盒设置绝对定位;
	距离定位父级左边框和上边框的距离设置为50%;
	将元素分别左移和上移,移动元素宽度和高度的一半
2)margin: auto;实现绝对定位元素的居中
	必须知道居中盒的宽度和高度;
	为居中盒设置绝对定位;
	分别设置left: 0; right: 0; top: 0; bottom: 0;
	为居中盒设置margin: auto;

22、等高布局、圣杯布局、双飞翼布局的实现原理?

等高布局:
方法一:利用内外间距相抵消,注意为父元素设置“overflow: hidden;”
方法二:利用内容撑开父元素的特点,给每一列添加相对应的容器,进行相互嵌套,并在每个容器中设置背景色
方法三:利用边框模拟背景,实现等高列显示效果
圣杯布局:
圣杯布局和双飞翼布局都是为了实现左右两栏固定宽度,中间部分自适应的三栏布局,不过两者的实现原理有所不同。圣杯布局的实现思路:
	1)HTML结构中,先主体内容后侧边栏
2)两侧固定宽度,中间内容宽度设置100%;
3)主体内容和左右侧边栏分别加浮动;
4)将左侧拉到最左边,将右侧拉到最右边;
5)将中间露出来;
6)分别为左侧边和右侧边设置position:relative; 然后还原左侧边和右侧边
双飞翼布局:
1)HTML结构中--先主体后侧边栏;
2)两侧固定宽度,中间宽度100%;
3)主体内容和左右侧边栏分别加浮动;
4)将左侧拉到最左边,将右侧拉到最右边;
5)在主体内容的子盒上设置margin值,将中间内容露出来

23、简述精灵图(css sprites)的原理及优缺点,如何使用

css sprites——精灵技术、雪碧技术,通常也称“css图像拼合”或“贴图定位”。将一堆小图整合到一张大图上,通过background-image、background-repeat属性显示图片,并且使用background-position属性实现图片的精确显示,减少服务器对图片的请求数量。
好处:
   1)减少网页的http请求,从而大大的提高页面的性能
   2)图片命名上的困扰
   3)更换风格方便
缺点:
    1)必须要限定容器大小符合背景图元素位置 ,需要计算
    2)维护的时候比较麻烦—图片修改麻烦
步骤:
1)制作一张具有多个状态的拼合图片
2)给要显示背景的盒一个固定的尺寸,以背景方式加载让其局部显示
3)通过背景图定位控制不同的显示状态

24、你能想出几种方法让元素在页面中消失?

1)display: none; 元素的隐藏,将整个元素隐藏,不占用任何空间
2)visibility: hidden; 元素内容不可见,只隐藏内容,占位空间仍然保留
3)通过position属性设置元素位置,让其消失
4)overflow属性实现,将要隐藏元素移出父元素的范围
5)opacity属性,实现元素的不可见

25、css3新增了哪些选择器

属性选择器:
	element[attr^=value]{ } 指定了属性名,并且属性值以value开头的element元素
element[attr$=value]{ } 指定了属性名,并且属性值以value结尾的element元素
element[attr*=value]{ } 指定了属性名,并且属性值中包含value的element元素
结构性伪类选择器
	:root{ } 匹配根元素
	element:first-child{ } 选择一组相同元素中的第一个元素
element:last-child{ } 选择一组相同元素中的最后一个元素
element:nth-child(n){ } 选择一组相同元素中的第n个元素
element:nth-last-child(n){ } 选择一组相同元素中的倒数第n个元素    	element:nth-of-type(n){ } 一组元素中选择特定类型的元素
element:nth-last-of-type(n){ } 一组元素中选择特定类型的元素,但是需要从最后一个开始计算
状态伪类选择器
	element:checked{ } 选择页面中处于选中状态的element元素
element:disabled{ } 选择页面中处于禁用状态的element元素
element:enabled{ } 选择页面中处于可用状态的element元素

26、如何处理HTML5新标签的浏览器兼容问题?

方案一:使用javascript新增元素的方法解决
	document.createElement(“header”);
	document.createElement(“footer”);
	…
	由于创建出来的元素是内联元素,所以需要转换成块级,宽度和高度才能生效。
	header,footer{ display:block;}
方案二:使用封装好的插件html5shiv.js解决兼容性问题。
	   

27、说说常见浏览器兼容问题

1)ie8中图片边框问题:
	解决方案:img{ border:none; }
2)  ie8中背景复合属性写法问题:
	在标准浏览器中能正常显示背景图片,但在ie8中图片显示异常。
		.bg{  background:url(“./images/bg.jpg”)no-repeat center; }
	解决方案:
		.bg{ background:url(“./images/bg.jpg”) no-repeat center; }
 
3) 在 IE6 及更早浏览器中定义小高度的容器问题?
	解决方案:#test{ overflow:hidden; height:0px; font-size:0; line-height:0; }
4) IE6 及更早浏览器浮动时产生双倍边距的 BUG问题 ?
	解决方案:针对 ie6 设置该标签的 display 属性为 inline 即可
		#test{ float:left; _display:inline; } 
5) IE7 下子标签相对定位时父标签 overflow 属性的 auto|hidden 失效的问题
	解决方案:给父标签也设置相对定位 position:relative;  
6)块转内联块 ie7- 不在一行显示问题
	解决方案:div { display:inline-block; *display:inline; *zoom:1; }
7) IE7 及更早浏览器下当 li 中出现 2 个或以上的浮动时,li之间产生的空白间隙
	解决方案:给
  • 加vertical-align:middle/top/bottom li{ vertical-align:top; }
  • 28、HTML5中新增的表单元素和表单属性有哪些?

    新增表单标签--input类型
    1)url类型:包含访问协议的URL地址的输入域
    2)email类型:包含e-mail地址的输入域
    3)search类型:用于检索关键字的输入域
    4)tel类型:用于输入电话号码的输入域
    5)number类型:用于包含数值的输入域
    6)range类型:生成一个数字滑动条
    7)color类型:生成一个颜色选择器
    8)date类型:日期选择器
    9)datetime类型:输入日期时间
    10)datetime-local类型:日期和时间选择器
    11)month类型:月选择器
    12)time类型:时间选择器
    13)week类型:周选择器
    14)datalist类型:选项列表,与input元素配合使用
    新增表单属性:
    1)min、max、step属性:输入域中所允许的最小值、最大值、步长
    2)placeholder属性:为输入域设置提示信息
    3)list属性:通过input元素和datalist元素实现可选的下拉列表
    4)autocomplete属性:是否启用自动完成功能
    5)autofocus属性:自动获取焦点
    6)form属性:定义表单元素所属的表单区域
    7)required属性:提交表单时,表单元素不能为空
    8)pattern属性:对用户输入内容做验证
    9)multiple属性:选择多个值

    29、简述rem布局原理

    rem是指相对于根元素的字体大小的单位,即根据html元素的font-size来计算大小。 比如说html的font-size大小为100px,一个div的width为1rem,则div的width大小为100px。
    rem布局实现步骤
    	1)设置页面的viewport
    	2)动态计算并设置html的fontsize值
    	3)按照pc端布局方式正常布局,把px单位换算成rem

    30、什么是less?less有什么好处?

    拥有一套自定义的语法和一个解析器,将程序员编写的样式规则,通过解析器编译成对应的css文件,才能被浏览器识别。
    好处:
    	结构清晰,结构清晰,便于扩展,可以屏蔽浏览器中私有语法的差异,可以实现多重继承,完全兼容css代码,可以方便地应用到老项目中。

    31、常见的移动端布局解决方案有哪些?原理如何?

    1)流式布局
        垂直方向高度固定,水平方向使用百分比实现,并且使用弹性布局、浮动、定位等技术综合使用创建可扩展的流式布局
        优先:可以很好解决自适应需求
        缺点:实际效果可能会不协调,设计存在局限性
    2)rem布局
        rem——相对于根元素的font-size属性值的单位,css3新增单位
        未经调整的浏览器的默认字号为16像素,1rem = 16px
        rem布局的实现:
            设置页面的viewport;
            动态计算并设置html的font-size值;
            按照PC端布局方式正常布局,将px单位换算成rem单位
    3)vw适配
        vw——viewport's width css3规范中视口单位
        vh——viewport's height
        vw和vh都是将屏幕分成100份,1vw等于屏幕宽度的1%
    4)flexible.js
    将设备划分成10份,确定好html标签的font-size属性值。假设有750px的设计稿,则html{ font-size: 75px; },页面中元素的rem值 = 元素的px值/75
    5)响应式布局
    一站适配所有终端。通过媒体查询检测不同的设备屏幕尺寸,适当调整标签显示布局,在每种设备屏幕宽度下呈现出不同的页面效果
    6)grid网格布局
    	将页面划分成相应的表格进行布局

    32、如何解释这句话呢?

    viewport	虚拟窗口
    	width	虚拟窗口的宽度
    	device-width设备宽度
    	initial-scale	初始缩放比例
    	maximum-scale 最大缩放比例
    	minimum-scale 最小缩放比例
    	user-scalable 是否允许用户手动缩放窗口
     
    自定义虚拟窗口,指定虚拟窗口的宽度为设备宽,初始缩放比为1倍,最大缩放比1倍,最小缩放比1倍,同时不允许用户手动缩放

    相关推荐

    JPA实体类注解,看这篇就全会了

    基本注解@Entity标注于实体类声明语句之前,指出该Java类为实体类,将映射到指定的数据库表。name(可选):实体名称。缺省为实体类的非限定名称。该名称用于引用查询中的实体。不与@Tab...

    Dify教程02 - Dify+Deepseek零代码赋能,普通人也能开发AI应用

    开始今天的教程之前,先解决昨天遇到的一个问题,docker安装Dify的时候有个报错,进入Dify面板的时候会出现“InternalServerError”的提示,log日志报错:S3_USE_A...

    用离散标记重塑人体姿态:VQ-VAE实现关键点组合关系编码

    在人体姿态估计领域,传统方法通常将关键点作为基本处理单元,这些关键点在人体骨架结构上代表关节位置(如肘部、膝盖和头部)的空间坐标。现有模型对这些关键点的预测主要采用两种范式:直接通过坐标回归或间接通过...

    B 客户端流RPC (clientstream Client Stream)

    客户端编写一系列消息并将其发送到服务器,同样使用提供的流。一旦客户端写完消息,它就等待服务器读取消息并返回响应gRPC再次保证了单个RPC调用中的消息排序在客户端流RPC模式中,客户端会发送多个请...

    我的模型我做主02——训练自己的大模型:简易入门指南

    模型训练往往需要较高的配置,为了满足友友们的好奇心,这里我们不要内存,不要gpu,用最简单的方式,让大家感受一下什么是模型训练。基于你的硬件配置,我们可以设计一个完全在CPU上运行的简易模型训练方案。...

    开源项目MessageNest打造个性化消息推送平台多种通知方式

    今天介绍一个开源项目,MessageNest-可以打造个性化消息推送平台,整合邮件、钉钉、企业微信等多种通知方式。定制你的消息,让通知方式更灵活多样。开源地址:https://github.c...

    使用投机规则API加快页面加载速度

    当今的网络用户要求快速导航,从一个页面移动到另一个页面时应尽量减少延迟。投机规则应用程序接口(SpeculationRulesAPI)的出现改变了网络应用程序接口(WebAPI)领域的游戏规则。...

    JSONP安全攻防技术

    关于JSONPJSONP全称是JSONwithPadding,是基于JSON格式的为解决跨域请求资源而产生的解决方案。它的基本原理是利用HTML的元素标签,远程调用JSON文件来实现数据传递。如果...

    大数据Doris(六):编译 Doris遇到的问题

    编译Doris遇到的问题一、js_generator.cc:(.text+0xfc3c):undefinedreferenceto`well_known_types_js’查找Doris...

    网页内嵌PDF获取的办法

    最近女王大人为了通过某认证考试,交了2000RMB,官方居然没有给线下教材资料,直接给的是在线教材,教材是PDF的但是是内嵌在网页内,可惜却没有给具体的PDF地址,无法下载,看到女王大人一点点的截图保...

    印度女孩被邻居家客人性骚扰,父亲上门警告,反被围殴致死

    微信的规则进行了调整希望大家看完故事多点“在看”,喜欢的话也点个分享和赞这样事儿君的推送才能继续出现在你的订阅列表里才能继续跟大家分享每个开怀大笑或拍案惊奇的好故事啦~话说只要稍微关注新闻的人,应该...

    下周重要财经数据日程一览 (1229-0103)

    下周焦点全球制造业PMI美国消费者信心指数美国首申失业救济人数值得注意的是,下周一希腊还将举行第三轮总统选举需要谷歌日历同步及部分智能手机(安卓,iPhone)同步日历功能的朋友请点击此链接,数据公布...

    PyTorch 深度学习实战(38):注意力机制全面解析

    在上一篇文章中,我们探讨了分布式训练实战。本文将深入解析注意力机制的完整发展历程,从最初的Seq2Seq模型到革命性的Transformer架构。我们将使用PyTorch实现2个关键阶段的注意力机制变...

    聊聊Spring AI的EmbeddingModel

    序本文主要研究一下SpringAI的EmbeddingModelEmbeddingModelspring-ai-core/src/main/java/org/springframework/ai/e...

    前端分享-少年了解过iframe么

    iframe就像是HTML的「内嵌画布」,允许在页面中加载独立网页,如同在画布上叠加另一幅动态画卷。核心特性包括:独立上下文:每个iframe都拥有独立的DOM/CSS/JS环境(类似浏...