2022常见前端基础面试题（含答案）二

　　1.精灵图和base64如何选择？

　　精灵图，是网页处图图片的一种方式，它是把多张小图整合到一张，利用background-position属性定位某个图片的位置，来达到在大图片中引用某个小图片的效果，当页面访问时，可以减少向服务器的yg有求次数，提高页面的加载速度。

　　base64，是网络上最常见的用于传输8Bit字节代码的编码方式之一，将原本二进制形式转成以64个字符基本单位，所组成的一串字符串。base64的图片会随着html或者css一起下载到浏览器,减少了请求，避免跨域问题，但是低版本的IE浏览器不兼容，体积比原来的图片大，不利于css的加载，所以如果是图比较大，就用精灵图合并为一张大图，使用base64直接把图片编码成字符串写入CSS文件。

　　2.列举5种IE haslayout的属性及其值

　　haslayout ：是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout 属性值为true时，我们说这个元素有一个布局(layout)

　　```

　　display:inline-block

　　position:absoult

　　zoom:任何值除了normal

　　min-height:任意值

　　min-width:任意值

　　ie7的

　　* min一height: (任意值)

　　* max一height: (除 none 外任意值)

　　* min一width: (任意值)

　　* max一width: (除 none 外任意值)

　　* overflow: (除 visible 外任意值)

　　* overflow一x: (除 visible 外任意值)

　　* overflow一y: (除 visible 外任意值)

　　* position: fixed

　　```

　　3.浏览器标准模式和怪异模式之间的区别是什么？

　　- 标准模式：是浏览器按照W3C标准解析执行代码，这样用规定的语法去渲染，就可以兼容各个浏览器，保证以正确的形式展示网页。

　　- 怪异模式：是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。

　　- 标准模式和怪异模式常见的区别：

　　- 标准模式：总宽度=width+margin(左右)+padding(左右)+border(左右)

　　- 怪异模式：总宽度=width+margin(左右)(width直接包括了padding(左右)+border(左右) )

　　4.浏览器怎么解析html文件？

　　- 渲染引擎的基本工作流程

　　- 解析HTML构建DOM树

　　- 渲染树构建

　　- 渲染树布局

　　- 绘制渲染树

　　- 渲染引擎会解析HTML文档并把标签转换成内容树中的DOM节点。它会解析style元素和外部文件中的样式数据。样式数据和HTML中的显示控制将共同用来创建另一棵树——渲染树。渲染引擎会尝试尽快的把内容显示出来。它不会等到所有HTML都被解析完才创建并布局渲染树。它会在处理后续内容的同时把处理过的局部内容先展示出来。

　　5.流式布局rem vm/vh px em的区别

　　- rem

　　- rem是相对于根元素 html，这样就意味着，我们只需要在根元素确定一个font-size字号，则可以来算出元素的宽高

　　- px

　　- px意为像素 , 是设备或者图片最小的一个点，比如常常听到的电脑像素是1920x1080的，表示的是水平方向是1920个像素点，垂直方向是1080个像素点。是我们网页设计常用的单位，也是基本单位。通过px可以设置固定的布局或者元素大小，缺点是没有弹性。

　　- em

　　- 参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身的font-size来计算(浏览器默认字体是16px)，整个页面内1em不是一个固定的值。

　　特点是1. em的值并不是固定的; 2. em会继承父级元素的字体大小。

　　- vw/vh

　　- vw view width的简写，是指可视窗口的宽度。假如可视区域宽度是1920px的话。那1vw = 1920px/100 = 19.2px

　　- vh view height的简写，是指可视窗口的高度。假如可视区域宽度是1080px的话。那1vh = 1080px/100 = 10.8px

　　- vm

　　- 相对于视口的宽度或高度中较小的那个。最小的那个被均分为100单位的 vm

　　- 例如：浏览器高度900px，宽度1200px，取最小的浏览器高度，1vm = 900px / 100 = 9px。

　更多关于前端培训的问题，欢迎咨询千锋教育在线名师。千锋教育拥有多年 IT培训服务经验，采用全程面授高品质、高体验培养模式，拥有国内一体化教学管理及学员服务，助力更多学员实现高薪梦想。