作者：三省
袋鼠云产品技术部
前端开发工程师
auto是width的默认属性,
会CSS的同学都知道,
那么当width是auto的时候具有哪些表现呢?
于我，完全不知道，捂脸逃走~
深藏不露的width:auto至少包含下面这4种表现：
1.充分利用空间，比如<div>/<p>/<h1>~<h6>宽度默认为父级元素的100%，fill-available。（见下文备注1：不仅仅是简单的100%）
2.收缩和包裹，比如浮动，绝对定位，还有inline-block的元素是由内容把宽度撑开，宽度收缩到合适，fit-content。（见下文备注2：不仅仅是合适）
3.收缩到最小，这个我还真不知道怎么解释，如果父元素的宽度有限，当前元素内容换行的原则是中文每一个字都可以换行，英文不可以随意换行，根据前面两条规则来换行使得内容能够完全填充，这种行为即收缩到最小，min-content。换行的目的是为了不超过父级元素。
如果父元素的宽度是0，那么又存在下面两种情况（跑偏了~跑偏了~）
<div style="width: 0;"> <p>中文中文中文中文中文English中文中文</p> //<p>元素的width为0
</div>
<div style="width: 0;"> <a>中文中文中文中文中文English中文中文</a> //<a>元素的width为English占据的宽度
</div>
4.超出容器限制，上面三种情况的元素都不会主动超过父级元素的宽度（备注：特别是第三点收缩到最小，目的也是为了不超过父级元素的宽度），除非是很长的英文，或者设置了样式white-space:nowrap的元素。
此处推荐阅读
链接：
https://www.zhangxinxu.com/wordpress/2018/07/css-width-auto/
前面有提到fill-available的宽度是100%填充父级元素，但不仅仅是100%，因为这里涉及到margin/border/padding/content自动分配机制。
每个元素都有四层结构，margin/border/padding/content，如果在元素上设置100%，默认情况下(不设置box-sizing)这个100%作用在content层面上，那么如果在这个元素上也同时设置margin/border/padding的话，绝对超出父级元素，微笑脸。
所以说width:auto使得元素的宽度100%填充父级元素不简单，毕竟这个完全填充帮你把margin/border/padding/content都规划得好好的，你只需要关注内容就可以了。
不过CSS3中有个优秀的属性也是来帮我们解决完全填充问题的，box-sizing,说到box-sizing又不得不提标准盒模型和怪异盒模型，事实上box-sizing的各个值对应了元素的四层结构，margin-box/border-box/padding-box/content-box，这四个值指元素宽度设置100%时的作用域。不过margin-box没有应用场景，padding-box的应用场景渐弱,只有Firefox 50之前支持，后面的版本不再支持，现在可以设置的属性值是unset/initial/inherit/content-box/border-box。
- content-box对应的是标准盒模型，width:100%作用在content层，也就是我们在开发时采用的默认模式。
- border-box对应的是怪异盒模型，也叫做IE盒模型，width:100%作用在border层。
box-sizing请参考
链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing
宽度也不能比父元素大，体现包裹性
又是前面提到的，对于inline-block的元素，宽度由内容撑开，但总是比父元素的宽度小，小于等于父元素的宽度。
//这是一个会换行的button //<input type="button">不会换行,它默认white-space:pre,设置为white-space:normal即可 <div style="width:30px"> <button>欢迎关注袋鼠云技术团队微信公众号<button> </div>
这种特性很有意思，在《CSS世界》一书中有介绍。比如这种场景，元素的内容不定，内容少的时候居中显示，内容多的时候左对齐。
//我会居中 <div style="width:200px; text-align:center;"> <button style="text-align:left;">数据智能，让未来变成现在<button> </div> //我会左对齐 <div style="width:200px; text-align:center;"> <button style="text-align:left;">欢迎关注袋鼠云技术团队微信公众号</button> </div>
box-sizing可以改变width:100%的作用域，那在没有box-sizing属性的那个时代，设置了width:100%同时又需要设置border和padding，怎么破？！怎么破？！
宽度分离原则
width独占一层标签，margin/border/padding占一层标签。在标准盒模型下，遵循这样的原则同样可以让元素流动起来。
<div style="width:100%;"> <div style="border:1px solid #ccc; padding:5px;">content...</div> </div>说起来,下面这种真是邪恶的操作
//假如父级元素是100px <div style="width:88px; padding:5px; border:1px solid #ccc;"> content... </div> //假如我不知道父元素的宽度,那么我也没辙啦,二哈脸![]( "[二哈]")
