前端面试题总结

HTML、CSS部分
1.rem布局的优缺点
rem是相对单位，如果子元素设置rem单位的属性，通过更改html元素字体大小，就可以让子元素实际大小发生改变。rem作用于非根元素时，相对于根元素字体大小。rem作用于根元素字体大小时，相对于其初始字体大小（16px）。其实rem布局的本质是等比缩放，一般是基于宽度。
目前ie不支持rem布局。
数据量大：所有的图片盒子都需要我们给一个准确值才能保证不同机型的适配。

2.将一个div便为圆形，左边蓝色右边绿色。

div{
width:300px;
height:300px;
border-redius:150px;
background:linear-gradient(to right,blue 50% , green 50%)
}

3.css盒模型有哪些？
盒子模型是css布局的基石，它规定了网页元素如何显示以及元素之间的相互关系。
CSS定义所有元素都可以拥有像盒子一样的外形和平面空间，即都包含边框，边界，补白，内容区，这就是盒模型。
IE盒模型border-box（怪异盒模型）
W3C标准盒子模型content-box（标准盒子模型）
content-box：标准CSS模型，测量width和height只包括内容，不包括border，margin，padding。
padding-box：width和height包含padding，但是不包含margin和border。
border-box：width和height包含padding和border，但是不包含margin。

4.position的属性
position有五个属性：
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。脱离文档流
relative：生成相对定位的元素，相对于其正常位置进行定位。不脱离文档流
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。脱离文档流
static：默认值，没有定位。
inherit：元素继承父元素中position中的值。

5.如何让元素b垂直居中？

<div class="a">
    <div class="b"></div>
</div>

方法一

    .a{
        border: 1px red solid;
        width: 100px;
        height: 100px;
        position: relative;
    }
    .b{
        width: 30px;
        height: 30px;
        border: green solid 1px;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

方法二

.a{
    border: 1px red solid;
    width: 100px;
    height: 100px;
    position: relative;
}
.b{
    width: 30px;
    height: 30px;
    border: green solid 1px;
    margin: auto;
    top: 50%;
    left: 50%;
    position: absolute;
    margin-top: -15px;
    margin-left: -15px;
}

6.css3有哪些新特性？
RGBA和透明度：RGBA是RGB色彩模型的一个扩展。在本质上看是为设置的元素增加了一个alpha透明度通道。其RGB值分别对应红色、绿色、蓝色。而alpha则取0-1。
background：background-image设置背景图像、background-origin：规定背景图片的定位区域、background-size：规定背景图片的尺寸、background-repeat：设置是否重复及如何重复。
word-wrap：word-wrap属性允许长单词或URL地址换行到下一行。
text-shadow：向文本设置阴影。
font-fact：定义自己的字体。
border-radius：设置边框。
border-image：将图片规定为包围div元素的边框。
box-shadow：像框添加一个或多个阴影。
媒体查询：媒体查询定义多套css，当浏览器尺寸变化时候会采取不同的属性。

7.display有哪些属性？
none：隐藏对象。
inline：指定对象为内联元素。
block：指定对象为块元素。
list-item：指定对象为列表项目。
inline-block：指定对象为内联块元素。
table：指定对象为块元素级表格。
inline-table：指定对象为内联元素级表格。
table-caption：指定对象为表格标题。
table-cell：指定对象作为表格单元格。
table-row：指定对象作为表格行。
table-row-group：指定对象作为表格行组。
table-column：指定镀锡作为表格列。
flexbox：将对象作为弹性盒子。（过渡版本）
inlie-flexbox：将对象作为内联块级弹性盒子。（过渡版本）
flex：将对象作为弹性盒子。（最新版本）
inline-flex：将对象作为内联块级弹性盒子。（最新版本）
8.CSS样式覆盖规则
由于继承而发生样式冲突问题，最近祖先优先。
继承的样式和直接指定的样式冲突时，直接指定样式优先。
直接指定样式冲突时，权重值高者优先。
样式权重相同时，后者优先。
!important样式属性不会被覆盖。

8.em与rem的区别。
em和rem单位之间的区别是浏览器根据谁来转化成px值。em相对于父元素，会产生继承，默认1em=16px像素值将是em值乘以使用em单位的元素的字体大小。rem相对于根元素即html元素的字体大小，根元素字体大小乘以rem值。rem提供唯一尺寸而不是继承。

JS部分
前端开发面试题
ES6有哪些新特性？
1.箭头函数
2.对类class的支持
3.不定参数…x，在定义方法时候使用
4.let和const关键字
5.for of循环
6.模块支持import
7.promise异步
8.解构赋值

AMD规范的使用及原理
1.实现js文件的异步加载，避免文件失去响应
2.管理模块之间的依赖性，便于代码的维护和编写。