700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 字节跳动校招提前批前端一面总结

字节跳动校招提前批前端一面总结

时间:2020-03-29 07:28:24

相关推荐

字节跳动校招提前批前端一面总结

面试官上来就问了一些比较简单的问题(除了自我介绍和项目经历)

1、块级元素和行内元素分别有哪些?

块级元素:address 、article、 aside、 audio、 video、 canvas、 div、 footer、 form、 h1、 h2、 h3、 h4、 h5、 h6、 header、 hr、 ul、 ol、 output、 p、 table等

行内元素:a、 img、 map、 span、 button、 input、 label、 select等

2、块级元素和行内元素的区别?

(1)行内元素会在一条直线上排列(默认宽度只与内容有关),都是同一行,水平方向排列。

块级元素各占据一行(默认宽度是他本身父容器的100%,与内容无关),垂直方向排列。块级元素从新行开始,结束接着一个断行。

(2)块级元素内可以包含行内元素,行内元素不能包含块级元素,只能包含文本或其他行内元素。

(3)块级元素和行内元素属性的不同,主要是盒模型属性上:行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效。

3、块级元素、行内元素的转换?

display:block;转换为块级

display:inline;转换为行内

4、行内元素如何设置宽高?

(1)display:block;

(2)display:inline-block;

(3)float:left;隐形的将行内元素进行了转化,相当于display:block;float:left;

5、js中如何判断数据的类型?

(1)typeof可以判断出7种:number、boolean、symbol、string、object、undefined、function等。对于null返回Null类型,function返回function类型。数组、日期、正则会返回object类型。

(2)instanceof用来判断A是否为B的实例,表达式为A instanceof B,如果A是B的实例,返回true,否则返回false。instanceof检测的是原型。只能判断两个对象是否属于实例关系,而不能判断一个对象实例具体属于那种类型。ES5提供了Array.isArray()方法来判断某个对象本身是否为Array类型。

(3)constructor(不会用)

(4)toString()是object的原型方法,调用该方法,默认返回当前对象的[[Class]]。这是一个内部属性其格式为[object xxx],其中xxx就是对象的类型。object对象,直接调用toString()就能返回[object,object]。而对于其他对象,则需要通过call/apply来调用才能返回正确的类型信息。

6、盒子模型

盒子模型分为W3C标准模型和IE盒模型,他包括:边距、边框、填充和实际内容(margin、border、padding、content)。

最终元素的总宽度:

W3C标准总宽度=content+margin(左右)+padding(左右)+border(左右)

IE标准总宽度=content+margin(左右) IE模型中的content包括border和padding

7、如何实现三列布局?

三列布局,一般指两端固定宽度,中间宽度自适应的布局方式。

(1)绝对定位absolute:中间版块不给宽度,通过左右绝对定位left和right实现自适应。

(2)两侧浮动+中间自动撑开,设置完宽度之后,左边float:left;右边float:right。中间自适应可以通过display:block;实现或者给左右固定宽度。

(3)圣杯布局通过三栏float和负margin达到并列效果,给最外层左右padding等于左右板块的宽度,在通过相对定位把左右板块往两边拉如:

<div class="container"><div class="middle">middle</div><div class="left">left</div><div class="right">right</div></div>.middle {width: 100%;height: 100%;background: blue;float: left;}.left {width: 100px;height: 100%;background: red;margin-left: -100%;float: left;}.right {width: 150px;height: 100%;background:yellow;margin-left: -150px;float: left;}

(4)比翼双飞布局通过内层加margin的方式,让内层元素刚好定位到露出位置。

(5)flex布局,父元素设置diaplay:flex;

(6)table布局,设置display:table-cell;

8、原型链

9、position的属性

10、http的七层模型

11、cookie和session,了解服务端的session吗

12、xss和跨站伪造攻击防御

13、http的请求方式:get、post、connect、put、delete、head等

14、get和post的区别

15:、http的状态码

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。