一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。
前言
这段时间我又开始重新翻阅《css世界》，越发的发现css的强大。这不我这两天又发现了一个神器width：auto，在这里跟大家分享一下我的个人理解，希望对大家有所帮助。
嘉宾出场
下面我们有请 width: auto 出场。
auto：浏览器将会为指定的元素计算并选择一个宽度
探索之旅开启
流体特性
充分利用一切可以利用的空间，跟流一样平铺开来。
适用对象：块级元素
这里所说的块级元素并不仅仅的指 display: block，而是所以的块级盒子，例如：display: table、 display: list等
表现效果：
具体代码如下：
.box {
height: 20px;
background: #f33;
}
<div class="box"></div>
包裹性
我对包裹性的理解是，外在盒子会紧紧的包裹住内在盒子。通俗点来讲就是，盒子的宽度完全是靠内在的内容撑开。内容越多，宽度越长，直至内容完全放下。
适用对象：浮动元素和、绝对定位元素、固定定位元素、inline-block元素、内联元素和table元素
表现效果：
具体代码如下：
.box {
background: #f33;
}
<span class="box">我是短手</span>
<span class="box">我</span>
收缩性
在任何普遍适用的现象背后，总是有一些特殊的存在。下面我们要说的表格就是一个特殊的角色，它在实际的渲染中并不会受width的影响，“随心所欲”。可能有的人还没有明白是个是么东西，不过我相信看一下效果图就会恍然大悟，原来是它。
适用对象：table-layout：auto的表格
表现效果：
超出容器限制
按照常规理论来讲，除非有特殊的设置，否则子元素是不会随意的超越父元素的宽度的，毕竟，父元素的权威还是毋庸置疑的。但是，总有一些调皮捣蛋的家伙不服管教，总想着出去看一下，呈现出一种超出父元素宽度，跟父元素的兄弟元素进行空间的抢占。
适用对象：长度特别长的英文（不能包含空格、短横线、问号以及其它非英文字符）或者数字，或者被white-space:nowrap处理过的内联元素。
表现效果：
具体代码如下：
.block {
margin: 5px;
padding: 5px;
width: auto;
height: auto;
background: #f33;
}
.inline-block {
display: inline-block;
margin: 5px;
padding: 5px;
width: auto;
height: auto;
background: #0ff;
}
.inline {
display: inline;
margin: 5px;
padding: 5px;
width: auto;
height: auto;
background: #f0f;
}
<!-- block -->
<div class="block">blockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblock1</div>
<div class="block">我是块级元素我是块级元素我是块级元素我是块级元素我是块级元素我是块级元素我是块级元素我是块级元素我是块级元素我是块级元素我是块级元素</div>
<!-- inline-block -->
<div class="inline-block">inlineblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblockblock</div>
<div class="inline-block">我是内联块级元素我是内联块级元素我是内联块级元素我是内联块级元素我是内联块级元素我是内联块级元素我是内联块级元素我是内联块级元素</div>
<!-- inline -->
<div class="inline">inlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinline</div>
<div class="inline">我是内联元素我是内联元素我是内联元素我是内联元素我是内联元素我是内联元素我是内联元素我是内联元素我是内联元素我是内联元素我是内联元素</div>
这种现象对于我们来说很苦恼，因为我们并不想让它信马由缰，所以我们需要约束住它，让他完整的被父元素包裹住。
解决办法：word-break：break-all; white-space: wrap;
结语
好了，有关 width: auto的干货我已经掏空了，希望对大家有所帮助。如果，大家对css相关内容感性，可以关注一下哟，后续会持续更新。
