哔哩哔哩2020校园招聘前端笔试卷（一）答案解析

第一题：

同源策略：协议 http和https不同
域名 store.company.com和news.company.com不同
端口号：http默认 80/8080/3128/8081/9098

第二题：

domContentloaded：不用等框架图片等其他资源都加载完成就可以被触发
load：页面上所有的资源被加载以后才会触发load事件

第三题：

块级元素与行内元素的几个区别：
格式：默认情况下，块级元素会新起一行

A和D中的i标签和em标签：<i> 标签和基于内容的样式标签 <em> 类似。它告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示。属于行内元素。
C中的span属于行内元素。

第四题：

<div class="box box1 box2" style="color:#222">hello</div>, 
这个div里面最终的字体颜色是什么？
.box{
  color:#999;
}

.box{
  color:#333 !important;
}

.box2{
  color:#666
}

解析：
css样式优先级：
规则1：最近的祖先样式比其他祖先样式优先级高
规则2："直接样式"比"祖先样式"优先级高
规则三：优先级关系：内联样式（即行内样式style）> id选择器样式 > 类选择器样式 > 元素选择器样式（标签）
规则四：属性后有!important的属性拥有最高优先级

第五题：

解析：box-sizing是用于告诉浏览器如何计算一个元素的总宽度和总高度的。
盒子的四个组成区域相对应，每个盒子有四个边界：内容边界content edge、内边距边界padding edge、边框边界border edge、外边框边界margin edge。

• 标准盒模型 box-sizing：content-box
  content-box：width=content width
  height=content heigh
• IE盒模型 box-sizing：border-box
  border-box：
  width=border+padding+content width
  height=border+padding+content width

详情见box-sizing有哪些属性

第六题：

css伪类：用于向某些选择器添加特殊效果的。
伪类的语法：
例如：
<style type="text/css"> p:first-child i { color:blue; } </style>

第七题：

解析：从左到右看
1<2：true；true<3：true转换为1，所以是true
3<2：false；false<1：false转换为0，所以是true

第八题：

解析：

parseInt(string, radix)

string：表示要解析的字符串
radix：表示要解析的数字的基数（即进制）

['1', '2', '3'].map((item, index) => {
    return parseInt(item, index)
})
parseInt('1', 0) // 1  默认十进制的1
parseInt('2', 1) // NaN 1进制没有2（1进制只有1）
parseInt('3', 2) // NaN,2进制逢2进1
 
ps 啥是parseInt
parseInt('11',2) //二进制的11 转换成十进制应该是 3
ppppps
['10','10','10','10','10'].map(parseInt); // [10, NaN, 2, 3, 4]
意思是0(默认0是十进制)进制的十转换成十进制是多少 1进制的十转换成十进制是多少 二进制的10转换成十进制是多少

第九题：

解析：
js中/不是取整的除，可以带小数。
js中小数取整的函数：
1.丢弃小数部分,保留整数部分

js:parseInt(7/2)

2.向上取整,有小数就整数部分加1

js: Math.ceil(7/2)

3,四舍五入.
js: Math.round(7/2)

4,向下取整

js: Math.floor(7/2)

第十题：

解析：filter和find都是高阶函数，参数是传入一个函数。
A选项中>表示>，&amp表示&，就可以把A选项转换为箭头函数。

players.filter(x=>x.position==='TOP'&&x.team==='BLG')