转载

元素auto宽高的影响因素

我们知道，元素在没有设置宽高的情况下，默认的宽高值都为 auto 。而这个 auto 到底是如何让元素自动拥有宽高的呢，也就是说，元素的宽度和高度到底会受到什么因素的影响？本文将通过一个例子来对这一问题一探究竟，HTML结构和初始css如下：

    <div class="container">         <div class="test"></div>     </div>

    .container {         position: relative;         width: 200px;         height: 200px;         background-color: #ff9;     }     .test {         border: 1px solid #979797;         background-color: #f1f1f1;     }

元素普通流定位（position为static或relative）

auto宽度

先看上面代码运行结果：

元素auto宽高的影响因素

再往元素里加点内容：

元素auto宽高的影响因素

所以不设置 position 属性时（也就是取默认值 static ），就如上面的运行结果所示，元素的宽度似乎会自适应于容器的宽度，而高度则和元素内容高度有关。

但要注意所谓的宽度自适应并不是指元素的宽度就一定会等于的容器宽度，而是指元素的 宽度+左右padding+左右border+左右margin 等于的容器宽度。比如下面我再给 .test 元素加上margin之后，元素的宽度可就不等于容器的宽度了：

元素auto宽高的影响因素

在进一步测试极端情况：

元素auto宽高的影响因素

此时元素的宽度被margin挤得不见，文本溢出了。

auto高度

由上文可见元素的auto高度只会一直随内容的高度在同步变化，并不会去“自适应”容器的高度，即使元素已经溢出容器：

元素auto宽高的影响因素

当然，上面只是讨论了元素内容为文本的情况，所以auto高度才这么老实地跟随内容变化。而如果内容是块级元素，虽然一般情况下auto高度还是随内容高度变化的，但若内容采用绝对定位或浮动时，就会导致我们很熟悉的“溢出”（高度塌陷）了：

元素auto宽高的影响因素

同时通过这两个例子，也可以看到auto宽度还是继续在自适应容器的宽度。

结论

结论就是：在默认定位的情况下，元素的auto宽度始终都会自适应于容器的宽度；而auto高度则和元素内容的高度有关，除非遇到内容浮动或绝对定位时引发的高度塌陷。

若采用相对定位，结果和上面也是一样的。原理也很好理解，毕竟相对定位时元素还是在原位置渲染的，只是多了个可以设置相对偏移罢了，各位可以自己试试看~

元素绝对定位和浮动

auto宽度

现在我们让 .test 元素绝对定位：

元素auto宽高的影响因素

再加点内容：

元素auto宽高的影响因素

只有添加了内容元素才会有宽度，显然宽度只会适应内容的宽度咯。但还有个特殊情况，就是文本内容的宽度会因为换行飘忽不定，所以当我们再加长文本长度后：

元素auto宽高的影响因素

.test 元素的文本居然自动换行，导致宽度适应容器了，再禁止换行看看：

元素auto宽高的影响因素

嗯，在不能换行时，就还是只会适应内容的宽度。所以下面要解决的，就是文本内容的换行规则是什么，或者说文本内容的宽度受什么影响？

规则其实不难：在可以自动换行（ white-space: normal/pre-wrap/pre-line ）时，文本中最长的一个单词或中文字符的长度就是最小的换行单位（若设置了 word-break: break-all 甚至可以取每个字母的长度作为换行单位），这个最小的换行单位是不可分割的。在文本容器宽度不够时，文本就只会在空格或 - 等字符处自动换行，而不会去分割换行单位。这条规则是不能违背的，我们可以来弄个超长的单词看看：

元素auto宽高的影响因素