浏览器|腾讯大佬整理的Web前端面试题目及答案汇总

浏览器|腾讯大佬整理的Web前端面试题目及答案汇总
文章图片

浏览器|腾讯大佬整理的Web前端面试题目及答案汇总
文章图片



HTML/CSS部分1、什么是盒子模型?在网页中 , 一个元素占有空间的大小由几个部分构成 , 其中包括元素的内容(content) , 元素的内边距(padding) , 元素的边框(border) , 元素的外边距(margin)四个部分 。 这四个部分占有的空间中 , 有的部分可以显示相应的内容 , 而有的部分只用来分隔相邻的区域或区域 。 4个部分一起构成了css中元素的盒模型 。
2、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?行内元素:a、b、span、img、input、strong、select、label、em、button、textarea
【浏览器|腾讯大佬整理的Web前端面试题目及答案汇总】块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素:即系没有内容的HTML元素 , 例如:br、meta、hr、link、input、img
由于篇幅展示有限 , 完整版已经打包完毕 , 文末领取
3、CSS实现垂直水平居中一道经典的问题 , 实现方法有很多种 , 以下是其中一种实现:
HTML结构:
<div class=\"wrapper\">
    <div class=\"content\"></div>
</div>

CSS:
.wrapper{position:relative;
.content{
\tbackground-color:#6699FF;
\twidth:200px;
\theight:200px;
\tposition: absolute;        //父元素需要相对定位
\ttop: 50%;
\tleft: 50%;
\tmargin-top:-100px ;   //二分之一的height , width
\tmargin-left: -100px;


4、简述一下src与href的区别href 是指向网络资源所在位置 , 建立和当前元素(锚点)或当前文档(链接)之间的链接 , 用于超链接 。
src是指向外部资源的位置 , 指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内 , 例如js脚本 , img图片和frame等元素 。 当浏览器解析到该元素时 , 会暂停其他资源的下载和处理 , 直到将该资源加载、编译、执行完毕 , 图片和框架等元素也如此 , 类似于将所指向资源嵌入当前标签内 。 这也是为什么将js脚本放在底部而不是头部 。
5、什么是CSS Hack?一般来说是针对不同的浏览器写不同的CSS就是 CSS Hack 。
IE浏览器Hack一般又分为三种 , 条件Hack、属性级Hack、选择符Hack(详细参考CSS文档:css文档) 。 例如:
// 1、条件Hack
<!--[if IE
>
 <style>
\t\t.test{color:red;
 </style>
<![endif
-->
// 2、属性Hack
.test{
color:#090\\9; /* 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 */

6、简述同步和异步的区别同步是阻塞模式 , 异步是非阻塞模式 。
同步就是指一个进程在执行某个请求的时候 , 若该请求需要一段时间才能返回信息 , 那么这个进程将会一直等待下去 , 直到收到返回信息才继续执行下去;
异步是指进程不需要一直等下去 , 而是继续执行下面的操作 , 不管其他进程的状态 。 当有消息返回时系统会通知进程进行处理 , 这样可以提高执行的效率 。
7、px和em的区别px和em都是长度单位 , 区别是 , px的值是固定的 , 指定是多少就是多少 , 计算比较容易 。 em得值不是固定的 , 并且em会继承父级元素的字体大小 。