前端面试题

最新推荐文章于 2024-06-15 03:51:35 发布

suyangshuke

最新推荐文章于 2024-06-15 03:51:35 发布

阅读量447

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/hamutailang_/article/details/84982003

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

第一部分：HTML+CSS

1.让一个不定宽高的DIV水平居中？

（1）使用css3transform：

父盒子：position：relative

子盒子：position：absolute；transform：translate（-50%，-50%）【这个移动是自身长度的移动】；top：50%；left：50%【这两个是相对于父盒子的移动】

2.position的几个属性？

position有四个常见属性：static，relative，absolute，fixed。一般要配合top，right，bottom，left使用

（1）static：默认位置，是处于元素标准流的位置，不经常使用

（2）relative：定位相对于自身元素的位置，以它原来的位置为基准，移动后原来的位置仍然占据空间。

（3）absolute：定位相对于包含它的元素的指定位置，以它的父盒子为基准，移动后原来的位置不占据空间，如果父盒子没有position属性，以body为依据。

（4）fixed：定位相对于浏览器窗口的指定坐标。始终以body为依据，移动后原来不占位置。

3.box-sizing，transition，translate分别是什么？

（1）box-sizing：指定盒模型的大小。border-box：从边框固定盒子大小。content-box：从内容固定盒子大小

（3）transform：属性应用于2D和3D转换，缩放，移动和旋转。scale、translate、rotate都有x，y，z三个属性。

a）scale：缩放，scale(x,y) scale3d(x,y) scaleX(x) scaleY(y) scaleZ(z)

b）translate：平移，translate(x,y) translate3d(x,y,z) translateX(x) translateY(y) translateZ(z) x：右为正，做为负 y：前为正，后为负。 z：上为正，下为负。

c) rotate:旋转, rotate(x,y) rotate3d(x,y,z) rotateX(x) rotateY(y) rotateZ(z)

4.选择器优先级？

！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承

权重算法：(0,0,0,0)第一个0对应import；第二个0对应id选择器；第三个0对应类选择器；第四个0对应标签选择器

5.css3选择器有哪些？

属性选择器，伪类选择器，伪元素选择器

属性选择器：div["class"="box"]

伪类选择器：li:first-child{}

伪元素选择器：span::before{}

6.html和xhtml有什么区别？

html是一种基本的WEB网页设计语言，xhtml是基于XML的标志语言。

区别是：

xhtml元素必须被正确嵌套 <a></a>

xhtml元素必须被关闭

xhtml标签名必须小写

xhtml文档必须有根元素 <html>…</html>

7.css引入方式有哪些？link和@import的区别？

行内样式内部样式外部样式（链接式，导入式）

区别：链接式属于xhtml，优先加载css到页面

导入式属于css2.1，优先加载html结构，再加载css

8.标签上title和alt属性的区别？

alt：当图片加载不出来的时候，用文字表示

title：为该属性提供建设性的信息。

9.清楚浮动的几种方式？

（1）给父级定义：height

（2）在最后一个浮动结尾处加空div标签 clear：both

（3）给父级定义 overflow：hidden

（4）父级定义伪类：after,zoom（6句箴言）

.clearfix:after{

content:"";双引号不能少

display"block;

visibility:hidden;

height:0;

line-height:0;

clear:both;

}

.clearfix{

zoom:1

}

ie8以上和非ie浏览器才支持，zoom解决ie6,7浮动问题

（5）父元素定义双伪元素：

.clearfix:before,.clearfix:after{

content:"";

display:block;

clear:both;

}

.clearfix{

zoom:1

}

10.z-index的工作原理及适用范围？

z-index指的是堆叠顺序，控制着元素在z轴上的表现形式。该元素仅适用于position定位元素。堆叠顺序指的是当前元素位于z轴上的值，数值越大表明元素的堆叠顺序越高，越靠近屏幕。默认情况下，文档中后来声明的元素具有更高的堆叠顺序。

适用范围：

网页两侧浮动窗口（播放器、置顶按钮、浮动广告、功能按钮）

导航栏浮动置顶

隐藏div实现弹窗功能（通过设置div的定位和z-index控制div的位置和出现隐藏）

11.合理的页面布局是结构和表现分离，那么结构是什么？表现是什么？

结构是html，表现是css

12.简述对web语义化的理解？

就是让浏览器更好的读懂你的代码，在进行html结构、css表现，js行为设计时，尽量使用语义化的标签，使程序代码简单明了，易于进行web操作和网站seo。

13.每个html文件里开头都有一个很重要的Doctype，指的是什么？

DOCTYPE是一种标准通用标记语言的文档类型声明，它的目的是告诉标准通用标记语言解析器，应该使用什么样的文档类型定义来解析文档。只有确定了一个正确的文档类型，超文本标记语言或者可扩展超文本标记语言中的标签和层叠样式表才能生效。

14.display：none和visibility：hidden的区别？

display：none，使用该属性后，html元素的宽度和高度等属性值都将丢失；visibility：hidden使用该属性后，html元素仅仅是在视觉上看不见，仍然占据空间，即仍然具有宽度和高度。

第二部分：JS

1.js作用域和闭包？

作用域：作用域是针对变量的，作用域分两种：全局作用域和局部作用域。比如我们创建一个函数a1，a1里面包含子函数a2，那么就会有三个作用域，全局作用域，a1作用域，a2作用域。当a2在查找变量的时候如果在a2作用域找不到就会向上一级查找即a1作用域，找不到再向上查找即全局作用域，形成作用域链，a2---a1---全局作用域。当前作用域可以获得当前作用域下的变量和包含当前作用域的外层作用域下的变量，反之不行。不同函数的作用域也不能相互访问。

