关于bootstrap框架里media类的解析

写这篇文章源于工作项目前端UI要重构,而我选择参考bs框架来促进这个任务。同时,在创建媒体对象UI组件时,我发现bs框架的_media.scss类有几个属性令我不解。

bs完整的_media.scss类是这样的:

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
.media {
// Proper spacing between instances of .media
margin-top: 15px;
&:first-child {
margin-top: 0;
}
}
.media,
.media-body {
zoom: 1;
overflow: hidden;
}
.media-body {
width: 10000px;
}
.media-object {
display: block;
// Fix collapse in webkit from max-width: 100% and display: table-cell.
&.img-thumbnail {
max-width: none;
}
}
.media-right,
.media > .pull-right {
padding-left: 10px;
}
.media-left,
.media > .pull-left {
padding-right: 10px;
}
.media-left,
.media-right,
.media-body {
display: table-cell;
vertical-align: top;
}
.media-middle {
vertical-align: middle;
}
.media-bottom {
vertical-align: bottom;
}
// Reset margins on headings for tighter default spacing
.media-heading {
margin-top: 0;
margin-bottom: 5px;
}
// Media list variation
//
// Undo default ul/ol styles
.media-list {
padding-left: 0;
list-style: none;
}

最先令我疑惑的是

1
2
3
.media-body {
width: 10000px;
}

为什么要设置这么大的宽度呢?意义在哪?百度无果,我寻问了前辈豪大(豪情),得到线索stackoverflow
又挑战我4级未过的英文水平了。。借助有道,我整理了一下提问和回答

提问

Why does media-body class in bootstrap have width 10,000px and media class have overflow hidden and zoom 1?

翻译:
在bootstrap框架里为什么media-body样式含有width:10000pxmedia样式含有overflow:hidden,zoom:1

I have some question regarding the media classes in bootstrap.

  1. Why does .media-body class in bootstrap have width 10,000px? Why did they use display: table-cell not display: block?
  2. Why is overflow: hidden and zoom: 1used on .media class?
  3. Why doesn’t the div with .media-body actually take 10,000px width?
  4. What would happen if overflow: hidden and zoom: 1 are not used in .media class?

As for my effort, I removed overflow, zoom and 10,000px width and observed no difference.

翻译:
我有一些关于bs框架里media类的问题。
1. 为什么.media-body的宽为10000px,为什么是display:tall-cell而不是block?
2. 为什么.media用了zoom:1和overflow:hideen?
3. 为什么实际上div的宽度不是.media-body设置的10000px?
4. 如果不设置over-flow:hidden和zoom:1将会发生什么?
经过实践后,我删除over-flow:hidden和zoom:1和width:10000px观察到并没有什么改变。
大致是这个意思QAQ有没有英语好点的指导指导……

回答

I have found some comments in the collection “Responsive Bootstrap”:

  1. Create new block formatting context in modern browsers
  2. Avoid shrink-wrap behaviour of table-cell
  3. Override for IE6/7
  4. Create new block formatting context in IE6/7
    Alternatively, use ‘overflow:hidden’ if clipping is OK
    1
    2
    3
    4
    5
    6
    7
    display: table-cell; /* 1 */
    width: 10000px; /* 2 */
    @include old-ie() {
    *width: auto; /* 3 */
    *zoom: 1; /* 4 */
    }
    >

zoom is a hack for IE6 and IE7. All browsers ignore attributes that begin with an asterisk. Only IE7 and below takes them into account.

翻译:
我收集到一些关于“bs响应”的回复:
1. display: table-cell;在新版本浏览器可触发BFC(块级格式化上下文),如果不知道什么是BFC,可以百度或者看我的前一篇文章overflow:hidden
2. width:10000px能避免设置table-cell的盒子变型 (因为在IE6/7不支持table-cell属性,且浏览器对table-cell属性展现不一)
3. width:auto在IE6/7中形同于重写/覆盖。(*width是IE8下的hack技术)
4. zoom:1能在IE6/7中触发BFC
使用overflow:hidden能恰到好处的隐藏溢出样式。

zoom:1 是IE6/7的hack技巧,所有浏览器都会忽略这个属性除了IE6/7.


总结

看来为了善用table-cell,Twitter大牛们又给我上了一课。
这里为了求证以上答案的真实性,我去拜访了张鑫旭前辈的博客,了解table-cell
在之前,我对table-cell属性仅仅停留在表单元形式展现的印象里,通俗理解,设置display:table-cell的盒子形式上会变成<table>,所以其子元素都会变成表单元,形同于<td><tr>。但由于IE6/7的不支持,所以设置其父元素需要配合overflow:hidden,zoom:1用于避免盒子塌陷,和触发BFC。而*width:10000px多余的宽度也恰到好处的被父元素隐藏。
所以table-cell有很高的使用价值,如:

  • 大小不固定元素的垂直居中,在对图片垂直居中时,img标签应被<a>标签包裹。(父table-cell + 父子vertical-align + 子inline-block)
  • 两栏自适应布局(兄弟flout + 兄弟table-cell)
  • 等高布局(父table-row + 子table-cell)
  • 列表布局(同上 + 子width)

(父:指父元素,子:指子元素,兄弟:相邻元素)

超实用有木有,日常写demo都遇的上。
系统提示:恭喜玩家uhey技能提升10个点!