深入理解CSS的width:auto

一、深藏不露的width:auto

本节内容选自《CSS世界》第3.2.1的引言部分。

我们应该都知道，width的默认值是'auto'，'auto'由于是默认值，出镜率不高，但是，却是个深藏不露的家伙，包含了至少下面4种不同的宽度表现：

1. 充分利用可用空间

   比方说，div> , p> 这些元素的宽度默认是100%于父级容器的。这种充分利用可用空间的行为还有个专有名字，叫做"fill-available"。实际上，对于inline-block水平的元素，也会存在充分利用可用空间的场景，就是里面元素内容已经超过一行，宽度表现大于容器宽度的时候。

2. 收缩与包裹

   典型代表就是浮动，绝对定位，inline-block水平元素或table表格，英文称为“shrink-to-fIT”，直译为“收缩到合适”，有那么点意思，但不够形象，我自己一直把这种现象称为“包裹性”。CSS3中的"fit-content"指的就是这种宽度表现。

3. 收缩到最小

   这个最容易出现在table-layout为auto的表格中，想必有经验的小伙伴一定见过下面这样一柱擎天的盛况的吧！

   大家空间都不够的时候，文字能断的就断，中文是随便断的，英文单词不能断。于是乎，第一列被无情地每个字都断掉，形成一柱擎天。这种行为称之为“PReferred minimum width”“或者“minimum content width”。后来还有了一个更加规范好听的名字"min-content"。

4. 超出容器限制

   上面1~3情况，除非有明确的width相关设置，否则尺寸都不会主动超过父级容器宽度的，但是，存在一些特殊情况，例如，连续的英文数字，好长好长；或者内联元素被设置了white-space:nowrap，则表现为“恰如一江春水向东流，流到断崖也不回头”。

   例如下面的CSS代码：

    .father {
          width: 150px;
          background-color: #cd0000;
          white-space: nowrap;
    }
    .child {
          display: 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。语法如下：

.example1 {
         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教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！