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

面试官上来就问了一些比较简单的问题（除了自我介绍和项目经历）
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等于左右板块的宽度，在通过相对定位把左右板块往两边拉如：

    
middle
    
left
    
right


.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的状态码