一. 简答题
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的选择符
- ID选择器
#ID值 {} - 类选择器
.类名 {} - 标签/元素选择器
标签名 {} - 伪类选择器
选择器:nth-child(n) {} - 超链接伪类选择器
:link:visited:hover:active - 后代选择器
选择器1 选择器2 {} - 子选择器
选择器1>选择器2 {} - 通配符选择器
* {} - 分组选择器
选择器1,选择器2 {} - 属性选择器
- ID选择器
可以继承的属性
|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是引入，页面必不可少的部分，通常会是页面上显示的内容，例如：imgiframe等。 -
href是引用，与页面有关联，通常不在页面上显示，例如：alink等。
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;
}
