面试题 1

最新推荐文章于 2022-02-17 11:24:08 发布

qinglinn

最新推荐文章于 2022-02-17 11:24:08 发布

阅读量257

点赞数 1

本文链接：https://blog.csdn.net/weixin_45052435/article/details/90303886

版权

面试题总结 html、css

什么是盒子模型
什么是web 标准
h5常用的语义化标签
Doctype作用，HTML5 为什么只需要写 <!DOCTYPE HTML>
常见的浏览器内核有哪些，介绍一下你对浏览器内核的理解
cookie，sessionStorage 和 localStorage 的区别进行描述
写出以下几个html标签：文字加粗，下标，居中，字体
一个div在不同分辨率屏幕上下左右居中显示，用css实现
HTML5的离线存储方式有几种，它们之间的区别是什么
移动开发中使用rem的好处
首页的性能优化方法
浏览器的同源策略
CSS中link 和@import的区别
display:none与visibility：hidden的区别
列举不同的清浮动的技巧
px与em的区别
组件中<style scoped> 中scoped的作用
如何解决跨域问题
谈谈你对webpack的看法
es6的了解
标签上title与alt属性的区别
less Sass的特性有哪些
null与undefined的区别
get和poss的区别
事件委托是什么

前言

貌似又到了一年一度跑路跳槽的时刻，由于个人的一些原因最近也参加了很多面试，发现有很多基础性的东西掌握程度还是不够，故此想总结一下最近面试遇到的问题以及个人认为比较重要的东西，留给自己消化，也分享给有需要的小伙伴

如果文章中有出现纰漏、错误之处，还请看到的小伙伴多多指教，先行谢过

好了，废话不多说，以下 ↓

1.什么是盒子模型

IE6盒子模型与W3C盒子模型。
文档中的每个元素被描绘为矩形盒子。盒子有四个边界：外边距边界margin, 边框边界border, 内边距边界padding与内容边界content。总结：盒子的大小由content+padding+border这几部分决定

CSS3中有个box-sizing属性可以控制盒子的计算方式，

content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和。（W3C盒子模型）

border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值。（IE6盒子模型）

2.什么是web 标准

简单的说，就是HTML、CSS、JavaScript这三者分离。WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如 W3C DOM）、ECMAScript等

3. h5常用的语义化标签

有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取，利于SEO
有利于不同设备的解析
有利于构建清晰的机构，有利于团队的开发、维护

行内元素：a span i img input select b 等
块级元素：div ul ol li h1~h6 p table 等
空元素：br hr link 等
<nav><header><footer><section><article>

4. Doctype作用，HTML5 为什么只需要写 `<!DOCTYPE HTML>`

doctype是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档.<!DOCTYPE>声明必须是HTML文档的第一行，位于html标签之前
HTML5不基于SGML，所以不需要引用DTD。在HTML5中<!DOCTYPE>只有一种
SGML: 标准通用标记语言,是现时常用的超文本格式的最高层次标准

5. 常见的浏览器内核有哪些，介绍一下你对浏览器内核的理解

