应聘测试

一 .前端基础
1.css有哪些实用的选择器?

#elem
.elem
elem+elem
elem>ekem
elem elem
elem,elem
:first-child
:last-child
:nth-child()
:checked
:disabled
::after
::before
::selcetion
:link
:visited
:active
:hover
:focus

2.解释css scriptes,如何使用?Web端 和移动端在使用上有什么区别 ?

3.javascript的 typeof 返回哪些数据类型 ?

number string object undefined  boolean

4.DOM标准事件的三个阶段 事件代理?

事件代理:又称事件委托,即把处理事件委托到父级或者最顶级元素上,然后利用冒泡机制来管理某一类型上的所有事件.
捕获阶段:当某个元素触发事件后,事件流随着DOM树到达指定目标,途径的元素如果绑定了事件,这个阶段是不会触发的.
目标阶段
冒泡阶段

二 前端技巧
1.分别列举一下水平和垂直居中的多种方式.如何让绝对定位的div水平垂直居中;
⑴在知道width和height的情况下进行水平和垂直居中

elem{
position:absolute;
top:50%;
left:50%;
transform:translate(-50px,-50px);
width:100px;
height:100px;
}

⑵在不知道的情况下

elem{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}

⑶利用弹性盒子

父元素{
	
	display:flex;
	justify-content:center;
	align-items:center;
}

2.请解释一下为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式?
使元素脱离文档流
清除浮动的原因是父元素高度坍塌
清除浮动的方式:
⑴给父元素添加高度
⑵给父元素末尾添加一个空的div,设置它的style为clear:both;
⑶给父元素也添加float
⑷给父元素这样设置

父元素::after{
	content:"";
	display:block;
	clear:both;
}

3.display:inline-block 什么时候会显示间隙? 如何解决?
标签与标签之间存在空格,在同一行显示的时候,不可避免的会产生间隙.
那么,如何解决这个问题:
⑴代码不换行
⑵再就是使用font-size:0;来解决

4.移动端的点击事件有延迟,时间是多久,为什么会有?怎么解决这个延时?
由于safari浏览器的双击缩放操作,
举个例子,用户要点击链接,当用户点击一次之后,浏览器并不能判断用户是想实现跳转还是实现双击缩放的效果,
所以,safari设置了300ms的延迟来进行判断,如果在这期间再次点击了,就进行缩放,否则实现跳转

解决方案:
三 能力拓展
1.有一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度;

 html,body{
			height: 100%;
			margin:0px;
			padding:0px;
		}
		.main{
			position: relative;
			height: 100%;
		}
		.box1{
			height: 100px;
			background-color: red;
		}
		.box2{
			position: absolute;
			width: 100%;
			top: 100px;
			bottom: 0px;
			background-color: blue;
		}

<div class="main">
	<div class="box1"></div>
	<div class="box2"></div>
</div>