前端面试题总结

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值