牛客2018前端面试总结_途牛天下前端面试题-CSDN博客

本文链接：https://blog.csdn.net/shaili34/article/details/82431499

1.display属性

值	内容	代表元素
none	不显示该元素
block	显示为块级元素，独占一行，可以通过CSS改变宽和高,元素前后有换行符	div p ul li ol form address
inline	由内容决定所占位置；不可通过CSS改变宽高，元素前后无换行符	span strong em a del
inline-block	内容决定所占位置，可以通过CSS改变宽高	img

值	内容
list-item	此元素会作为列表显示
run-in	此元素会根据上下文作为块级元素或内联元素显示
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除
table	此元素会作为块级表格来显示，类似 `<table>`，表格前后带有换行符
inline-table	此元素会作为内联表格来显示，类似 `<table>`，表格前后没有换行符
table-row-group	此元素会作为一个或多个行的分组来显示，类似 `<tbody>`
table-header-group	此元素会作为一个或多个行的分组来显示，类似 `<thead>`
table-footer-group	此元素会作为一个或多个行的分组来显示，类似 `<tfoot>`
table-row	此元素会作为一个表格行显示，类似 `<tr>`
table-column-group	此元素会作为一个或多个列的分组来显示，类似`<colgroup>`
table-column	此元素会作为一个单元格列显示，类似 `<col>`
table-cell	此元素会作为一个表格单元格显示，类似 `<td>` 和 `<th>`
table-caption	此元素会作为一个表格标题显示，类似 `<caption>`
inherit	规定应该从父元素继承 display 属性的值

2.overflow属性

参数	溢出元素如何处理
scroll	必会出现滚动条
auto	子元素内容大于父元素时出现滚动条
visible	溢出的内容会在父元素之外
hidden	溢出部分被隐藏

3.`<a>`标签的target属性

在html中通过标签打开一个链接，通过标签的 target 属性规定在何处打开链接文档。
如果在标签中写入target属性，则浏览器会根据target的属性值去打开与其命名或名称相符的框架或者窗口.
在target中还存在四个保留的属性值如下

值	描述
_blank	在新窗口打开被链接文档
_self	默认。在相同的框架中打开被链接文档
_parent	在父框架集中打开被链接文档
_top	在整个窗口打开被链接文档
framename	在指定的框架中打开被链接文档

这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。

4.Flash提供了ExternalInterface接口与JavaScript通信

两个方法：call和addCallback

作用：call让Flash调用js里的方法，addCallback是用来注册flash函数让js调用。

5.alt是html标签的属性，而title既是html标签，又是html属性。

title标签这个不用多说，网页的标题就是写在这对标签之内的.

title作为属性时，用来为元素提供额外说明信息。例如，给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。

而alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。

6.用js让一个input的背景颜色变成红色。

思路：

1.获取该元素

2.通过该元素拥有的属性或方法来改变元素的样式。

细节：

1.获取元素可以借助document.getElementById()/document.getElementsByTagName()等若干方法，也可以利用层级关系（父子关系、兄弟关系等）。而这一点题目已经直接略过了，它直接给出了该元素的引用名称inputElement。

2.通过js来改变元素样式的两个最常见的API为：style、className。使用style接口一次只能改变一个样式，而使用className则可以同时改变多个样式，当然前提是已经用css定义该类名的相关样式。

3.backgroundColor? background-color?
简单说一下：在使用点运算符时，浏览器看到“-”就没法正确解析了，在那种情况下，只能将该变量使用驼峰命名法来表示。而使用方括号表示法，”-“被理解为字符串中的内容，该字符串能被正确解析。

eg:
inputElement.style.backgroundColor = ‘red’; // 这是没问题的
inputElement.style.background-color = ‘red’; // 这是错的，浏览器看不懂啊…
inputElement.style[“background-color”] = ‘red’; // 这也是可以的

4.表示红色有若干种方法:
1)颜色名：red
2)百分数：rgb(100%, 0%, 0%)
3)数值：rgb(255, 0, 0)
4)十六进制：#FF0000
5)简写的十六进制：#F00

7.HTML5标签

<audio> 标签定义声音，比如音乐或其他音频流。

<canvas> 标签定义图形，比如图表和其他图像。<canvas> 标签只是图形容器，您必须使用脚本来绘制图形.

<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

<menu> 标签定义命令的列表或菜单。<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令

command 元素表示用户能够调用的命令。<command> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。

8. position属性

属性	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，元素的位置通过 “left”, “top”,”right” 以及 “bottom” 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位.元素的位置通过 “left”, “top”,”right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

