java面试之前端部分（面试必看）

面试是进入一家公司的门槛，每一个求职者都需要经历，但是最苦逼最头疼的就是面试题，前端部分在面试的时候也会有涉及，所以我帮大家整理了一些前端部分的面试题以及可能遇到的问题，希望对你们有所帮助。如有不足，还望见谅。整理不易，感谢支持！

1.块元素和行内元素的区别？

块级元素会独占一行，其宽度自动填满其父元素宽度。例如：div

行内元素不会独占一行，相邻的行内元素会排列到同一行里，直到一行排不下，才会换行，其宽度随元素的内容变化而变化。例如：span

2.常见的表单元素有哪些？H5新增了哪些表单元素？

常见的表单元素：
文本框text、密码框password、单选按钮radio、下拉列表框、复选框checkbox、提交按钮submit、重置按钮reset、文本域textarea、文件域file、隐藏域hidden
H5新增：
邮箱Email、数字number、网址URL、滑块range、搜索search、日期date
扩展补充：关于下拉框一些知识点。
①.如果数据属于常识类，可以将option中的值写死在页面上，例如月份。
②.如果数据值不确定的，下拉框的值的数据往往来源于字典表中的数据。
③.有些数据存在大类—》小类的情况。
例如：省—》市—》县区，这时候再使用下拉框时，下拉框之间存在联动的情况，可以借助Ajax技术来实现。

3.为什么要进行表单验证？H5新增了哪些关于验证的特性？

A.减轻服务器的压力，表单验证是运行在客户端的，本来是运行在服务器端的，现在将它分给客户端运行，就减轻了服务器的压力。
B.保证数据的可行性和安全性，避免不合法的数据存到数据库中。

新增的验证特性：
placehoder框内提示、required必填项、pattern正则验证

4.CSS样式优先级是什么？

行内样式 > 内部样式 > 外部样式

5.CSS基本选择器的优先级是什么？

ID选择器 > 类选择器 > 标签选择器
在使用类选择器时，可以组合使用，元素class属性值之间用空格分开。
另：结构伪类选择器注意点
E F:nth-child(n)在父级里面从第1个元素开始查找，不分类型;
E F:nth-of-type(n)在父级里面先看类型，再看位置。

6.你对盒子模型的理解？

盒子模型：margin(外边距)，border(边框)，padding(内边距)，content(内容)。分为content-box和border-box。其中默认值为content-box。

content-box： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )
此属性表现为标准模式下的盒模型。

border-box： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
此属性表现为怪异模式下的盒模型。

说明：

标准盒模型代码与图示例:
.test1{
box-sizing:content-box;
width:200px;
padding:10px;
border:15px solid #eee;
}

怪异盒模型代码与图示例:
.test1{
box-sizing:b