&nbs p;
一、深藏不露的width:auto
本节内容选自《 CSS 世界》第3.2.1的引言部分。
我们 应该 都 知道 ， width 的默认值是 'auto' ， 'auto' 由于是默认值，出镜率不高，但是，却是个深藏不露的家伙，包含了至少下面4种不同的 宽 度表现：
充分 利用 可用空间比方说， < div > , <p> 这些元素的宽度默认是100%于父级容器的。这种充分利用可用空间的行为还有个专有名字，叫做 "fill-av ai lable" 。实际上，对于 inline-block 水平的元素，也会存在充分利用可用空间的场景，就是里面元素内容已经超过一行，宽度表现大于容器宽度的时候。
收缩与包裹典型代表就是浮动，绝对定位， inline-block 水平元素或 table 表格，英文称为 & # 8220;s hr ink -t o-f IT ” ，直译为“收缩到合适”，有那么点 意思 ，但不够形象，我自己一直把这种现象称为 “包裹性” 。CSS3中的 "fit-content" 指的就是这种宽度表现。
收缩到最小这个最容易出现在 table-layout 为 auto 的表格中，想必有经验的小伙伴一定见过下面这样一柱擎天的盛况的吧！
大家空间都不够的时候，文字能断的就断，中文是随便断的，英文单词不能断。于是乎，第一列被无情地每个字都断掉，形成一柱擎天。这种行为称之为 “ PR efer red minimum width” “ 或者 “ ;m inimum content width” 。后来还有了一个更加规范好听的名字 "min-content" 。
超出容器限制上面1~3情况，除非有 明确 的 width 相关设置，否则 尺寸 都不会主动超过父级容器宽度的，但是，存在一些特殊情况，例如，连续的英文数字，好长好长；或者内联元素被设置了 white -s pace:nowrap ，则表现为“恰如一江春水向东流，流到断崖也不回头”。
例如下面的CSS代码：
.father { width: 150px; background-color: #cd0000; white-space: nowrap; } .child { dis play : inline-block; background-color: #f0f3f9; } 结果：
子元素即保持了inline-block元素的收缩特性，同时最大内容宽度，直接无视了父级容器的宽度限制。这种现象后来就有了专门的属性值描述，叫做 "max-content" ， 了解 即可。
上面就是 width:auto 在不同场景下的宽度表现…… 的简介 。
没错，上面说了这么多都是简介，更多知识点篇幅 原因 就不展开，有兴趣可以去书里寻找。
二、CSS3中的width:auto
在CSS3中， width:auto 多种尺寸表现有了专门的属性值进行对应。
包括 fill-available , max-content , min-content , 以及 fit-content 。语法如下：
.ex am ple1 { width: fill-available; } .example2 { width: max-content; } .example3 { width: min-content; } .example4 { width: fit-content; } 目前有些属性 生效 还需要 webkit 私有前缀。
在移动端目前是可以使用的，我自己用下来还不错。保留元素原始的 display 计算值，又能有其他不一样的宽度表现。
以上CSS3新的 width 属性值我之前有专门写过 文章 介绍，“理解CSS3 max/min-content及fit-content等width值”，年代久远，估计已经湮没了，今天借此 机会 再 唤醒 下。
三、结束语
端午节站点全面https升级后，不知道是因为 服务器 IP变了，还是其他什么原因，搜索引擎的 收录 断崖式下跌，[捂脸]，所以，难免有些焦虑，比方说这篇文章，写到最后才发现尼玛 原来 之前写过类似的文章，有些水，罪过罪过。
https升级还是要升的，以前的收录丢了就丢了吧，就当重新 开始 ，从零出发，再开始慢慢 积累 。
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-深入理解CSS的width:auto 全部内容，希望文章能够帮你解决 html5教程-深入理解CSS的width:auto 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-深入理解CSS的width:auto的详细内容...