面试题(简答与编程)--参考答案

一. 简答题

1. 行内元素有哪些？块元素有哪些？CSS盒模型？

解析：这一个最基本的题目，不多言。

元素分类

|类型|元素|
|:-|
|行内元素|span a font i b u em strong|
|块元素|div h1~h6 p pre hr ul ol li dl table form |

CSS盒模型

CSS盒模型包含内容(content)、填充(padding)、边框(border)和边界(margin)。

盒模型

2. CSS引入的方式有哪些？`link`与`@import`的区别？

@import因为自身的严重缺点，已经完全不再使用了。这个问题只好做历史题记忆了。

CSS引入的方式

内联样式/行内式
标签属性style设定CSS样式。
内部样式表/内嵌式

<head>
  <style type="text/css">
  /* CSS代码 */
  </style>
</head>

外部样式表/链接式

<link href=""CSS文件路径" rel="stylesheet" type="text/css"/>

导入样式表/导入式[不推荐使用]

<style type="text/css">
@import "CSS文件路径"; 
</style>

或者

<style type="text/css">
@import url("CSS文件路径"); 
</style>

link与@import的区别

link写在head中，页面加载同时加载CSS文件；@import在网页加载完后再装载CSS文件。@import当网页比较大时，出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。
link支持使用Javascript控制DOM去改变样式；而@import不支持，比如更换网页主题(皮肤)。
link不止加载CSS文件，也可以加载其他文件，比如页面标题前的小图标；而@import只能用于加载CSS文件。

3. CSS的选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和`important`哪个优先级高？

选择器有很多种类，不在于完全答出来，五六种即可。important是个双刃剑，虽然会获取最高优先级，缺点在于使用中会带来各种麻烦，例如，js改变CSS会不起作用。

CSS的选择符
1. ID选择器#ID值 {}
2. 类选择器.类名 {}
3. 标签/元素选择器标签名 {}
4. 伪类选择器选择器:nth-child(n) {}
5. 超链接伪类选择器 :link :visited :hover :active
6. 后代选择器选择器1 选择器2 {}
7. 子选择器选择器1>选择器2 {}
8. 通配符选择器* {}
9. 分组选择器选择器1,选择器2 {}
10. 属性选择器
可以继承的属性

|No.|分类|属性|
|:-:|
|1|所有元素(2个)|cursor visibility|
|2|列表(4个)|list-style list-style-type list-style-position list-style-image|
|3|表格(2个)|border-collapse border-spacing|
|4|块级(2个)|text-align text-indent|
|5|内联(3类14个)|字体(8个)font color font-family font-style font-weight font-size line-height font-variant 空白(3个)letter-spacing word-spacing white-space 文本(3个) text-decoration text-transform direction|

优先级
- 权重原则：important > 内联样式 > ID选择器 > 类选择器 > 标签选择器 = 伪类 = 属性选择器 > 伪对象 > 继承 > 通配符
- 就近原则：内联样式 > 内部样式表 > 外部样式表
important的优先级高于内联

4. 前端页面有那三层构成，分别是什么？作用是什么？

基础问题不多言。

三层	作用
HTML	结构
CSS	表示
Javascript	行为

5. CSS的基本语句构成是？

基础问题不多言。

选择器 {
    属性1:值1;
    属性2:值2;
    ……
}

6. 你做过的页面在哪些浏览器测试过？这些浏览器的内核分别是什么？

这是把前端做为英语考试的节奏，无他法唯死记。

浏览器	内核
IE	Trident
Edge	edge
Chrome	早期是Webkit,最新是Blink
Safari	Webkit
FireFox	Gecko
Opera	最早是Presto,后来是Webkit,最新是Blink

7. 标签上`title`与`alt`属性的区别是什么？

基础问题不多言。

alt属性是给SEO和屏幕阅读器提供图片信息，在图片不能加载时在页面显示的提示信息
title属性是鼠标悬停在图片上时显示一个小提示

8. 清除浮动的几种方式，各自的优缺点

其实方法很多，可自行Baidu，下面是最常用最基本的用法。

从父标签中出来/撑不开父标签，给父标签加上overflow:auto;zoom:1;
优点：简单，代码少，浏览器支持好
缺点：不能和position配合使用
把后续的同级标签覆盖，给后续的同级标签加上clear:both;
优点：简单，代码少，浏览器支持好
缺点：有时需要增加很空div

9. 简述一下`src`与`href`的区别

src是引入，页面必不可少的部分，通常会是页面上显示的内容，例如：img iframe等。
href是引用，与页面有关联，通常不在页面上显示，例如：a link等。

10. `px`和`em`的区别

基础问题不多言。

px相对于显示器屏幕分辨率。
em相对于当前对象内文本的字体尺寸。

11. 添加删除替换插入到某个节点的方法？

基础问题不多言。

操作	Javascript方法	JQuery方法
添加	`appendChild()`	`append()` `appendTo()` `prepend()` `prependTo`
删除	`deleteChild()`	`remove()` `empty()`
替换	`replaceChild()`	`replaceWith()` `replaceAll()`
插入	`insertBefore()`	`before()` `insertBefore()` `after()` `insertAfter()`

二. 编程题

1. 编写一个数组去重的方法。

基础问题不多言。

function uniqueArray(arr){
// 存放结果
var res = [];
for(var i in arr){// 遍历数组元素
 if(res.indexOf(arr[i]) == -1){// 如果结果数组不存在该元素则保存
    res.push(arr[i]);
 }
}
// 返回去重后的数组
return res;
}
// 测试
uniqueArray([1,4,6,7,9,6,4,5]);

2. CSS实现`div`垂直水平居中。

实现方式有很多种，下面方式最简单。

绝对定位实现div垂直水平居中

div{
  width:宽度;
  height:高度;
  margin:auto;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

面试题(简答与编程)--参考答案

一. 简答题

1. 行内元素有哪些？块元素有哪些？CSS盒模型？

2. CSS引入的方式有哪些？link与@import的区别？

3. CSS的选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？

4. 前端页面有那三层构成，分别是什么？作用是什么？

5. CSS的基本语句构成是？

6. 你做过的页面在哪些浏览器测试过？这些浏览器的内核分别是什么？

7. 标签上title与alt属性的区别是什么？

8. 清除浮动的几种方式，各自的优缺点

9. 简述一下src与href的区别

10. px和em的区别

11. 添加 删除 替换 插入到某个节点的方法？

二. 编程题

1. 编写一个数组去重的方法。

2. CSS实现div垂直水平居中。

推荐阅读更多精彩内容

2. CSS引入的方式有哪些？`link`与`@import`的区别？

3. CSS的选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和`important`哪个优先级高？

7. 标签上`title`与`alt`属性的区别是什么？

9. 简述一下`src`与`href`的区别

10. `px`和`em`的区别

11. 添加删除替换插入到某个节点的方法？

2. CSS实现`div`垂直水平居中。