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.管理模块之间的依赖性,便于代码的维护和编写。