第七天，谈谈【shrink-to-fit】
什么是 shrink-to-fit##
shrink-to-fit指的是块级元素只占据内容所需要的宽度。Shrink-To-Fit，字面意思就是收缩包围。
为什么需要shrink-to-fit
我们都知道在默认情况下，块级元素（更确切的说是display属性值为block或list-item的元素）在横向上会占据它所能占据的最大宽度。但是，如果我只想让块元素和它所包含的内容一样宽，该怎么做呢？最容易想到的方法是：设置width。可是，如果内容是动态的，宽度不固定的呢？这时，我们就可以利用shrink-to-fit了。
##如何使块元素shrink-to-fit## 下面我们将介绍五种常见的使块元素shrink-to-fit的方式，并顺带介绍一个很常见的需求：如何使shrink-to-fit的元素相对于父元素居中显示。
- 方式一：通过
float属性
示例代码一：
这应该是使用最普遍的一种方式，因为主流浏览器都支持，并且浮动带来的副作用很小（一般通过清除浮动即可消除副作用）。
但如果你想让shrink-to-fit的元素居中显示，可能就要换一种方式了，比如下面这种。
- 方式二：通过
display:inline
示例代码二：
把shrink元素设置成display:inline就可以使它和内容一样宽。而通过container的text-align:center即可使其居中显示。但是display:inline带来的副作用也有很多，例如：
- 将无法设置
shrink元素的width和height - 将无法设置
shrink元素的垂直padding - 如果
shrink元素包含多行内容，并且shrink元素有边框或背景时，效果会一团糟。如下：
- 方式三：通过
display:inline-block
示例代码三：
display:inline-block在现代浏览器中即可使元素shrink-to-fit，为了在IE6、7中达到同样的效果，需要用*display: inline;*zoom: 1;hack一下。详见上一篇谈谈【inline-block】
用这种方式shrink-to-fit的元素，通过设置container的text-align:center即可使其居中显示。
- 方式四：通过
position:absolute
示例代码四：
这应该是用的最少的一种方式，因为position:absolute会改变元素的定位方式，使元素脱离普通文档流。(由于固定定位position:fixed是绝对定位position:absolute的一种，所以position:fixed同样可以使元素shrink-to-fit，这里不再展开叙述)
- 方式五：通过
display:table
示例代码五：
display:table即可使元素shrink-to-fit，再加上margin: 0 auto即可使其居中显示。可惜的是IE6、7不支持这种方式。
除了上面这五种常见的方式，还有一些不常用的，例如：display: table-cell、 display: inline-table。
在IE中也有一些和shrink-to-fit相关的bug，例如：当一个应该收缩包围的元素中包含一个拥有“layout”的块级元素时，会出现一些意想不到的现象，相关bug会在专栏Bug 去哪儿？中出现，欢迎前去订阅。本文的主要目的也是为说明IE 中shrink-to-fit bug 做准备。
参考文章：
题外话：
分享一段话：来自熊培云的《自由在高处》
在一个广场上，人挤人，你不知道方向在哪里，但如果你站得高一点，看得远一点，就知道周遭的种种拥挤对你来说其实毫无意义。
快过年了，提前祝炖友们过年好，O(∩_∩)O