一、HTML考题(8题)
1. 前端页面有哪三层构成,分别是什么?作用是什么?
// 前端三层构成:
有三层,分别是:html、css、js,那html为dom,css是样式,js是交互
// 浏览器进程模型:
(1)浏览器是一个大进程,中包含多个进程,进程中也有很多线程。
(2)那么就拿html和css来说,是靠GUI来渲染的,那么如果要避免回流重绘,
需要靠GPU进程完成,这样性能会好。
(3)js是靠渲染进程的渲染主线程工作的。其中包含:事件执行线程、定时器线程等等。
而且JS线程和GUI渲染线程互斥,所以就有了js脚本的异步加载操作。
2. 行内元素有哪些?块级元素有哪些? 空(void)元素有哪些?
1. 行内元素(Inline Elements)通常是文本内容的一部分,它们不会影响布局,只占据内容所在的行宽度。例如: <span>、<a>、<img>、<b>、<strong>、<em> 等。 2. 块级元素(Block Elements)占据一行,形成独立的块,可以设置宽高,影响布局。例如: <div>、<p>、<h1>~<h6>、<ul>、<ol>、<li>、<table>、<form> 等。 3. 空(void)元素,也称为无内容元素,它们不包含任何内容,但可以有属性。它们通常用于定义结构,不会影响布局。例子有: <hr>(水平线)、<br>(换行)、<img>(图片,当src为空时)、<input type="hidden"> 等。 元素之间的转换问题: display: inline; 把某元素转换成了行内元素 ===>不独占一行的,并且不能设置宽高 display: inline-block; 把某元素转换成了行内块元素 ===>不独占一行的,可以设置宽高 display: block; 把某元素转换成了块元素 ===>独占一行,并且可以设置宽高
3. 怎么解决2个行内块元素中间的空白
导致原因:元素被当成行内元素排版的时候,元素之间的空白符(空格、回车换行等)都会被浏览器处理,根据white-space的处理方式(默认是normal,合并多余空白),原来HTML代码中的回车换行被转成一个空白符,所以元素之间就出现了空隙。
方案一:手动取消空格和换行: <ul> <li>1</li><li>2</li><li>3</li><li>4</li> </ul> 非常不推荐,原因: 1. 部分编译器可能会代码整理的时候会强制换行 2. 代码比较臃肿,美观度不行,一点不优雅
方案二:父元素设置font-size:0px(推荐) <style type="text/css"> *{margin: 0;padding: 0;} ul{ list-style: none; font-size: 0; } ul li{ display: inline-block; width: 100px; height: 100px; background: red; font-size: 18px; } </style> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> 注意:如果子盒子有文本,需要单独设置font-size
4. 页面导入样式时,使用link和@import有什么区别?
区别一:加载方式和顺序 link标签会先加载(多个 <link> 标签同时引入,加载顺序由 HTML 中 <link> 标签的顺序决定) @import会在当前样式表加载完成后再加载引入外部样式表(@import 规则必须写在样式表的最前面,加载顺序受到 CSS 文件中 @import 规则的顺序决定。) 加载顺序区别:页面被加载时,link 会同时被加载,而 @import 引用的 CSS 会等到页面被加载完再加载。 区别二:权重区别 link 方式的样式的权重高于 @import 权重。 区别三:从属关系区别 link 属于 HTML 标签,而 @import 是 CSS 提供的。 区别四:兼容性区别 link 没有兼容性问题,@import 不兼容 ie5 以下。
5. title与h1的区别、b与strong的区别、i与em的区别?
title与h1的区别: 定义: title:概括了网站信息,可以告诉搜索引擎或者用户关于这个网站的内容主题是什么 h1:文章主题内容,告诉蜘蛛我们的网站内容最主要是什么 区别: title他是显示在网页标题上、h1是显示在网页内容上 title比h1更加的重要 (title > h1 ) ==》对于seo的了解 场景: 网站的logo都是用h1标签包裹的
b与strong的区别: 定义: b:标签用于为文本设置粗体样式,但它只是简单地表示文本应该呈现为粗体,并不带有语义强调的意义。 strong:标签用于表示文本的强调语义,默认会呈现为粗体,同时也向屏幕阅读器和搜索引擎表明这段文字的重要性。 区别: b标签只有加粗的样式,没有实际含义。 strong表示标签内字符比较重要,用以强调的。 题外话:为了符合css3的规范,b尽量少用,改用strong就行了。
i与em的区别: 定义: i:标签用于表示文本的斜体样式,但它只是简单地表示文本应该呈现为斜体,并不带有语义强调的意义。 em:标签用于表示文本的强调语义,通常会呈现为斜体,同时也向屏幕阅读器和搜索引擎表明这段文字的强调重要性。 区别: i只是一个倾斜标签,没有实际含义。 em表示标签内字符重要,用以强调的。 场景: i更多的用在字体图标,em术语上(医药,生物)。
6. img标签的title和alt有什么区别?
区别一:表现形式不同 title : 鼠标移入到图片展示文字值 alt : 图片无法显示时展示文字值 区别二:SEO层面 ( alt > title ) 在seo的层面上,蜘蛛抓取不到图片的内容,所以前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词。
7. png、jpg、gif 这些图片格式解释一下,分别什么时候用?
一、png: 特点:png格式支持无损压缩,同样尺寸情况下,体积要比jpg/jpeg的大。 适用场景:png格式适合保存,需要保持高质量细节和透明背景的图像,如图标、线条图、文字、Logo 等。 二、jpg: 特点:jpg格式支持有损压缩。 适用场景:jpg式适合保存照片、图像和艺术作品等真实场景图像,常用于网站上发布的照片、背景图等。 三、gif: 特点:gif格式支持无损压缩和动画功能,能够保存多帧图像并以动画形式显示。 适用场景:gif格式适合保存简单的动画、图标、表情包等图像。适用于网页上的小型动画、简单图标等。 四、webp: 特点:webp是一种由 Google 开发的图像格式,支持有损压缩和无损压缩,通常比 PNG 和 JPG 文件大小更小,同时保持较高的图像质量。它还支持动画和透明度。 适用场景:webp格式适合用于网站优化和速度提升,可以帮助减小图像文件大小,提高网页加载速度。特别适合用于要求高速加载和移动设备访问的网页,可以有效减少网页加载时间。 五、总结: PNG 适合保存高质量细节和透明背景的图像 JPG 适合保存照片和真实场景图像; GIF 适合保存简单的动画和图标; WebP 适合用于网站优化和速度提升,特别适合要求高速加载和移动设备访问的网页(存在兼容性)。
8. iframe的优点和缺点?
是什么:用于嵌入另一个 HTML 文档或外部资源(如网页、视频、地图等)到当前页面中。
优点: 1.嵌入外部内容: <iframe> 允许你在一个网页中嵌入来自不同源或服务器的内容,这有助于创建丰富多彩的页面。 2.独立性: 内嵌的内容在 <iframe> 中运行,与主页面相互隔离,这意味着它不会受到主页面的影响,保持了独立性。 3.简便性: 使用 <iframe> 非常简单,只需提供要嵌入的资源的 URL 或相对路径即可。
缺点: 1.性能问题: 如果滥用 <iframe>,在同一个页面中加载多个 <iframe> 可能会导致性能问题,因为每个 <iframe> 都需要单独加载资源。 2.可访问性问题: 内嵌内容可能导致可访问性问题,因为屏幕阅读器等辅助技术可能无法正确解释和浏览 <iframe> 内的内容。 3.安全性风险: 如果未谨慎处理来自不受信任源的内容,可能会存在安全风险,例如点击劫持(clickjacking)攻击。
防止自己的网站被别人 iframe 嵌套
if (top != self) { top.location = self.location; } //这段代码会检测页面是否被嵌套,如果是,则将页面重定向到自身。
二、CSS考题(25题)
1. 介绍一下CSS的盒子模型
CSS的盒子模型有哪些:标准盒子模型、IE盒子模型 CSS的盒子模型区别: 标准盒子模型:margin、border、padding、content IE盒子模型 :margin、content( border + padding + content ) 通过CSS如何转换盒子模型: box-sizing: content-box; /*标准盒子模型*/ box-sizing: border-box; /*IE盒子模型*/
2. CSS优先级算法如何计算?
优先级比较:!important > 内联样式 > id > class > 标签 > 通配
3. CSS选择符有哪些?哪些属性可以继承?
1. CSS选择符: 通配(*) id选择器(#) 类选择器(.) 标签选择器(div、p、h1...) 相邻选择器(+) 后代选择器(ul li) 子元素选择器( > ) 属性选择器(a[href]) 2. 可以继承: 1. font 相关属性:font-size、font-weight、line-height。 2. color:控制文本颜色。 3. text 相关属性:text-align、text-decoration、letter-spacing、word-spacing。 4. visibility:控制元素是否可见。 5. cursor:指定鼠标悬停在元素上时的光标样式。 6. list-style 相关属性:包括 list-style-type、list-style-position、list-style-image。 3. 不可继承属性:border、padding、margin...
4. 如何用CSS画一个三角形
用边框画(border),例如: { width: 0; height: 0; border-left:100px solid transparent; border-right:100px solid transparent; border-top:100px solid transparent; border-bottom:100px solid #ccc; }
5. 单行文本溢出
在 CSS 中,当单行文本内容超出其容器的宽度时,可以通过设置 overflow 属性来处理文本溢出的情况。常用的方法包括使用 white-space 和 text-overflow 属性。 div{ width: 200px; /* 容器宽度 */ white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分隐藏 */ text-overflow: ellipsis; /* 溢出部分显示省略号 */ }
6. 多行文本溢出
处理多行文本溢出的情况相对复杂一些,但也可以通过 CSS 来实现。常用的方法是结合 display: -webkit-box;、-webkit-line-clamp 和 overflow: hidden;。 .text-container { display: -webkit-box; /* 使用弹性盒子布局 */ -webkit-box-orient: vertical; /* 垂直方向排列 */ -webkit-line-clamp: 3; /* 限制显示行数 */ overflow: hidden; /* 超出部分隐藏 */ } /* 兼容性处理 */ .text-container { display: -webkit-box; display: -webkit-webkit-flex; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
7. position有哪些值?分别是根据什么定位的?
static [默认] 没有定位 fixed 固定定位,相对于浏览器窗口进行定位。 relative 相对于自身定位,不脱离文档流。 absolute 相对于第一个有relative的父元素,脱离文档流。 relative和absolute区别 1. relative不脱离文档流 、absolute脱离文档流 2. relative相对于自身 、 absolute相对于第一个有relative的父元素 3. relative如果有left、right、top、bottom ==》left、top absolute如果有left、right、top、bottom ==》left、right、top、bottom
8. 有哪些css属性可以影响层级
屏幕是一个二维平面,然而 HTML 元素却是排列在三维坐标系中,x
为水平方向,y
为垂直方向,z
为屏幕由内向外方向,我们在看屏幕的时候是沿着 z
轴方向从外向内的。由此,元素在用户视角就形成了层叠的关系,某个元素可能覆盖了其他元素也可能被其他元素覆盖;
-
层叠上下文 (Stacking Context)
层叠上下文 (堆叠上下文, Stacking Context),是 HTML 中一个三维的概念。在 CSS2.1 规范中,每个元素的位置是三维的,当元素发生层叠,这时它可能覆盖了其他元素或者被其他元素覆盖;排在 z 轴越靠上的位置,距离屏幕观察者越近。
在层叠上下文中,其子元素按照上面解释的规则进行层叠。形成层叠上下文的方法有:
1. position 值为 absolute|relative,且 z-index 值不为 auto; 2. position 值为 fixed|sticky; 3. z-index 值不为 auto 的 flex 元素,即父元素属性 display: flex|inline-flex; 4. opacity 属性值小于 1 的元素; 5. transform 属性值不为 none 的元素; 6. mix-blend-mode 属性值不为 normal 的元素; 7. filter、perspective、clip-path、mask、mask-image、mask-border、motion-path 值不为 none 的元素; 8. perspective 值不为 none 的元素; 9. isolation 属性被设置为 isolate 的元素; 10. will-change 中指定了任意 CSS 属性,即便你没有直接指定这些属性的值 11. -webkit-overflow-scrolling 属性设置为 touch 的元素;
-
层叠等级
层叠等级 (层叠水平, Stacking Level) 决定了在同一个层叠上下文中,元素在 z 轴上的显示的顺序;
普通元素的层叠等级优先由其所在的层叠上下文决定; 层叠等级的比较,只有在同一个层叠上下文元素中才有意义; 在同一个层叠上下文中,层叠等级描述定义的是该层叠上下文中的元素在 z 轴上的上下顺序;
另外,层叠等级并不一定由 z-index 决定,只有定位元素的层叠等级才由 z-index 决定,其他类型元素的层叠等级由层叠顺序、他们在 HTML 中出现的顺序、他们的祖先元素的层叠等级一同决定,详细的规则见下面层叠顺序的介绍。
-
z-index
z-index 只适用于定位的元素,对非定位元素无效,它可以被设置为正整数、负整数、0、auto,如果一个定位元素没有设置 z-index,那么默认为 auto; 元素的 z-index 值只在同一个层叠上下文中有意义。如果父级层叠上下文的层叠等级低于另一个层叠上下文的,那么它 z-index 设的再高也没用。所以如果你遇到 z-index 值设了很大,但是不起作用的话,就去看看它的父级层叠上下文是否被其他层叠上下文盖住了。
-
层叠顺序:描述的是元素在同一个层叠上下文中的顺序规则,从层叠的底部开始,共有七种层叠顺序:
1. 背景和边框:形成层叠上下文的元素的背景和边框。 2. 负 z-index 值:层叠上下文内有着负 z-index 值的定位子元素,负的越大层叠等级越低; 3. 块级盒:文档流中的块级、非定位子元素; 4. 浮动盒:非定位浮动元素; 5. 行内盒:文档流中行内、非定位子元素; 6. z-index: 0:z-index 为 0 或 auto 的定位元素, 这些元素形成了新的层叠上下文; 7. 正 z-index 值:z-index 为正的定位元素,正的越大层叠等级越高;
-
面试中 或 写面试题 的回答
css可以影响层级的属性非常多,本身屏幕是一个二维平面,然而 HTML 元素却是排列在三维坐标系中。 x为水平方向,y为垂直方向,z为屏幕由内向外方向。 我们在看屏幕的时候是沿着 z 轴方向从外向内的,由此,元素在用户视角就形成了层叠的关系,某个元素可能覆盖了其他元素也可能被其他元素覆盖。 那么元素在同一个层叠上下文中的顺序规则,从层叠的底部开始,共有七种层叠顺序: 1. 背景和边框:形成层叠上下文的元素的背景和边框。 2. 负 z-index 值:层叠上下文内有着负 z-index 值的定位子元素,负的越大层叠等级越低; 3. 块级盒:文档流中的块级、非定位子元素; 4. 浮动盒:非定位浮动元素; 5. 行内盒:文档流中行内、非定位子元素; 6. z-index: 0:z-index 为 0 或 auto 的定位元素, 这些元素形成了新的层叠上下文; 7. 正 z-index 值:z-index 为正的定位元素,正的越大层叠等级越高; 那么这里就说几个可以影响层级的css属性吧:比如: 1. 可以给position值为absolute 或 relative的添加z-index; 2. 也可以通过transform: translateY(-100px); 3. opacity属性值小于 1 的元素; 等等好多都可以做到,这里就不一一举例了。
9. 对BFC规范的理解?
是什么:BFC就是页面上一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。 1. 了解BFC : 块级格式化上下文。 2. BFC的原则:如果一个元素具有BFC,那么内部元素再怎么弄,都不会影响到外面的元素。 3. 如何触发BFC: 3.1 float的值非none 3.2 overflow的值非visible 3.3 display的值为:inline-block、table-cell... 3.4 position的值为:absoute、fixed ...... 4. 用法 4.1 阻止相邻元素的 margin 合并 4.2 包含浮动元素 ......
10. 子元素设置margin-top父元素也会跟着移动,是怎么回事?
经典问题:垂直外边距叠加 原因:普通文档流盒子间,只要垂直外边距直接接触,就会发生合并,合并后外边距视觉高度取两个发生合并外边距中较大者。 发生这一现象的有三种情况:相邻兄弟块元素间、父元素及其首子元素和末子元素间(没有内边距或边框把外边距分隔开)、空块级元素自身的合并。 解决办法:触发BFC就可以解决。
11. 简述什么是伪元素和伪类,并列举一些自己知道的伪元素和伪类
-
伪元素
什么是伪元素:是用于创建并操作元素的特定部分,它可以在DOM中创建一个不存在的元素,并为其添加样式。
::before:在元素内容之前插入内容 ::after:在元素内容之后插入内容 ::first-line:选择元素的第一个行 ::first-letter:选择元素的第一个字母
-
伪类
什么是伪类:是用于选择元素的特定状态或行为的关键词,它可以应用于已存在的元素。
:hover:当鼠标悬停在元素上时应用的样式 :active:元素正在被用户交互(如点击)时应用的样式 :focus:元素获得焦点(如键盘焦点或点击)时应用的样式 :nth-child(n):选择父元素的第n个子元素 :not(selector):选择不匹配给定选择器的元素
12. 清除浮动的方式有哪些?
1. 触发BFC 2. 多创建一个盒子,添加样式:clear: both; (不推荐使用,很老的处理方式了) 3. after方式 ul::after{ content: ''; display: block; clear: both; }
13. css sprite是什么,有什么优缺点
1. 是什么 把多个小图标合并成一张大图片。 2. 优缺点 优点:减少了http请求的次数(减少了服务器和客户端之间的通信开销),提升了性能。 缺点:维护比较差(例如图片位置进行修改或者内容宽高修改)
14. 什么是CSS reset?
reset.css 是一个css文件,用来重置css样式的。 normalize.css 为了增强跨浏览器渲染的一致性,一个CSS重置样式库。
15. 回流和重绘
15.1 浏览器渲染流程
浏览器是向服务端发送请求,下载解析资源显示在浏览器上。将网页内容展示到浏览器上的过程,这其实就是渲染引擎完成的。渲染引擎有很多种,这里以 webkit 为例。
从上面这个图上,我们可以看到,浏览器渲染流程如下: 1. 解析 HTML Source,生成 DOM 树。 2. 解析 CSS,生成 CSSOM 树。 3. 将 DOM 树和 CSSOM 树结合,去除不可见元素,生成渲染树( Render Tree )。 4. Layout (布局):根据生成的渲染树,进行布局( Layout ),得到节点的几何信息(宽度、高度和位置等)。 5. Painting (重绘):根据渲染树以及回流得到的几何信息,将 Render Tree 的每个像素渲染到屏幕上。
15.2 什么是回流和重绘
1. 回流:渲染对象在创建完成并添加到渲染树时,只是将 DOM 节点和它对应的样式结合起来,"并不包含位置和大小信息"。所以还需要 layout 这一过程计算他们的位置和大小,这一过程称为回流,有些地方也称为重排,可以理解为重新布局。每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是一定会发生回流的,因为要构建渲染树。 2. 重绘:通过构造渲染树和回流阶段,知道了哪些节点是可见的,以及可见节点的样式和具体的几何信息(位置、大小),那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素,这个过程就叫做重绘。
15.3 什么样情况会造成回流和重绘
要知道:回流一定会造成重绘,重绘不一定会造成回流。 结合上面说的: 1. 造成回流的情况有:回流这一阶段主要是计算节点的位置和几何信息,那么当页面布局和几何信息发生变化的时候,就需要回流。一个 DOM 元素的几何属性变化,常见的几何属性有 width、height、padding、margin、left、top、border 等等。 2. 造成重绘的情况有:例如改变 visibility、outline、background-color 等属性,这些属性只是影响元素的外观,风格,并且没有影响几何属性的时候,会导致重绘 ( repaint )
15.4 如何减少回流与重绘
开启GPU加速:开启 GPU 加速元素会被单独提升到一层。 WebKit 内核的浏览器中,CSS3 的 transform、opacity、filter 这些属性就可以实现合成的效果,浏览器会将渲染层提升为合成层。 另外需要注意的是:硬件加速不是万金油,单独创建合成层是有代价的,每创建一个合成层,就要为其分配内存,内存大小取决于复合层的数量。复合层的大小、层的管理也更为复杂,在一些低端和终端移动端设备中更为明显,滥用 GPU 加速会引起页面卡顿甚至闪退。 可以把:top left 使用 transform 代替。
15.5 面试回答:
回流就是:渲染对象在创建完成并添加到渲染树时,只是将 DOM 节点和它对应的样式结合起来,并不包含位置和大小信息。所以还需要 layout 这一过程计算他们的位置和大小,这一过程称为回流,有些地方也称为重排,可理解为重新布局。每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是一定会发生回流的,因为要构建渲染树。 造成回流就是可能改变了盒子的大小和位置。 重绘就是:通过构造渲染树和回流阶段,知道了哪些节点是可见的,以及可见节点的样式和具体的几何信息,那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素,这个过程就叫做重绘。 造成重绘就是可能改变了盒子的颜色,背景颜色等等之类的。 那么要避免回流和重绘: css方面 * 使用transform替代top等位移 ; * 使用visibility替换display: none; * 避免使用table布局 ; * 尽可能在DOM树的最末端改变class; * 避免设置多层内联样式,尽量层级扁平; * 将动画效果应用到position属性为absolute或fxed的元素上; * 避免使用CSS表达式; * 将频繁重绘或者回流的节点设置为图层,比如 video, iframe ; * CSS3硬件加速(GPU加速) ,可以是transform: translateZ(0)、opacity、 flters、 Will-change提前告诉浏览器元素会发生什么变化; JS方面: * 避免频繁操作样式,合并操作; * 避免频繁操作DOM,合并操作; * 防抖节流控制频率; * 避免频繁读取会引发回流/重绘的属性,比如上面的C、O、S属性 * 对具有复杂动画的元素使用绝对定位。
16. display-none;与visibility-hidden;的区别
1. 占用位置的区别 display: none; 隐藏元素,“不”占用位置 visibility: hidden; 隐藏元素,占用位置 2. 重绘和回流的问题 visibility: hidden; 产生重绘 display: none; 产生一次回流、重绘
17. opacity和rgba区别
共同性:实现透明效果 1. opacity 取值范围0到1之间,0表示完全透明,1表示不透明 2. rgba R表示红色,G表示绿色,B表示蓝色,取值可以在正整数或者百分数。A表示透明度取值0到1之间 区别:继承的区别 opacity 会作用于元素及其子元素的透明度,整个元素及其内容都会变得透明。 rgba() 只会作用于元素的颜色,而不会影响元素本身的透明度。
18. flex后面都有