Web前端面试题目汇总
一、html/CSS部分
-
1.什么是盒子模型？
盒子模型包含内容(content)、内边距(pandding)、外边距(margin)和边框(border）四部分 。 -
2.行级元素有哪些？块级元素有哪些？ 空(void)元素有那些？
(1)行级元素 特点：a.可以和其他元素处于一行，不用必须另起一行。 b.元素的高度、宽度及顶部和底部边距不可设置。 c.元素的宽度就是它包含的文字、图片的宽度，不可改变。 常见的行级元素:a,span,img,input,textarea,label,button等 (2)块级元素 特点：a.每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。 b.元素的高度、宽度、行高和顶底边距都是可以设置的。 c.元素的宽度如果不设置的话，默认为父元素的宽度。 常见的块级元素：div、p、h1...h6、ol、ul、dl、table、address、 blockquote,form等 总结：(1)css样式中用display:inline将块级元素设为行级元素 (2)可以用display:block将行级元素设为块级元素 -
3.简述一下src与href的区别
(1)href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。 (2)src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。 - 4.什么是CSS Hack?
一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack
// 1、条件Hack <!--[if IE]> <style> .test{color:red;} </style> <![endif]--> // 2、属性Hack .test{ color:#0909; /* For IE8+ */ *color:#f00; /* For IE7 and earlier */ _color:#ff0; /* For IE6 and earlier */ } // 3、选择符Hack * html .test{color:#090;} /* For IE6 and earlier */ * + html .test{color:#ff0;} /* For IE7 */
-
5.position的值， relative和absolute分别是相对于谁进行定位的？
absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。 fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。 relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。 static 默认值。没有定位，元素出现在正常的流中 sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出
五、常见题
-
1.分析输入url到页面返回的过程
第一步：客户机提出域名解析请求，并将该请求发送给本地的域名服务器。 第二步：当本地的域名服务器收到请求后，就先查询本地的缓存，如果有该记录项，则本地的域名服务器就直接把查询的结果返回。 第三步：如果本地的缓存中没有该记录项，则本地的域名服务器就直接把请求发送给根域名服务器，然后根域名服务器再返回给本地域名服务器一个所查询域（根的子域）的主域名服务器的地址。 第四步：本地服务器再向上一步返回的域名服务器发送请求，然后接受请求的服务器查询自己的缓存，如果没有该记录项，则返回相关的下级的域名服务器的地址。 第五步：重复第四步，直到找到正确的记录。 -
2.web前端性能优化的方法
a.减少http请求，合理设置HTTP缓存 http协议是无转台的应用层协议，意味着每次http请求都需要建立通信链路、进行数据传输，而在服务器端，每个http都需要启动独立的线程去出来处理。 减少http的主要手段是合并css、合并javascript、合并图片b.使用浏览器缓存 (1)静态资源文件可通过设置http头中的cache-control和expires的属性，可设定浏览器缓存。 (2)静态资源变化需及时应用到客户端浏览器，可通过改变文件名实现，即更新javascript文件并不是更新javascript文件内容，而是生成新的js文件并更新html文件中的引用。 (3)使用浏览器缓存策略的网站在更新静态资源时，应采用逐量更新的方法。 c.启用压缩 服务器端对文件压缩，在浏览器端对文件解压缩，可有效减少通信传输的数据量。 d.lazyload image 例如图片，在页面刚加载时只加载第一屏，当用户继续往后滚屏时才加载后续的图片。 e.css放在页面最上部，javascript放在页面最下面 f.减少cookie传输 cookie包含在每次请求和响应中，太大的cookie会严重影响数据传输。 g.javascript代码优化