前端基础面试题，菜鸟必备

HTML+CSS部分
1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素?
行内元素：和有他元素都在一行上，高度、行高及外边距和内边距都不可改变，文字图片的宽度不可改变，只能容纳文本或者其他行内元素；其中img是行元素
块级元素：总是在新行上开始，高度、行高及外边距和内边距都可控制，可以容纳内敛元素和其他元素；
行元素转换为块级元素方式：display：block；
2.将多个元素设置为同一行?清除浮动有几种方式?
将多个元素设置为同一行：float，inline-block
清除浮动的方式：方法一：添加新的元素 、应用 clear：both；
  方法二：父级div定义 overflow: hidden；
方法三：利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。
.clear{zoom:1;}
.clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
3.怪异盒模型box-sizing？弹性盒模型|盒布局?
在标准模式下的盒模型：盒子总宽度/高度=width/height+padding+border+margin
在怪异模式下的盒模型下，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
box-sizing有两个值一个是content-box，另一个是border-box。
当设置为box-sizing:content-box时，将采用标准模式解析计算；
当设置为box-sizing:border-box时，将采用怪异模式解析计算。
4.简述几个css hack?
（1）图片间隙 
在div中插入图片，图片会将div下方撑大3px。hack1：将<div>与<img>写在同一行。hack2：给<img>添加display：block；
dt  li 中的图片间隙。hack：给<img>添加display：block；
（2）默认高度，IE6以下版本中，部分块元素，拥有默认高度（低于18px）
hack1：给元素添加：font-size：0；
hack2：声明：overflow：hidden；
表单行高不一致
hack1：给表单添加声明：float：left；height： ；border： 0；
鼠标指针
hack：若统一某一元素鼠标指针为手型：cursor：pointer；
当li内的a转化块元素时，给a设置float，IE里面会出现阶梯状
hack1：给a加display：inline-block；
hack2：给li加float：left；博银财富

7.href和src区别?title和alt
    href (Hypertext Reference)指定网络资源的位置（超文本引用），从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系，在 link和a 等元素上使用。
    src (Source)属性仅仅嵌入当前资源到当前文档元素定义的位置，是页面必不可少的一部分，是引入。在 img、script、iframe 等元素上使用。
  title：既是html标签，又是html属性，title作为属性时，用来为元素提供额外说明信息.
   alt：alt是html标签的属性，alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息.
8.transform？animation？区别?animation-duration
         Transform:它和width、left一样，定义了元素很多静态样式实现变形、旋转、缩放、移位及透视等功能，通过一系列功能的组合我们可以实现很炫酷的静态效果（非动画)。 
    Animation:作用于元素本身而不是样式属性,属于关键帧动画的范畴，它本身被用来替代一些纯粹表现的javascript代码而实现动画,可以通过keyframe显式控制当前帧的属性值.
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
9.nth-of-type | nth-child?
举例说明：
<ul>
<p>111</p>
<span>222<span>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
li:nth-of-type(2):表示ul下的第二个li元素 
li:nth-child(2)：表示既是li元素又是在ul下的第二个元素（找不到）。
建议一般使用nth-of-type，不容易出问题。
10 .:before 和 ::before 区别?
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。
11.如何让一个div 上下左右居中?
答：有三种方法。
方法1：
.div1{
         width:400px;
         height:400px;
         border:#CCC 1px solid;
         background:#99f;
         position:absolute;
         left:50%;
         top:50%;
         transform: translate(-50%,-50%);
}                        
<div class="div1"></div>
方法2：
.div2{
    width:400px;
    height:400px;
    border:#CCC 1px solid;
    background:#99f;
    position: absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
<div class="div2"></div>
方法3：
.div3{
    width:400px;
    height:400px;
    border:#CCC 1px solid;
    background:#9f9;
    position: absolute;
    left: 50%;
    top:50%;
    margin-left:-200px;
    margin-top: -200px;        
}
<div class="div3"></div>
12.css2.0 和css3.0
答：css3加强了css2的功能，增加了新的属性和新的标签，并且删除了一些冗余的标签，在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了（columns之类的属性）。在效果方面加入了更多的效果(圆角，动画之类的)，还有在盒子模型和列表模块都进行了改进。不过CSS3兼容性不好，只有一些高级版本的浏览器支持。
13.弹性盒子模型?flex|box区别?
答：（1）引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
（2）flex和box的区别:
display：box 是老规范，要兼顾古董机子就加上它；
父级元素有display:box;属性之后。他的子元素里面加上box-flex属性。可以让子元素按照父元素的宽度进行一定比例的分占空间。
flex是最新的，董机老机子不支持的；
父元素设置display:flex后，子元素宽度会随父元素宽度的改变而改变，而display:box不会。
Android UC浏览器只支持display: box语法；而iOS UC浏览器则支持两种方式。

14.viewport 所有属性 ？
答： (1)width :设置layout viewport的宽度，为一个正整数，或字符串'device-width';
     (2)initial-scale:设置页面的初始缩放值，为一个数字，可以带小数。
     (3)minimum-scale:允许用户的最小缩放值，为一个数字，可以带小数。
     (4)maximum-scale:允许用户的最大缩放值，为一个数字，可以带小数。
     (5)height:设置layout viewport的高度，这个属性对我们并不重要，很少使用
     (6)user-scalable:是否允许用户进行缩放，值为‘no’或者‘yes’。
     安卓中还支持：target-densitydpi，表示目标设备的密度等级，作用是决定css中的1px代表多少物理像素
     (7)target-densitydpi:值可以为一个数值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个
15. 如何理解HTML结构的语义化？
所谓标签语义化，就是指标签的含义。语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，对搜索引擎友好，有了良好的结构和语义我们的网页内容便自然容易被搜索引擎抓取，这种符合搜索引擎收索规则的做法，网站的推广便可以省下不少的功夫，而且可维护性更高，因为结构清晰,十分易于阅读。这也是搜索引擎优化SEO重要的一步。
16. 伪类选择器和伪元素？c3中引入的伪类选择器有？c3中伪元素有?
伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
伪类选择器：
由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。
伪元素选择器：
并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器；
c3中引入的伪类选择器：
:root()选择器，根选择器，匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。:root选择器等同于<html>元素。
:not()选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。
:empty()选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
:target()选择器来对页面某个target元素(该元素的id被当做页面中的超链接来使用)指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。
:first-child()选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。
:nth-child()选择某个元素的一个或多个特定的子元素。
:nth-last-child()从某父元素的最后一个子元素开始计算，来选择特定的元素
:nth-of-type(n)选择器和:nth-child(n)选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。
:only-child表示的是一个元素是它的父元素的唯一一个子元素。
:first-line为某个元素的第一行文字使用样式。
:first-letter 为某个元素中的文字的首字母或第一个字使用样式。
:before  在某个元素之前插入一些内容。
:after  在某个元素之后插入一些内容。 
c3中伪元素：
::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动
::selection用来改变浏览网页选中文的默认效果
17、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
* HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。 
* 拖拽释放(Drag and drop) API 
语义化更好的内容标签（header,nav,footer,aside,article,section） 
音频、视频API(audio,video)
画布(Canvas) API 
地理(Geolocation) API 
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；         sessionStorage 的数据在浏览器关闭后自动删除 
表单控件，calendar、date、time、email、url、search 
新的技术webworker, websocket, Geolocation