js垃圾回收机制，指的是当一个函数被执行完后，其作用域就会被收回，如果形成闭包，执行完之后其作用域就不会被收回。某个函数被它的父函数之外的一个变量引用，就会形成闭包。闭包的本质就是在一个函数内部创建另一个函数。

闭包的作用就是保存自己的私有变量，通过提供的接口方法给外部使用，但是外部不能直接访问该变量。

闭包的三个特性：（1）函数内部嵌套函数（2）函数内部可以引用函数外部的参数和变量（3）参数和变量不会被垃圾回收机制回收。

2.什么是原型链？

JavaScript是面向对象的，每个实例对象都有一个__proto__属性指向它的原型，这个实例的构造函数有一个属性prototype也指向同一原型。当一个对象在查找一个属性的时候，自身没有就会根据__proto__向它的原型查找，如果没有则向它的原型的原型查找，直到Object.prototype.__proto__为null，这样就形成了原型链。

3.js中数据类型有几种？

js中数据类型分为两种：基本类型（值类型）和引用类型。

基本类型：Number、String、Boolean、undefined、null

引用类型：Object（数组和对象）、Function

基本类型的数据是存放在栈内存中的，引用类型数据是存放在堆里面的。基本类型的复制是在栈内存中开辟一个新的存储区来存储新的变量，这个变量有自己的值只是和前面的一样。引用类型是在栈内存定了一个指针，这个指针指向堆内存中该对象的存储地址。复制给另一个对象其实是把地址复制过去，两个指针指向同一个对象，如果其中一个修改了，另一个也会改变。

4.实现继承的方法有什么？

构造函数继承（经典继承）、原型链继承、组合继承（伪经典继承）、寄生式继承、寄生组合式继承。

（1）构造函数继承：在子类构造函数内部，借用apply（）和call（）方法，让子类变量this在父类中再执行一遍。父类中是给this绑定属性的，因此子类也就继承了父类中的共有属性。缺点是：方法都在构造函数的原型对象中，函数无法复用。

（2）原型链继承：实例化一个父类时，复制了父类构造函数的属性和方法，并将__proto__指向原型对象，因此就拥有了父类原型对象上的属性和方法。原型链继承又称作是洁净的继承者，因为在函数内部先创建了一个临时的构造函数，传入这个构造函数的原型，最后在返回一个实例，没有给临时的父类添加任何共有属性。（是对类式继承的封装）

（3）组合继承：指的是将构造函数继承和原型链继承结合到一起，发挥两者的长处。思路：使用原型链实现对原型属性和方法的继承，借助构造函数实现对实例属性的继承。

（4）寄生式继承：是对类式继承的二次封装，在二次封装过程中对继承对象进行了方法扩展，可以添加新的属性和方法。缺点：和构造函数继承类似，做不到函数的复用。

（5）寄生组合式继承：通过构造函数继承属性，通过原型链的混合形式继承方法。

5.对this的理解？

this是一个关键字，他代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。

（1）作为函数调用，this指向全局对象

（2）作为对象的方法调用，this指向调用对象

（3）作为构造函数被调用，this指向新的对象

（4）apply调用this指向apply方法的第一个参数

6.js中一共有几种数据类型？

string、number、boolean、null、undefined、function、object、array

7.call和apply的区别？

相同点：用来代替另一个对象调用方法，将函数的对象上下文从初始的上下文改变为由thisObj指定的新对象。

不同点：传递参数的个数不同。apply最多只有两个参数，function.apply(thisObj,[var1,var2,var3]).call则是传递参数列表。function.call(thisObj,var1,var2,var3)

8.原生js的window.onload与jquery的$(document).ready(function(){}),$(function(){})，有什么区别？

（1）执行时间：window.onload必须等页面内包括图片的所有元素执行完毕后才执行；$(document).ready(function(){}),$(function(){})是DOM结构绘制完毕后就执行

（2）编写个数：window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个。$(document).ready(function(){}),$(function(){})可以同时编写多个，并且都可以执行。

（3）简化写法：window.onload没有简化写法；$(document).ready(function(){})可以简写成$(function(){})

9、简述jquery中.get()和.eq()的异同？

相同：匹配获取第N个元素

不同：.get()返回的是html对象数组，不能调用jquery的其他方法；.eq()返回的是jquery对象，可以继续调用其他方法。

第三部分：程序题

1.array数组时值类型引用。在栈中存放的是指针的地址，复制时，复制的也是地址，因此一个改变两个都变。

var a=[5,6];
var b=a;
b[0]='hello';
alert(a[0]);
答案：'hello'

2.函数作用域是从里向外的，arm在子函数没有找到就会向外找。字符串+数字就会合并为字符串。

function dosome(){
	for(var i=0;i<4;i++){
		var k=100;
		arm+=','+(k+i);
	}
}
var k=1;
var arm=k;
dosome();
arm+=k;
console.log(arm);
答案：1,100,101,102,1031

console.log(typeof null);//object
console.log(typeof undefined);//undefined
console.log(typeof NaN);//number
console.log(undefined || 1);//1
console.log(null || NaN);//NaN
console.log(0 && 1);//0
console.log(0 && 1||0);//0

suyangshuke

关注

0
点赞
踩
1

收藏

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

第一部分：HTML+CSS1.让一个不定宽高的DIV水平居中？（1）使用css3transform：父盒子：position：relative子盒子：position：absolute；transform：translate（-50%，-50%）【这个移动是自身长度的移动】；top：50%；left：50%【这两个是相对于父盒子的移动】2.position的几个属性？pos...
复制链接

扫一扫