爱奇艺前端开发二面:
1.行内元素和块级元素有什么区别:
1.行内元素一行排列,宽度和内容有关,块级元素垂直排列,默认宽度是它本身父容器的100%
2.可以使用display进行转换
3.行内元素的宽度是无法设置的,块级是可以设置的
没说出的一点:行内元素里面不可以嵌套块级元素,块级元素可以嵌套行内元素
2.如果line-height设置为1.5,和line-height设置为150%,说说不同
这里确实懵逼了,没有了解过这个问题,正确答案是:
父元素设置了1.5会继承给子元素,而子元素的1.5是根据自己的字体计算的,而父元素设置为150%,是子元素的lineheight是父元素计算好后传给子元素的
比如父元素设置属性:font- size:14px;line-height:1.5,child设置font-size:26px;
那么父元素:line-height = 14px * 1.5 = 21px,子元素:line-height = 26px * 1.5 = 39px。
父元素设置属性:font-size:14px;line-height:150%,child设置font-size:26px;
那么父元素:line-height = 14px * 150% = 21px,子元素:line-height = 父元素的line-height = 21px。
<style>
.father{
line-height: 1.5;
font-size: 70px;
}
.son{
font-size: 20px;
}
</style>
<body>
<div class="father">
<div class="son">123455</div>
</div>
</body>
这里是line-height为150%
这里是line-heigt为1.5
3.行内元素可以设置margin和padding吗?
我的回答是不可以设置,
最好的回答是左右可以设置,上下不可以设置
4.margin和padding设置百分比的话是根据什么来定的?
margin和border都是根据父元素的宽度来定的,无论上下左右都是,同时行内元素和块级元素都是根据父元素的宽度
5.谈谈box-size
先解释了下这个属性,介绍了两个属性值,border-box和content-box
border-box的width是包含content ,padding,border的
content-box的width是只包含content的
再介绍了下盒模型,ie的和w3c盒子模型的不同
6.谈谈脱离文档流的方法
1.使用浮动
2.使用fixed定位
3.使用absolute定位
补充一点:半脱离文档流,relative,原来的元素位置会空着,但是元素会漂浮到别的元素上面
7.谈谈你刚刚说的定位吧
简单提了下static定位
然后说了下relative定位,以及定位参考点
absolute定位,以及定位参考点
fixed定位,以及定位参考点
sticky也简单提了下
8.实现一个div离顶部为200px,当页面滚动一定位置后再固定到一个位置
面试官说大概思路对就行了
.one{
position:absolute;
top:200px;
left:0px;
}
<div class='one'>123</div>
let div=document.queryslectorAll('.one')[0]
window.addeventlistener('scroll',()=>{
if(document.body.scrolltop>=500){
div.style.position:'fixed'
div.style.left:'200px'
}
})
8.flex布局中如果有三个子元素为垂直排列,那么怎么换成横向排列
设置主轴flex-direction:row
追问如果子元素超过了父盒子宽度呢?
说了flex-grow的用法,顺便还说了flex-shrink还有flex-basis的用法
9.知道什么是闭包吗?
闭包就是指一个在一个函数的作用域中可以访问另一个函数作用域中的变量
闭包的作用:延伸变量的作用范围,让外部的函数可以访问函数内变量成为可能,另外可以让变量一直保存在内存中
闭包的坑点:内存泄漏,变量变化,this隐式丢失
//内存泄漏:在outerFun执行完后,outerArgument无法被释放,一直在内存中
outerFun(outerArgument){
//被包含的内部函数可以访问外部函数的变量
return function(){
return outerArgument+1
}
}
//this隐式丢失:
var object = {
name: ''object",
getName: function() {
return function() {
console.info(this.name)
}
}
}
object.getName()() // underfined
// 因为里面的闭包函数是在window作用域下执行的,也就是说,this指向windows`
10.谈谈instanceof
instanceof判断引用类型,typeof判断值类型
然后说了下instanceof和typeof的原理
11.get和post区别
1.get是从服务器拉数据,而post是从服务器传数据
2.get传参在url中,post在请求体中
3.post支持更多的传参数据类型
4.post会分为2个数据包,get只有一个,和http1.1节约带宽结合理解
未说出的:post的参数无长度限制,而get有,因为url有长度限制
12.跨域
一面已经说了,这里不再写
13.复杂请求和简单请求
复杂请求:
1.delete和put
2.json格式
3.有自定义头部,例如携带cookie
追问:post是复杂请求吗?
回答:不一定,如果post请求传的是json格式,或者携带cookie就是复杂请求
14.this指向
全局函数指向window
obj调用函数指向调用者
settimeout指向window
显示绑定。call bind apply
new绑定
箭头函数this指向上下文
闭包return function中this指向window
15,二维数组竖着打印
//例如:[[1,2,3],[4,5,6],[7,8,9]]
//打印:[[1,4,6],[2,5,8],[3,6,9]]
function changearray(array){
let newarray=[]
for(let i=0;i<array.length;i++){
newarray[i]=[]
for(let j=0;j<array.length;j++){
newarray[i].push(array[j][i])
}
}
return newarray
}
16.检查回文字符串
function str(string){
let flag=true
for(let i=0;i<parseint(string.length/2);i++){
if(sting[i]!=string[string.length-1-i]){
flag=false
break
}
return flag}