求display值的面试题分析

题目是这样的: 一个空span标签被赋予下列属性时,对应的display计算值(compute value)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.span1{color:#9999}
.span2{float:left}
.span3{position:relative}
.span4{position:absolute}
.span5{visibility:none}
.span6{display:-webkit-grid;float:left}
.span7{display:inline-table;float:left}
.span8{display:inline-block;float:left}
.span9{display:inline-flex;float:left}
.span10{display:flex;float:left}
.span11{display:-webkit-grid}
.span12{display:flex}
</style>
<title>Document</title>
</head>
<body>
<!-- 填写当一个无样式的空span被赋予下列属性时 -->
<span class="span1">1、color: #9999;</span>
<span class="span2">2、float: left; </span>
<span class="span3">3、position: relative;</span>
<span class="span4">4、position: absolute;</span>
<span class="span5">5、visibility: none;</span>
<span class="span6">6、display: -webkit-grid;float:left;</span>
<span class="span7">7、display: inline-table;float: left;</span>
<span class="span8">8、display:inline-block;float:left;</span>
<span class="span9">9、display:inline-flex;float:left;</span>
<span class="span10">10、display:flex;float:left;</span>
<span class="span11">11、display:-webkit-grid</span>
<span class="span12">12、display:flex</span>
<script>
var spans = document.getElementsByTagName('span');
function getStyle(element, proName){
var eleStyle;
if(!document.defaultView){
eleStyle = element.currentStyle[proName];
} else {
eleStyle = document.defaultView.getComputedStyle(element)[proName];
}
return eleStyle;
}
for (var i = 0; i < spans.length; i++) {
console.log(spans[i].innerHTML + '获取到的display结果为:' + getStyle(spans[i],'display'));
}
</script>
</body>
</html>

运行结果如下:

1
2
3
4
5
6
7
8
9
10
11
12
color: #9999;获取到的display结果为:inline
float: left; 获取到的display结果为:block
position: relative;获取到的display结果为:inline
position: absolute;获取到的display结果为:block
visibility: none;获取到的display结果为:inline
display: -webkit-grid;float:left;获取到的display结果为:block
display: inline-table;float: left;获取到的display结果为:table
display:inline-block;float:left;获取到的display结果为:block
display:inline-flex;float:left;获取到的display结果为:flex
display:flex;float:left;获取到的display结果为:flex
display:-webkit-grid获取到的display结果为:inline
display:flex获取到的display结果为:flex

其实重点还是我加粗的这两个结果,因为之前自己的理解table标签是块元素 所以想到的就是display:table;之后加上float
:left;应该是block的结果呈现猜对 不过还是不对,答案运行出来还是很意外。

所以还是不明白为什么这样,因为我换做display:table-cell;(类似table中的td),float:left;一起,结果是block;

MDN上面的解释还是没说到我想要的答案,但是找了一对资料还是没明白清楚,于是,找到 CSS-Tricks上面一个老外的回复说 如果display:table;或者是display:inline-table;和float:left;一起的话,默认是优先级为table。测试的过程中只有table/inline-table 与float 或者是 flex / inline-flex 与float 结合的时候才优先 取得diaplay值为table或者是flex; 其实float 换做position: absolute; 其实跟float一样都是脱离文档流的。 flex是弹性布局,table布局的时候,结合table-cell 一起效果就能看出,所以table用来实现水平垂直居中,你的table-cell 不用设置宽高,自己会默认赋予。

理解的不够透彻吧~ 不过还是希望理解的小伙伴给予说明,不胜感谢。或者是具体是吗办法来理解比较专业?

0%