前端H5面试题（vue为主）

一.src和href的区别 ？

  src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。

常用场景：

<img src="img/girl.jpg"></img> 
<iframe src="top.html"> 
<script src="show.js"> 

  href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系

常用场景：

> <a href="http://www.baidu.com"></a>  <link type="text/css"
> rel="stylesheet" href="header.css">

src用于替换当前元素， href 用于在当前文档和引用资源之间确立联系。
1、请求资源类型不同
2、 浏览器解析方式不同
3、作用结果不同

请求数据类型不同
href表示超文本引用,用来建立当前元素和文档的链接.常用的有:link,a
在src资源时会将其指向的资源下载并应用到文档中,常用的有srcipt,img
作用结果不同
href用于在当前文档和引用资源之间确立联系> src用于替换当前内容
浏览器解析方式不同
在文档中添加href,浏览器会识别该文档为css文件,会下载资源并不会停止对当前文档的处理,
当浏览器解析到src会暂停其他资源的下载和处理,直到将该资源加载,编译,执行完毕,图片框架也如此,类似于将所有指向资源应用到当前内容

二.页面元素隐藏方式 和各自特点？

  第一种：display属性为none，效果：元素不显示，不占位  
  	就是说元素设置了display:none;属性时，元素不会再占用页面的位置，之前占用的位置会被其他元素占用。会导致页面重新排序。   	

  第二种：设置css  visibility属性为hidden，效果：元素不显示，但占位
  	 当元素设置看visibility:hidden;属性时，虽然能隐藏元素，但是元素仍然占位，页面不会再重新排序 

 	第三种：设置元素透明度opacity属性为0，也可以隐藏元素,占位  
  		这个方法和visibility类似，会隐藏元素但是会占位

三.用过哪些盒模型，以及他们各自的区别？

1.W3C盒子模型 box-sizing: content-box
2.IE盒子模型 box-sizing: border-box
3.flex布局

主要区别：对于宽高的定义不同 w3c盒模型：设置的宽度就等于内容的宽度 怪异盒模型：内容的宽度 = 设置的宽度 - border的宽度
-padding的宽度

flex布局的优点：布局灵活，代码简洁，实现复杂布局和自适应布局时比较高效，而且以后代码的可维护性也比较强。

缺点：以往很多人说兼容性不好，但是现如今IE10以下的浏览器市场占有率越来越低，兼容性这块已经不用担忧了。浏览器支持列表如下。偏要说一个缺点，应该就是前端又得学习一个新的布局方式了吧，:
) 。

flex与传统的布局：
弹性盒布局是css3中新增加的一种页面布局方式，是一种很灵活的页面布局方式。当页面需要适应不同大小的屏幕和各类设备时，可以确保各元素的布局能随之自动调节，而不至于出现页面变形。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性盒由容器、子元素、和轴组成，并且默认情况下，子元素的排布方向与横轴的方向一致。弹性盒改进了块模块，弹性盒布局中的子元素通常都在一行内显示，并且默认情况下每个容器都只有一行。既不使用浮动，也不会在弹性盒容器与其内容之间合并外边距。
弹性盒布局与传统布局相比的优势：
传统的布局基于盒子模型，依赖display,position,float等属性。对于一些特殊的布局实现起来很不方便，比如垂直居中等。不管浏览器的窗口怎么变化都是按html语义标签的排列进行布局。
Flex可以用比较简单的方式实现一些特殊的布局，可以轻松地创建响应式网页布局，为盒状模型增加灵活性，是一种非常灵活的布局方法。弹性盒布局与方向无关，并且随着浏览器尺寸的变化，容器内的元素可以随之自动调整。

四.谈谈你的移动端适配方案有哪些？

（1）通过媒体查询的方式即CSS3的meida queries
（2）以天猫首页为代表的 flex 弹性布局
（3）以淘宝首页为代表的 rem+viewport缩放
（4）rem 方式

五.js 数据类型有几种？它们之间的区别是什么？

两种 基本数据类型和引用数据类型