<!-- 《CSS世界》 张鑫旭著 -->
width:auto
width:auto至少包含了以下4种不同的宽度表现：
- 充分可利用空间。比方说，<div>、<p>这些元素的宽度默认是100%于父级容器的。
- 收缩与包裹。典型代表是浮动、绝对定位、inline-block元素或table元素，英文成为shrink-to-fit，直译为“收缩到合适”，更形象的叫法是“包裹性”
- 收缩到最小。这个最容易出现在table-layout为auto的表格中
- 超出容器限制。除非有明确的width相关设置，否则上面三种情况尺寸都不会出动超出父级容器宽度的，但存在一些特殊情况。例如：内容很长的连续的英文和数字，或者内联元素被设置了white-space:nowrap。
尺寸分“内部尺寸”和“外部尺寸”。其中“内部尺寸”表示尺寸由内部元素决定，“外部尺寸”表示宽度由外部元素决定。上面4种尺寸表现，就地一个是“外部尺寸”。
1.外部尺寸与流体特性
（1）正常流宽度
当我们在一个容器中倒入足量的水，水一定会均匀铺满整个容器。
在页面中随便扔一个<div>元素，其尺寸表现就会和水流一样铺满容器。这就是block容器的流特性。
表现为“外部尺寸”的块级元素一旦设置了宽度，流动性就丢失了。
所谓流动性，并不是看上去的宽度100%显示这么简单，而是一种margin/border/padding和content内容区域自动分配水平空间的机制
示例见 http://demo.cssworld.cn/3/2-3.php
（2）格式化宽度
格式化宽度仅出现在“绝对定位模型”中，也就是出现在position属性值为absolute或fixed的元素中。
在默认情况下，绝对定位元素的宽度表现为“包裹性”，宽度由内部尺寸决定，但是有一种情况其宽度是由外部尺寸决定的：
对于非替换元素，当left/right或top/bottom对立方位的属性值同时存在时，元素的宽度表现为“格式化宽度”，其宽度大小相对于最近的具有定位特性（position属性值不是static）的祖先元素计算。
和上面的普通流一样，“格式化宽度”具有完全的流动性，也就是margin/border/padding和content内容区域自动分配水平（和垂直）空间
2.内部尺寸与流体特性
（1）包裹性
“包裹性”除了“包裹”，还有“自适应性”。
所谓“自适应性”，指的是元素尺寸由内部元素决定，但永远小于“包含块”容器的尺寸（除非容器尺寸小于元素的“首选最小宽度”）。
根据这个特性，我们可以实现，例如：文字少的时候居中显示，文字超过一行的时候居左显示。核心CSS代码如下：
.box{
text-align:center;
}
.content{
display: inline-block;
text-align: left;
}
具体可点击查看：http://demo.cssworld.cn/3/2-5.php
inline-block元素、浮动元素以及绝对定位元素、table元素都具有包裹性。
（2）首选最小宽度
所谓“首选最小宽度”，指的是元素最适合的最小宽度。
假如外部容器的宽度是0，里面width:auto的inline-block元素的宽度不会是0，此时所表现的宽度就是“首选最小宽度”。具体表现规则如下：
- 东亚文字（如中文）最小宽度为每个汉字的宽度
- 西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元，一般会终止于空格（普通空格）、短横线、问号以及其他非英文字符等。
- 类似图片这样的替换元素的最小宽度就是该元素内容本身的宽度。
具体可查看：http://demo.cssworld.cn/3/2-6.php
（3）最大宽度
“最大宽度”实际等同于“包裹性”元素设置white-space:nowrap声明后的宽度。
如果内部没有块级元素或者块级元素没有设定宽度值，则“最大宽度”实际上是最大的连续内联盒子的宽度。
“连续内联盒子”是指全部都是内联级别的一个或一堆元素，中间没有任何的换行标签<br>或其他块级元素。
具体应用可查看：http://demo.cssworld.cn/3/2-7.php
width是作用在“内在盒子”上的，这个“内在盒子”是由很多部分构成的，由内至外是：content、padding、border、margin。