呀 我不会写CSS之width：auto！

作者：三省

袋鼠云产品技术部

前端开发工程师

auto是width的默认属性,

会CSS的同学都知道,

那么当width是auto的时候具有哪些表现呢?

于我，完全不知道，捂脸逃走~

深藏不露的width:auto至少包含下面这4种表现：

1.充分利用空间，比如

/

/~宽度默认为父级元素的100%，fill-available。（见下文备注1：不仅仅是简单的100%）

2.收缩和包裹，比如浮动，绝对定位，还有inline-block的元素是由内容把宽度撑开，宽度收缩到合适，fit-content。（见下文备注2：不仅仅是合适）

3.收缩到最小，这个我还真不知道怎么解释，如果父元素的宽度有限，当前元素内容换行的原则是中文每一个字都可以换行，英文不可以随意换行，根据前面两条规则来换行使得内容能够完全填充，这种行为即收缩到最小，min-content。换行的目的是为了不超过父级元素。

如果父元素的宽度是0，那么又存在下面两种情况（跑偏了~跑偏了~）

4.超出容器限制，上面三种情况的元素都不会主动超过父级元素的宽度（备注：特别是第三点收缩到最小，目的也是为了不超过父级元素的宽度），除非是很长的英文，或者设置了样式white-space:nowrap的元素。

链接：

https://www.zhangxinxu.com/wordpress/2018/07/css-width-auto/

备注1：fill-available，不简单的完全填充

前面有提到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

备注2：fit-content，内容再怎么多，

宽度也不能比父元素大，体现包裹性

又是前面提到的，对于inline-block的元素，宽度由内容撑开，但总是比父元素的宽度小，小于等于父元素的宽度。

这种特性很有意思，在《CSS世界》一书中有介绍。比如这种场景，元素的内容不定，内容少的时候居中显示，内容多的时候左对齐。

//我会居中

数据智能，让未来变成现在

//我会左对齐

欢迎关注袋鼠云技术团队微信公众号

来自《CSS世界》的一个彩蛋

box-sizing可以改变width:100%的作用域，那在没有box-sizing属性的那个时代，设置了width:100%同时又需要设置border和padding，怎么破？！怎么破？！

宽度分离原则

width独占一层标签，margin/border/padding占一层标签。在标准盒模型下，遵循这样的原则同样可以让元素流动起来。

说起来,下面这种真是邪恶的操作