9.下面有关浏览器中使用js跨域获取数据的描述，说法错误的是？

A.域名、端口相同，协议不同，属于相同的域

B.js可以使用jsonp进行跨域

C.通过修改document.domain来跨子域

D.使用window.name来进行跨域

答案：A。只要协议、域名、端口有任何一个不同, 都被当作是不同的域。

10.函数输出是：

function Foo() {
    var i = 0;
    return function() {
        console.log(i++);
    }
}

var f1 = Foo(),
    f2 = Foo();
f1();
f1();
f2();

解析：
（1）Function是引用类型：保存在堆中，变量f1,f2是保存在栈中；
（2）闭包：一个函数（产生新的作用域）定义的局部变量、子函数的作用域在函数内，但是一旦离开了这个函数，局部变量就无法访问，所有通过返回子函数到一个变量f1的方法，令f1指向堆中的函数作用域，这样可以使用局部变量i.
(3) 过程：第一次f1():f1=Foo()中，先执行Foo(): i = 0,return值返回给f1 (f1指向子函数 f1()=function(){…..},因为子函数没有定义i，所以向上找到父函数定义的 i: )并执行子函数输出i=0,再自加 i =1(覆盖了父函数Foo 的 i值); 第二次f1() : 执行的是子函数 Function(){ ..},输出的是父函数的 i=1,再自加 i =2; 第一次f2():同第一次f1(),不同的是 f2指向堆中一个新的对象 function(){…},所有此i非彼i,输出i=0;如果再次f2(),那么和第二次f1(),一样输出i=1;

11.JS变量命名规则

第一个字符必须是一个字母、下划线（_）或一个美元符号（$）；其他字符可以是字母、下划线、美元符号或数字。

12.JS方法

eval：返回字符串表达式中的值

unEscape：返回字符串ASCI码

escape：返回字符的编码

parseFloat：返回实数

13.文档类型

DTD（文档类型定义）是一组机器可读的规则，他们定义 XML 或 HTML 的特定版本中允许有什么，不允许有什么。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。浏览器通过分析页面的 DOCTYPE 声明来了解要使用哪个 DTD ，由此知道要使用 HTML 的哪个版本。

DOCTYPE 当前有两种风格，严格（ strict ）和过渡（ transitional ）。过渡 DOCTYPE 的目的是帮助开发人员从老版本迁移到新版本。如果发送具有正确的 MIME 类型的 XHTML 文档，理解 XML 的浏览器将不显示无效的页面。

14.浏览器模式

浏览器有两种呈现模式：标准模式和混杂模式（quirksmode）。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。

DOCTYPE 切换 :对于 HTML 4.01 文档，
• 包含严格 DTD 的 DOCTYPE 常常导致页面以标准模式呈现。
• 包含过度 DTD 和 URI 的 DOCTYPE 也导致页面以标准模式呈现。
• 但是有过度 DTD 而没有 URI 会导致页面以混杂模式呈现。
• DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现。

15.call（），apply（）

call与apply都属于Function.prototype的一个方法，所以每个function实例都有call、apply属性

1.作用：在特定的作用域总调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域。

window.color="red"; 
var o={color:"blue"}; 
function getColor(){ 
    console.log(this.color); 
} 
getColor.call(this); 
getColor.call(window); 
getColor.call(o);

2.区别 :接收参数的方式不同：

对于call（），第一个参数是运行函数的作用域，其余参数都直接传递给函数即传递给函数的参数必须逐个列举出来。

对于apply（），第一个参数是运行函数的作用域，另一个参数是参数数组,可以是Array实例或arguments对象。

function sum(num1,num2){ 
return num1+num2; 
} 

function callSum1(num1,num2){ 
return sum.call(this,num1,num2); 
} 

function callSum2(num1,num2){ 
return sum.apply(this,arguments); 
} 

function callSum(num1,num2){ 
return sum.apply(this,[num1,num2]); 
}

16.

定义了border：none，隐藏了边框的显示，边框宽度会被设置未initial，使用值为0

定义边框时，border-style必须设定，并且不为none或hidden时边框才会显示

17.浏览器的内核引擎

基本上是四分天下：
1）Trident: IE 以Trident 作为内核引擎；
2) Gecko: Firefox 是基于 Gecko 开发；
3) WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器；
4) Presto: Opera的内核，但由于市场选择问题，主要应用在手机平台–Opera mini

18.CSS Sprites

1.简介

CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中，利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，访问页面时避免图片载入缓慢的现象。