前端面试题整理js/css

- 日理万妓 2021-10-23 21:42 325阅读 0赞

**前端面试题整理j、css、html**  
**包括：css3选择器、页面布局、数组、表达式、js闭包 等知识点**

1.一个DIV元素的宽度和高度分别定义为400px和300px,请问以下哪个图表示的是  
box-sizing：border-box;的谊染结果( A )  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQyOTY3_size_16_color_FFFFFF_t_70]  
2、2010 年，Ethan Marcotte提出了“自适应网页设计”(Responsive Web Design)这个名词，指可以自动识别屏幕宽度并做出相应调整的网页设计。 请问以下哪种方式不属于“自适应网页设计”的用法: (B)  
A.在网页的头部加入一 行ViewPort元标签

B.使用绝对宽度， 如width:1000px  
C.使用固定大小的字体font: normal 12px Helvetica, Arial,sans-serif;  
D.使用流动布局(fluid grid)，如float left;  
E.自动探测屏幕宽度， 然后加载相应的CSS文件

F.在CSS中使用@media规则

3、请选择结果为真的表达式:（ C ）  
A. null Instanceof object //false  
B. null === undefined //false  
C. null == undefined //true  
D. NaN == NaN //false

4、foo对象有att属性，那么获取att属性的值，以下哪些做法是可以的:（ ACE ）  
A. foo.att  
B. foo(“att”)  
C. foo\[“att”\]  
D. foo\{“att”\}  
E. foo\[“a”+ “t” + "t\]  
F. foo.getAttribute("att’)  
G. foo.attr(“att”)

5、以下哪个方法用于Array中“删除元素，并向数组添加新元素”? ( A )  
A. splice  
B. push  
C. shift  
D. slice

6.下面是一段JS闭包的样例，请问:执行如下程序代码  
**//本题运行出错，题应该没有问题，有结果欢迎评论留言**

后，C和d的值分别是: ( )  
A. true,true B. true,false C. false,true D. false,false

7.判断字符串是否是这样组成的，第个必须是字母，后面可以是字母、数字、下划线，总长度为5-20.以下哪个表达式是正确的 ( B )

A. /^[a,zA,Z][a,zA,Z_0,9]{4,19}$/ 	B. /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/
    C. /^[a,zA,Z][a,zA,Z_0,9]{5,20}$/	 D. /^[a-zA-Z][a-zA-Z_0-9]{5,20}$/

8、如果有这样一段代码(引用了jQuery)

$(function() { 
    	for(var i=1; i< 5; i++) { 
    		$('<button>').html('a-' + i)
    		.appendTo('body').click(function(event){ 
    			alert(i);
    		});
    	}
    	
    	$([1,5,3,4,2]).each(function(i, n) { 
    		$('<button>).html('b-' + i)
    		.appendTo('body').click(function(event){ 
    			alert(i) ;
    		});
    	}) ;
    });

，在页面加载后，点击按钮"a-2"和按钮"b-2”分别会提示的值是( C )  
A. 2, 2 B. 2, 5 C. 5, 2 D. 5, 5

9、属于css3选择器的有:( bcd )  
A :first  
B :before  
C :empty  
D :not()

10、下面代码的输出结果是什么( A )

var i,j,k;
    for(i=0,j=0;i<10,j<6;i++,j++){ 
    	k= i+j;
    }
    console.log(k);

A.10 B.12 C.18 D. Undefined

11、以下代码，alert值是多少? ( 24 )

window.val = 1;
    var json = { 
    	val: 10,
    	dbl: function() { 
    		this.val*= 2;
    	}
    };
    json.dbl();
    var dbl = json.dbl;
    dbl();
    json.dbl.call(window);
    alert(window.val + json.val);

12、 以下代码， 输出结果是什么？（ Goodbye Jack ）

13、写出以下代码的输出结果

console.log('one');
    setTimeout(function(){ 
    	console.log('two');
    },0);
    console.log('three');

答案：  
one  
three  
two

14、写出以下代码的输出结果

for(var i = 0;i < 10; ++i){ 
    	setTimeout(function(){ 
    		console.log(i);
    	},0)
    }

答案： 10个10

15、现有如下代码

16、请尝试写出实现下图页面布局的CSS  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQyOTY3_size_16_color_FFFFFF_t_70 1]  
重要提示：  
这是一个满页面应用，不管浏览器窗口多大或多小，都要保持全部内容充满整个浏览器窗口

**参考链接地址：**[https://blog.csdn.net/qq\_32442967/article/details/99675597][https_blog.csdn.net_qq_32442967_article_details_99675597]

17、 实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number、 String、0bject、Array、Boolean) 进行值复制。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQyOTY3_size_16_color_FFFFFF_t_70]: /images/20211023/78ed385fbdae46f38cc9783c186d8f8f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQyOTY3_size_16_color_FFFFFF_t_70 1]: /images/20211023/e682d4fda2de42b68f45ba20497683a5.png
[https_blog.csdn.net_qq_32442967_article_details_99675597]: https://blog.csdn.net/qq_32442967/article/details/99675597