2019应届生入职公司前端摸底简答题笔试题目及答案

1、display的属性/效果

 

none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

2、position的属性/效果

 

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
sticky	粘性定位，该定位基于用户滚动的位置。 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。 注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
inherit	规定应该从父元素继承 position 属性的值。
initial	设置该属性为默认值，详情查看 CSS initial 关键字。

3、什么是伪类、伪元素

1. 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
2. 伪元素本质上是创建了一个有内容的虚拟容器；

• 伪类：用于向某些选择器添加特殊的效果（如：:link 选择未访问的链接；:visited 选择已访问的链接；:hover 选择鼠标指针移入链接；:active 被激活的链接，即按下单击鼠标左键但未松开；）
• 伪元素：用于将特殊的效果添加到某些选择器（如：::before / :before在某个元素之前插入一些内容；::after / :after在某个元素之后插入一些内容）

4、css选择器的权重关系是怎样的

 !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

5、实现不定宽高的元素水平居中的方式有哪些

方案一：

.wraper{

position:absolute;

top:50%;

left:50%;

-webkit-transform:translate(-50%,-50%);

}

方案二：

.wraper{

display:-webkit-flex;

justify-content:center; //水平居中

align-items:center; //垂直居中

}

6、物理像素、css像素、设备独立像素都是什么

物理像素：物理像素，设备能控制显示的最小单位，我们常说的1920×1080像素分辨率就是用的设备像素单位

css像素：适用于web编程，指的是我们在样式代码中使用到的逻辑像素，是一个抽象概念，实际并不存在

设备独立像素：与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素

7、查找DOM、操作DOM的方法有哪些

8、事件委托是指什么

它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

9、什么是伪数组

这里把符合以下条件的对象称为伪数组：

1，具有length属性

2，按索引方式存储数据

3，不具有数组的push,pop等方法

10、var、let、const区别是什么，什么是变量提升

var声明的变量会挂载在window上，而let和const声明的变量不会

var声明变量存在变量提升，let和const不存在变量提升

let和const声明形成块作用域

同一作用域下let和const不能声明同名变量，而var可以

const一旦声明必须赋值,不能使用null占位，声明后不能再修改，如果声明的是复合类型数据，可以修改其属性

11、[1,2,3].map(parseInt)的执行结果，为什么

12、匹配0-1000闭区间的正则表达式

13、实现一个深拷贝函数

14、实现一个js原型继承的例子

15、列举出可以实现输出1/2/3，要求一秒打印一次的方式