Trident内核：IE
Gecko内核：NETSCAPE6及以上版本，火狐
Presto内核：Opera7及以上。[Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari，Chrome等。[Chrome的：Blink（WebKit的分支）]

6. cookie，sessionStorage 和 localStorage 的区别进行描述

特性	区别
Cookie	可设置失效时间，没有设置的话，默认是关闭浏览器后失效`每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题`4KB左右
localStorage	除非被手动清除，否则将会永久保存`仅在客户端（即浏览器）中保存，不参与和服务器的通信` 5MB的信息使用localStorage:localStorage.setItem(key,value)、localStorage.getItem(key)实现浏览器内多个标签页之间的通信
sessionStorage	仅在当前网页会话下有效，关闭页面或浏览器后就会被清除`仅在客户端（即浏览器）中保存，不参与和服务器的通信` 5MB的信息

7. 写出以下几个html标签：文字加粗，下标，居中，字体

加粗：<b>、<strong>

下标：<sub>

居中：<center>

字体：<font>、<basefont>、参考《HTML标签列表》

8. 一个div在不同分辨率屏幕上下左右居中显示，用css实现

//定位的方式
.father {
    position: relative;
}
.son {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

//css3属性
.father {
    position: relative;
}
.son {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

//flex布局
.father {
    display: flex;
    justify-content: center; //水平居中
    align-items: center; //垂直居中
}

9. HTML5的离线存储方式有几种，它们之间的区别是什么

HTML5离线存储原理

10. 移动开发中使用rem的好处

rem单位确实好处蛮多的，它是相对于根节点，让我们整个网站单位可以统一。还可以让我们的字体更好的自适应网站的大小。但是，你用过了就知道，它会出现一个问题：

用Chrome浏览器打开你做的网站的时候，有时候会出现字体很大的情况。但是刷新一下页面就好了。

之所以会出现这种情况，原因是因为我们为了计算方便，将原本默认1rem=16px修改1rem=10px。因此，我们在html中通常做了如下设置：

html {font-size: 62.5%; /**10 ÷ 16 × 100% = 62.5% 1rem = 10px **/}
但是呢，Chrome浏览器有时候会忽略了html的设置。于是在初始化页面的时候，出现了上面字体过大的情况，本来1.6rem应该渲染成16px的字体，却被渲染成了16*1.6=25.6px大小了。

最佳的一种解决方案是：

在你要展现的文字父级或者其本身设置font-size

第二种解决方案：

我们在页面中添加style样式，给body设置font-size

例如把下面的代码放到 head 里面：

<style>  
        body {  
            font-size: 1.2rem;  
        }
</style>

//计算尺寸时，只需要将对应的尺寸除以100。
(function(designWidth, maxWidth) {
	var doc = document,
		win = window;
	var docEl = doc.documentElement;
	var metaEl,
		metaElCon;
	var styleText,
		remStyle = document.createElement("style");
	var tid;

	function refreshRem() {
		// var width = parseInt(window.screen.width); // uc有bug
		var width = docEl.getBoundingClientRect().width;
		if (!maxWidth) {
			maxWidth = 540;
		};
		if (width > maxWidth) { // 淘宝做法：限制在540的屏幕下，这样100%就跟10rem不一样了
			width = maxWidth;
		}
		var rem = width * 100 / designWidth;
		// var rem = width / 10; // 如果要兼容vw的话分成10份 淘宝做法
		//docEl.style.fontSize = rem + "px"; //旧的做法，在uc浏览器下面会有切换横竖屏时定义了font-size的标签不起作用的bug
		remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
	}

	// 设置 viewport ，有的话修改 没有的话设置
	metaEl = doc.querySelector('meta[name="viewport"]');
	// 20171219修改：增加 viewport-fit=cover ，用于适配iphoneX
	metaElCon = "width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no,viewport-fit=cover";
	if(metaEl) {
		metaEl.setAttribute("content", metaElCon);
	}else{
		metaEl = doc.createElement("meta");
		metaEl.setAttribute("name", "viewport");
		metaEl.setAttribute("content", metaElCon);
		if (docEl.firstElementChild) {
			docEl.firstElementChild.appendChild(metaEl);
		}else{
			var wrap = doc.createElement("div");
			wrap.appendChild(metaEl);
			doc.write(wrap.innerHTML);
			wrap = null;
		}
	}

	//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
	refreshRem();

	if (docEl.firstElementChild) {
		docEl.firstElementChild.appendChild(remStyle);
	} else {
		var wrap = doc.createElement("div");
		wrap.appendChild(remStyle);
		doc.write(wrap.innerHTML);
		wrap = null;
	}

	win.addEventListener("resize", function() {
		clearTimeout(tid); //防止执行两次
		tid = setTimeout(refreshRem, 300);
	}, false);

	win.addEventListener("pageshow", function(e) {
		if (e.persisted) { // 浏览器后退的时候重新计算
			clearTimeout(tid);
			tid = setTimeout(refreshRem, 300);
		}
	}, false);

	if (doc.readyState === "complete") {
		doc.body.style.fontSize = "16px";
	} else {
		doc.addEventListener("DOMContentLoaded", function(e) {
			doc.body.style.fontSize = "16px";
		}, false);
	}
})(750, 750);

14. display:none与visibility：hidden的区别

特性	区别
display:none	不占据任何空间，在文档渲染时，该元素如同不存在（但依然存在文档对象模型树中）`会触发reflow（回流），进行渲染`不是继承属性，元素及其子元素都会消失
visibility：hidden	该元素空间依旧存在`只会触发repaint（重绘），因为没有发现位置变化，不进行渲染` 是继承属性，若子元素使用了visibility:visible，则不继承，这个子孙元素又会显现出

15. 列举不同的清浮动的技巧

浮动的元素是脱离文档标准流的，如果我们不清楚浮动，那么就会造成父元素高度塌陷，影响页面布局。

清除浮动的方式：

为父元素设置高度
为父元素添加overflow:hidden
伪元素

.fix::after {
content:"";
display:block;
clear:both;
}

16.px与em的区别

px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化；

em表示相对于父元素的字体大小。em是相对单位，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。

17. 组件中`<style scoped>` 中scoped的作用

在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。

18.如何解决跨域问题

解决跨域的三种方案

19. 谈谈你对webpack的看法(gulp)

webpack是一个模块打包工具，可以使用它管理项目中的模块依赖，并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件（图片，字体）等，让开发更高效。对于不同类型的依赖，webpack有对应的模块加载器，而且会分析模块间的依赖关系，最后合并生成优化的静态资源。

webpack的基本功能和工作原理
代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等
文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等
代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载
模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件
自动刷新：监听本地源代码的变化，自动构建，刷新浏览器
代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过
自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

webpack构建过程
从entry里配置的module开始递归解析entry依赖的所有module
每找到一个module，就会根据配置的loader去找对应的转换规则
对module进行转换后，再解析出当前module依赖的module
这些模块会以entry为单位分组，一个entry和其所有依赖的module被分到一个组Chunk
最后webpack会把所有Chunk转换成文件输出
在整个流程中webpack会在恰当的时机执行plugin里定义的逻辑

webpack打包原理
将所有依赖打包成一个bundle.js，通过代码分割成单元片段按需加载

gulp是基于Nodejs的自动任务运行器。
她能自动化地完成 javascript、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。
她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。
gulp主要用到node中的两个模块，fileSystem和stream，文件系统可以对文件进行操作，比如读取文件、写入文件、创建文件、修改文件名、删除文件等；而数据流主要分为读取流、写入流和双工流；这里还有一个管道pipe的概念，管道可以使文件对象从一个流安全的流入到另一个流。
gulp就是先创建一个读取流、一个写入流，在创建若干个双工流，对双工流进行数据的处理，比如去空字符，然后通过管道将读取流、不同功能的双工流、写入流依次连接起来，从而实现对文件的操作处理

20.es6的了解

ECMAScript 6 入门

21.img标签上title与alt属性的区别

alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。

这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等。

title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息

22.less Sass的特性有哪些

sass是以$开头定义的变量
sass没有局部变量，满足就近原则
sass样式中声明Mixins时需要使用“@mixin”命令,在选择器调用定义好的Mixins需要使用“@include”

less是以@开头定义的变量
less中{}内定义的变量为局部变量
less中，混合是指将定义好的“ClassA”中引入另一个已经定义的“Class”，就像在当前的“Class”中增加一个属性一样

23.null与undefined的区别

null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。

Number(null)
// 0

Number(undefined)
// NaN

undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。

24. get和poss的区别

GET在浏览器回退时是无害的，而POST会再次提交请求。
GET产生的URL地址可以被Bookmark，而POST不可以。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求在URL中传送的参数是有长度限制的，而POST么有。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
GET参数通过URL传递，POST放在Request body中

25. 事件委托是什么

事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

qinglinn

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面试题 1

面试题总结 html、css什么是盒子模型什么是web 标准h5常用的语义化标签Doctype作用，HTML5 为什么只需要写 <!DOCTYPE HTML>常见的浏览器内核有哪些，介绍一下你对浏览器内核的理解cookie，sessionStorage 和 localStorage 的区别进行描述写出以下几个html标签：文字加粗，下标，居中，字体一个div在不同分辨...
复制链接

扫一扫