鸦杀's Blog

面试拾疑

2016-07-21

第一次遇到电面,┭┮﹏┭┮好丢脸。。然后我竟然还过了。。。

行内元素有没有盒模型

任何元素都有啊,我傻。。。

行内元素与块元素的区别

首先是在布局上,块元素独占一行。相邻行内元素水平排列
宽度块元素默认100%,行内元素随内容自适应
块元素设置margin四个方向有效,行内元素margin垂直方向无效。
块元素可以容纳行内元素和块元素,但行内元素只能容纳行内元素。
行内元素一般来讲设置高宽无效。但替换元素Replace inline element除外(<img>、<input>、<textarea>、</textarea><select>、<object>) ,它们需要元素的属性和标签来显示元素。
从可继承的css属性上看,并不是所有块元素能继承的属性行内元素都能继承,除了列表、表格相关外,text-indent与text-align属性对行内元素无效。

input元素为什么可以设置高宽的问题,这个之前确实没有研究过,其他的几点想想是可以答出来的。

垂直布局

这个很久以前其实自己总结过啊。。太久没写。。。回顾一下水平垂直居中布局~

####、绝对定位+负边距

父元素:position:relative,
子元素:position:absolute,margin负边距为高宽的一半
兼容性很好,需要已知子元素的宽高

1
2
3
4
5
<div class="wrap">  
<div class="content">
content
div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.wrap{  
position:relative;
background-color:#edd;
width:100%;
height:100%;
}

.content{
position:absolute;
left:50%;
top:50%;
margin-top:-50px;
margin-left:-50px;
width:100px;
height:100px;
background-color:#f00;
color:#fff;
}

用绝对定位结合margin偏移来做

父元素:position:relative,
子元素:position:absolute;top:0;right:0;bottom:0;left:0;同时还需设置margin为auto。

同样需要知道子元素的高宽,但是它对IE6/7是不支持的

1
2
3
4
5
<div class="wrap">  
<div class="content">
content
div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.wrap{  
position:relative;
width:100%;
height:100%;
background-color:#edd;
}

.content{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
width:100px;
height:100px;
margin:auto;
background-color:#f00;
color:#fff;
}

绝对定位-translate

很大的优点是它不需要知道宽高,但ie6/7/8不支持

1
2
3
4
5
<div class="wrap">  
<div class="content">
content
div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.wrap{  
position:relative;
background-color:#edd;
width:100%;
height:100%;
}

.content{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background-color:#f00;
color:#fff;
}

弹性盒

我觉得在移动端浏览器兼容性需要好好测一下,写法上需要关注新旧版本的flex。比如UC/QQ/微信,据之前同事反应有很多坑点,且最好用li。
IE6/7/8/9不支持

这个从来没记住过,刚刚翻《图解css3核心技术与案例实战》,发现display:box的写法是早期的版本,09年;而flexbox是11年的过滤版本,flex才是当前标准规范。

1
<iframe style="width: 100%; height: 300px" src="http://sandbox.runjs.cn/show/rpgcnkhs" allowfullscreen="allowfullscreen" frameborder="0">iframe>

这里junstify-content用于控制主轴居中,align-items控制侧轴居中。默认元素水平排列的,主轴就是水平方向,侧轴就是垂直方向。所以如果设置了flex-direction:column的话,水平居中就得用align-items,垂直居中用junstify-content。

在早期版本中,主轴对齐对box-pack,侧轴对齐用box-align
在混合版本中,主轴对齐用flex-pack,侧轴对齐用flex-align,

三个版本的浏览器兼容性问题:

  • 早期:ie不支持,firefox:2-21,chrome:4-20,opera不支持,safari3.1-6,ios safari3.2-6.1,安卓浏览器2.1-4.3,安卓uc浏览器9.9+
  • 混合版本:只有ie10支持
  • 标准版本:ie11+,firefox22+,chrome:21+,opera:12.1+,safari从6.1开始,ios safari7.1+,安卓浏览器4.4+,安卓chrome浏览器51+,安卓firefox浏览器46+,opera手机浏览器12.1+。

can i use 中有详细介绍,http://caniuse.com/#search=flex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.wrap{  
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
height: 200px;
width: 200px;
background-color: #ccc;

}
.content{
background-color: #edd;
}

table-cell

1
2
3
4
5
<div class="wrap">  
<div class="content">
content
div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
.wrap{  
width: 200px;
height: 200px;
display: table;
background-color: #ccc;

}
.content{
display:table-cell;
vertical-align:middle;
background-color: #edd;
text-align:center;
}

行内元素使用vertical-align-text-align

1
2
3
4
5
<div class="wrap">  
<div class="content">
content
div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.wrap{  
width: 200px;
height: 200px;
display: block;
background-color: #ccc;
text-align:center;

}
.content{
display:inline;
vertical-align:center;
line-height:200px;


}

补充一个未知宽度水平居中利用position-relative与left-right

原理就是父元素相对定位,left:50%;它所有的子元素设为行内或者行内块元素,相对定位,也相对自身right:50%。因为子元素的right 50%是根据父容器的宽度来算的。因此刚好,矫正了子元素的位置。

这里子元素不一定非要设成float:left,display值inline,inline-block也可以,当然如果子元素设置了宽度的话,需要text-align:center;修正一下。父元素也不一定需要设为float,可以改成inline-block;

兼容性还行,就是里面子元素宽度的1.5倍不能大于这个布局的容器的宽度,不然会有横向滚动条。

1
2
3
4
5
6
7
8
<ul class="wp">  
<li class="test">1li>
<li class="test">2li>
<li class="test">3li>
<li class="test">4li>
<li class="test">5li>

ul>
1
2
3
ul,li{margin:0;padding:0;}  
.wp {position:relative; left:50%; display:inline-block;background:#eee;}
.test {position:relative; right:50%; z-index:2; display:inline-block;width:50px;text-align:center;}

数组排序

当时在犹豫到底是升级为-1还是降序为-1.。。还有我发现我表达能力很有问题

1
2
3
4
5
Array.prototype.desort=function(){  
return this.sort(function(a,b){
return a>=b?-1:1
})
}

数组排序之前有一个需求做过的比较折腾的是尺码表排序,混杂了数字、英文、混合、2xs-6xl、xxs-xxxxxxl = =。

blur是否有relatedTarget

这个我答的是没有。印象中只记得mouseover和mouseout有。后来查了一下确实是没有的。

跨域

跨域答了几个,jsonp,img,document.cookie,postMessage和xhr2的。
其实我还记得反向代理,虽然不知道是什么鬼。xhr2重点是后端需要设置返回头。不过我把这些单词都忘光了。
如果要传cookie的话,服务端要设置Access-Control-Allow-Origin,但是值不能为*,还有Access-Control-Allow-Credentials:true,记得之前和后端同学联调时遇到过这个问题。前端需要设置xhr2的属性xhrFields: {withCredentials: true }

document.domain跨域,被问跨域跨的是数据还是页面,然后我又傻的,如果是页面,iframe还能访问么。以后应该三思。。答案引用一句话:

浏览器都有一个同源策略,其限制之一就是不能通过ajax的方法去请求不同源中的文档。 它的第二个限制是浏览器中不同域的框架之间是不能进行js的交互操作的。

总结

这次面得很差,有很多不该答错的点。&我现在困死了。。。然后明天有整理下跨域,我记得还有flash跨域??

扫描二维码,分享此文章