小菜鸟最近在找实习，所以有备无患，准备一些前端面试题给自己一些底气，都是从其他大神那里整理而来。
1、HTML和XHTML的区别。
XHTML 是基于XML的 HTML， 作用与HTML相同，确定文档结构的markup规则与XML相同。但是XHTML比HTML的书写方面更加严格。
2、关于语义化HTML
根据语义来选择相应的合适的标签，而不是仅仅为了实现某一个功能去使用这个标签，比如你想要放大字体，使用h1的标签仅仅是达到了字体放大的效果却不是为了语义使用的，根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
3、关于DOCTYPE
doctype声明在文档中的最前面，处于<html>标签之前。告知浏览器以何种模式来渲染文档。用来告知浏览器用什么文档标准来解析这个文档。而当DOCTYPE不存在或者书写不正确时会导致文档以兼容模式呈现。兼容模式中，页面要求比较宽松，会向后兼容。如果文档包括形式完整的DOCTYPE，那么将以标准模式来呈现。标准模式的排版会以浏览器支持的最高标准来运行。
而doctype文档类型在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html>
4、行内元素和块级元素的区别
行内元素是跟相邻的行内元素在同一行，不会自动换行，他的高度宽度和内边距的高度外边距的高度都是不可以设置改变。
块级元素自动换行从下一行开始，而且是独占一行，他的高度宽度边距都可以设置改变。
5、浏览器渲染过程
浏览器从服务器接收到html文档，对文档进行解析构造渲染，首先生成DOM树，将文档中的节点构建成一颗树，接下来构造渲染树，将对各个节点的渲染元素渲染效果计算出来构造成一棵渲染树，最后计算出布局树，然后将DOM树和渲染树还有布局树进行结合绘制出render树展现在页面上。
6、三栏布局，两边固定，中间自适应。
一、圣杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现三栏水平布局之圣杯布局</title>
<style type="text/css">
.container {
padding: 0 300px 0 200px;
}
.left, .main, .right {
position: relative;
min-height: 130px;
float: left;
}
.left {
left: -200px;
margin-left: -100%;
background: green;
width: 200px;
}
.right {
right: -300px;
margin-left: -300px;
background-color: red;
width: 300px;
}
.main {
background-color: blue;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
二、双飞翼布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现三栏水平布局之双飞翼布局</title>
<style type="text/css">
.left, .main, .right {
float: left;
min-height: 130px;
text-align: center;
}
.left {
margin-left: -100%;
background: green;
width: 200px;
}
.right {
margin-left: -300px;
background-color: red;
width: 300px;
}
.main {
background-color: blue;
width: 100%;
}
.content{
margin: 0 300px 0 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<div class="content">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
三、flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现三栏水平布局之Flex布局</title>
<style type="text/css">
.container{
display: flex;
min-height: 130px;
}
.main{
flex-grow: 1;
background-color: blue;
}
.left{
order: -1;
flex-basis: 200px;
background-color: green;
}
.right{
flex-basis: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
四、绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现三栏水平布局之绝对定位布局</title>
<style type="text/css">
.container{
position: relative;
}
.main,.right,.left{
top: 0;
height: 130px;
}
.main{
margin: 0 300px 0 200px;
background-color: blue;
}
.right{
position: absolute;
width: 300px;
right: 0;
background-color: red;
}
.left{
position: absolute;
width: 200px;
background-color: green;
left: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
7、css sprites
css sprites是一种网页图片处理方式，将网页所需要的图片都整合到一张图片上面，然后通过background-image,background-repeat,background-position来对图片进行定位和显示要求。
优点：多张图片整合到一起减少了http请求，减少了请求头的字节数，命名更加方便，
缺点：需要精确的计算每个图片的排版位置，精确度需要非常的高，如果更改的图片和原图片差异比较大，则需要对于其他的图片进行更改。
8、盒模型
IE浏览器总宽度：margin+width(padding+border+content),在IE浏览器中width为padding+border+content总和。
标准盒子总宽度：margin+padding+border+content，在标准盒子中width为content的宽度。
9、HTML5新增的元素，移除的元素
新增：canvas，video,audio,header,nav,footer,aside,section,article,
移除的元素：frame，frameset
10、cookie、localstorage、sessionstorage
都是保存在浏览器端，都是同源的。
cookie是为了识别用户身份所存储在浏览器端的数据，在同源http请求中携带，在浏览器和服务端传递。存储数据很小，不超过4K,可以设置过期时间，在失效时间之前一直都有效。
localstorege是本地存储，存储时间长久，存储数量大，可以达到5M。
sessionstorege是会话存储，从一个会话打开到会话结束就失效。
11、选择器优先级
3、比较：先从第一个0开始比较，如果第一个0大，那么说明这个选择器的权重高，如果第一个相同，比较第二个，依次类推。
12、清除浮动
1、添加<div style="clear:both"></div>或者<br clear="all" />
2、给父级同时设置浮动
3、给父级设定高度（适用于布局中高度固定）
4、给父级元素设置overflow:hidden
13、absolute、relative、fixed
absolute:相对于父级元素，是绝对定位
relative:相对于普通文档流定位，相对定位。
fixed:相对于浏览器生产固定的元素，绝对元素。
14、css布局方式
1、table
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现三栏水平布局之绝对定位布局</title>
<link rel="stylesheet" type="text/css" href="css/test.css" />
</head>
<body>
<div class="container">
<table>
<tr>
<td class="left">左侧</td>
<td class="right">右侧</td>
</tr>
</table>
</div>
</body>
</html>
以下是test.css文件内容
*{
margin: 0;
padding: 0;
}
.left{
background-color: aqua;
width: 100px;
height: 200px;
}
.right{
background-color: antiquewhite;
width: 100px;
height:200px;
}
2、flex布局
*{ margin: 0; padding: 0; } .container{ display: flex; width: 200px; height: 200px; } #left{ background-color: aqua; flex: 1; } #right{ background-color: antiquewhite; flex: 1; } #middle{ flex: 1; background-color: bisque; }
3、float布局
父元素添加overflow:auto或者overflow:hidden
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/test.css" />
</head>
<body>
<div class="container">
<span class="left">float</span>
<span>中间</span>
<span class="right">float</span>
</div>
<div class="container" style="height: 200px;background: blue">
</div>
</body>
</html>
以下爱是test.css:
*{
margin: 0;
padding: 0;
}
.container{
width: 200px;
background-color:gold;
/* overflow: auto; */
overflow: hidden;
}
.left{
background-color: aqua;
float: left;
width: 50px;
height: 50px;
}
.right{
background-color: antiquewhite;
float: right;
width: 50px;
height: 50px;
}
通过给父级设置伪类：：after清除浮动
.container::after{ clear: both; content: ""; /* visibility: hidden; */ /* height: 0; */ display: block; }
4、响应式布局
标签<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
原文：https://www.cnblogs.com/tutuj/p/11037233.html