说到widh:auto这个属性，想必大家都不陌生，大家都知道width的默认值是auto。因为auto是默认值，很少有人关注auto的宽度表现。下面给大家介绍一下我所知道的auto的四种width表达式1.充分利用可用空间。例如
、
table{宽度：280px；保证金：0自动；文本对齐：左；背景：#a0b3d6；字体大小：12px；}td{填充：2px4px；边框：3px实心#fff；background:#f9f9f9;}每列空间不够时，文字可以打断，但中文随意打断，数字和英文单词不能打断。所以第一列的每一个词都是打断的，叫做min-content。4.超出容器限制。除非有显式的宽度相关设置，以上三种情况的大小都不会主动超过父容器的宽度，但也有一些特殊情况。比如长的连续英文和数字，或者行内元素设置white-space:nowrap:就像春水东流的江河，流淌的不要到了悬崖边回头看看
.father{width:150px;填充：10px；背景色：#cd0000；空白：nowrap；}.child{显示：内联块；填充：5px；背景色：#f0f3f9；}自身元素既保持了inline-block元素的收缩特性，又将内容的宽度最大化，直接忽略父容器的宽度限制，称为max-content
元素的宽度默认为父容器宽度的100%。这种充分利用可用空间的行为还有一个专有名称，叫做fill-available。2.收缩和包裹。典型的代表有浮动、绝对定位、inline-block元素或者table元素，英文叫做shrink-to-fit，CSS3中的fit-content就是指这种宽度表现3.shrink到最小。这最有可能出现在表格布局为自动的表格中。
| 只有1列，1列，1列，1列，1列 | 当parent为relative，且width较小时，如{position:relative;width:20px;}，absolute元素也会出现柱子的样子； | 当parent是relative且width较小时，如{position:relative;width:20px;},absolute元素也会显示为柱子； |