前端面试题（未完待续）

 第一部分-------------html,css js基础

1.让一个不定宽高的div，水平垂直居中

1.使用flex：在父盒子中设置

display:flex;
justify-content:center;
align-items:center;

2.使用css3 transform：

父盒子设置：

position：relative

子盒子设置：

transform:translate(-50%,-50%);
position:absolute;
top:50%;
left:50%;

3.已知父元素有高度且只有一个子元素，设置：

position:absolute;
margin:auto;
top:0;
left:0;
bottom:0;
right:0;

2.px,em,rem三者的区别？

px：像素（Pixel）。绝对单位，像素px是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI。

em:是相对长度单位，相对于当前对象内文本的字体大小，如当前对行内文本的字体尺寸未被人设置，则相对于浏览器的默认字体大小，它会继承父级元素的字体大小，因此并不是一个固定的值。

rem：是css3中新增的一个相对单位，（root em，根em），使用rem为元素设定字体大小时，仍然是相对大小，但相对的是HTML根元素。

区别：IE无法调整那些使用px作为单位的字体大小，而em和rem可以缩放，rem相对的只是HTMl的根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体的大小，又可以避免字体大小逐层复合的连锁反应，目前，除了IE8及更早的版本外，所有浏览器已支持rem。

3.css引入方式有哪些？link和@import的区别是？

引入方式：内联，内嵌，外链，导入

区别:同时加载，前者无兼容性，后者css2.1以下的浏览器不支持，link支持使用JavaScript改变样式，后者不可。

4.div+css的布局较table布局有什么优点？

1.改版的时候更方便，只要更改css文件

2.页面加载速度更快，结构化清晰，页面显示简洁。

3.表现与结构相分离。

4.易于优化（seo）搜索引擎更友好，排名更容易靠前。

5.描述css reset的作用和用途？

Reset重置浏览器的css默认属性，浏览器的品种不同，样式不同，然后重置，让他们统一。

6.解释css sprites，如何使用？

css精灵图，把一堆小的图片，整合到一张大的图片（png）上，减轻服务器对图片的请求数量。

7.简述src和herf的区别

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

src是source的缩写，指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在位置，在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

<script scr="indes.js"></script>

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于将所指向资源嵌入当前标签内，这也为什么将js脚本放在底部而不是头部。

href是Hypertext Referencede 缩写，指向网络资源所在的位置，建立和当前元素（锚点）或当前文档（链接）直接的链接，如果我们在文档中添加

<link href="index.css" rel="stylesheet"/>

那么浏览器会识别该文档为css文件，就回并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link的方式来加载css，而不是使用@import。

8.vue 如何实现按需加载配合 webpack 设置

webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import 这样的方式引入，改为const定义的方式进行引入。

页面不按需加载引入方式：import home from '../../common/home.vue'

页面按需加载引入方式：

const home = r => require.ensure( [], () => r (require('../../common/home.vue')))