shrink-to-fit(自适应宽度)

Love The Way You Lie 2022-08-03 00:23 236阅读 0赞

> *自适应宽度是指当未明确设定容器的宽度（或外边距设为auto）时，在特定的情况下容器的宽度会根据情况自行设定，而设定的结果往往并不是我们想要的。*

# W3C规范中描述了几种shrink-to-fit的情况 #

*  [10.3.5 Floating, non-replaced elements][10.3.5 Floating_ non-replaced elements]
 *  [10.3.7 Absolutely positioned, non-replaced elements][10.3.7 Absolutely positioned_ non-replaced elements]
 *  [10.3.8 Absolutely positioned, replaced elements][10.3.8 Absolutely positioned_ replaced elements]
 *  [10.6.4 Absolutely positioned, non-replaced elements][10.6.4 Absolutely positioned_ non-replaced elements]

规范中提到了一个基本概念，我们先来了解一下。

# replaced elements & non-replaced elements #

css把html元素分为了两类：不可替换元素和可替换元素。

*  `1.不可替换元素`：

大部分的html元素都由闭合标签构成，如：

<div>this is my content</div>

上边的div的内容被嵌入在两个标签之间，这种元素就是可替换元素，因为它的内容就真真切切的现实在那里（就在闭合标签的内部）。

*  `2.可替换元素`：

有一些元素没有构成闭合标签，自然它的内容也不在标签内，而是由外部资源加载出来的，这种元素就是可替换元素（内容可由外部资源来替换）。例如img:

了解了概念后，我们回归主题。shrink-to-fit的情况有多种，这里介绍一种最常见的情况，即不可替代元素浮动时的自适应宽度（Floating, non-replaced elements），听起来有点抽象，但你可能经常遇到。先看一个例子：

html&css

<!DOCTYPE html>
    <html>
        <style type="text/css"> .outer { width: 800px; background: black; overflow: hidden; } .inner { float: left; background: red; } .sub1 { width: 26%; background: blue; } .sub2 { width: 50%; background: green; } </style>
    <head>
    </head>
    <body>
        <div class="outer">
            <div class="inner">
                <div class="sub1">
                    this is 1th line this is 2th line this is 3th line this is 4th line
                </div>
                <div class="sub2">
                    sub2 block
                </div>
    
            </div>
        </div>
    </body>
    </html>

这段样式定义了一个outer容器，背景为黑色且宽度为800px，它里面还有一个内部容器inner，无宽度且左浮动，inner里有两个小块sub1和sub2。

`那么问题来了，请问inner，sub1，sub2具体的宽度为多少？`

先看效果图再回答：

> ![shrink.png][]

结果应该会出乎你的意料：inner（红色背景）的宽度并不是outer（黑色背景）的宽度(正常情况下应该可以继承父容器的宽度)，因而sub1和sub2比我们预想的要小得多。

再回答这个问题之前，我们先试图修改一下，看能否从中找到出现这个问题的原因。经过调试，发现两种最简单的方案可以解决这个问题：

*  `1.给inner加宽度width: 100%;`
 *  `2.取消inner的浮动。`

解决后的效果如下：

> ![no-shrink.png][]

这的确是我们想要的，可这却巧妙地’躲’过了不可替换元素浮动这个场景。老实讲，我多次遇到过这个场景，但是无非也就是利用上述两个方案去尝试，可并不知晓真正的原因，于是还是啃了一下W3C有关这方面的规范，规范的描述如下：

> ![shrink-rule.png][]

首先不说英文的问题，单纯的’Roughly’和‘CSS 2.1 does not define the exact algorithm’这两句就让人哭笑不得，然后还给出了shrink-to-fit的一个公式：

*min(max(preferred minimum width, available width), preferred width)*

呵呵，然并卵啊，天知道这三个值怎么算。

再网上google一下，发现很多人都遇到这个问题，但也是读不懂规范，也有人把上面一段翻译了一下，大家可以看看：

> CSS2.1 并未给出 preferred minimum width、available width 和 preferred width 确切算法，通常，将内容中非明确的换行外的其他部分强制不换行来计算 preferred width；反之，尝试将内容尽可能的换行，以得到 preferred minimum width；available width 即该元素的包含块的宽度减去 ‘margin-left’，’border-left-width’，’padding-left’，’padding-right’，’border-right-width’，’margin-right’ 的值以及任何存在的纵向滚动条的宽度。

已被这段翻译绕晕的请举手。。。。。。。。。。。。。

再次回归主题，经过近一个小时的摸索，终于让我把这段难懂的英文捋顺了：

这里有三个参数，分别为：preferred minimum width, available width, preferred width.只需关心preferred width的计算方式即可，preferred width的计算方式如下：

`让元素内容强制不换行后的最大宽度即为shrink-to-fit后的宽度`

具体拿上面的例子，inner中的sub1的内容由于宽度不够被换行了，将其强制不换行算出的宽度就是inner自适应的宽度(inner本身没设宽度喔～)，如何强制不换行也很简单，慢慢的将sub1的宽度调大，就会发现调至100%时恰好足够用一行来现实其内容，这时内容的宽度就是inner自适应后的宽度。直接上图：

> ![shrink-test.png][]

总结：`对于浮动或者特殊的定位方式，推荐显式的设置容器宽度，避免出现意想不到的结果`

[查看Blog原文请戳此处][Blog]

[查看简书原文请戳此处][Link 1]

[10.3.5 Floating_ non-replaced elements]: http://www.w3.org/TR/CSS21/visudet.html#float-width
[10.3.7 Absolutely positioned_ non-replaced elements]: http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
[10.3.8 Absolutely positioned_ replaced elements]: http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width
[10.6.4 Absolutely positioned_ non-replaced elements]: http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height
[shrink.png]: https://kkkkkxiaofei.github.io/img/shrink/shrink.png
[no-shrink.png]: https://kkkkkxiaofei.github.io/img/shrink/no-shrink.png
[shrink-rule.png]: https://kkkkkxiaofei.github.io/img/shrink/shrink-rule.png
[shrink-test.png]: https://kkkkkxiaofei.github.io/img/shrink/shrink-test.png
[Blog]: https://kkkkkxiaofei.github.io/jekyll/update/2015/07/27/shrink.html
[Link 1]: http://www.jianshu.com/p/d0d8d2195572