前端面试题第一篇

1、行内元素有哪些？块级元素有哪些？空元素有哪些？

·行内元素：

<span>、<a>、<br>、<strong>、<img>、<sup>、<sub>、<i>、<em>、<del>、<u>、<textarea>、<select>、<input>、<button>、<lable>、<map>、<bdo>、<code>、<abbr>、<small>、<big>、<b>

·块级元素：

<div>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<ul>、<li>、<ol>、<dl>、<dt>、<dd>、<address>、<article>、<aside>、<audio>、<blockquote>、<canvas>、<footer>、<form>、<header>、<hr>、<noscript>、<output>、<p>、<pre>、<section>、<table>、<tfoot>、<video>。

·空元素：br、hr、img、input、link、meta。

2、不使用border画出1px高的线，在不同浏览器下的Quirksmode和csscompat模式下都能保持一致。

<div style=”width:1px;overflow:hidden;background:red”></div>

3、列出隐藏元素的方法。

·visibility:hidden;这个属性只是简单的隐藏某个元素，但是元素占用的空间位置依然存在。
·opacity:0;css3属性，设置0可以使一个元素完全透明。
·position:absolute;设置一个很大的left负值定位，使元素定位在可见区域之外。
·display:none;元素会变得不可见，并且不会占用文档的空间。
·transform:scale(0);将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留。
·<div hidden="hidden"></div>html5属性，效果和display:none;相同，但这个属性用于记录一个元素的状态。
·height:0;将元素高度设置为0，并且消除边框。
·filter:blur(0);css3属性，将一个元素的模糊度设置为0，从而使这个元素消失。

4、解释一些盒模型，如何解决浏览器兼容性问题。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距margin、边框border、填充padding、和实际内容content。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

解决方法：添加一个无width定义的wrapper层，把原来的一个content层拆分成2个层，在wrapper中定义padding和border-width，然后在content中定义width：

5、css选择器有哪些？哪些属性可以继承？优先级算法如何计算？内联和import哪个级别更高？

·通配符选择器*、类选择器.、id选择器#、标签选择器、属性选择器、后代选择器div p、子选择器 div>p、群组选择器div,p、伪类选择器:link,:hover,:active,:visited、伪元素选择器:before,:after。

·所有元素可继承的属性：visibility和cursor

块级元素可以继承的属性：text-indent和text-align

 

内联元素可以继承的属性：color、font、font-family、font-size、font-style、font-variant、font-weight、letter-spacing、word-spacing、white-space、line-height、text-decoration、text-transform、direction。

·优先级为!important > [ id > class > tag ]

·!Important 比 内联优先级高

6、JavaScript中有哪些数据类型？

number、string、null、undefined、object、boolean

7、设置一个已知ID为div和html内容为XXX，字体颜色为红色？（使用原生js实现。）

·document.getElementById('ID').style.color = 'red';

8、一个数组[5,2,5,9,7,2,4,6,5],用js去重，输出结果为[5,2,9,7,4,6]。

<script>
var arr1 = [5, 2, 5, 9, 7, 4, 6, 2, 5];
console.log(arr1.sort());//将数组按照字母顺序（注意不是从小到大）小到大排序
console.log(new Set(arr1));//将数组去重
var arr2 = [];
for (var i = 0; i < arr1.length; i++) {
if (arr2.indexOf(arr1[i]) == -1) {
arr2.push(arr1[i]);
}
}
console.log(arr2);//将数组进去重。
</script>

9、

<script>
var a;
console.log(typeof a);//输出undefined，参考高级程序设计：如果这个值没有定义。
console.log(typeof b);//输出undefined，参考高程这本书：对于没初始化的变量和没有声明的变量执行typeof都会返回undefined
a=null;
console.log(typeof a);//输出object，参考高程：如果这个值是对象或者null。
</script>

10、数组方法split()和join()的区别？

join() 方法用于把数组中的所有元素转换一个字符串。参数1可选，指定要使用的分隔符；如果省略该参数，则使用逗号作为分隔符。

split() 方法用于把一个字符串分割成字符串数组。
 如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。
参数1可选。字符串或正则表达式，从该参数指定的地方分割 string Object。参数2可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。
如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。
返回值是一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 string Object 分割成子串创建的。返回的数组中的字串不包括 separator 自身。

11、用jQuery的ajax如何向服务器端发送json数据？

<script>
$.ajax({
type: "POST",
url: "saveReceipt.do",
data: JSON.stringify(object),//将对象序列化成JSON字符串
dataType:"json",
contentType : 'application/json;charset=utf-8', //设置请求头信息(必须)
success: function(data){
alert(data);
},
error: function(res){
alert("系统错误,保存失败!");
}
});
</script>

12、如下场景输出什么？

<script>
function People() {
this.name = 'I am people';
}
People.prototype.getName = function () {
return this.name;
}
function Student() {
this.name = 'I am student';
}
Student.prototype = new People();
var student = new Student();
student.name = '小明';
console.log(student.getName());、//输出小明
</script>

13、说出你对事件冒泡和事件捕获的理解，两者的差距？

·事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。

·事件冒泡是自下而上的去触发事件。