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

C++,自适应宽度是指当未明朗设定容器的涨幅(或异地距设为auto)时,在一定的气象下容器的增进率会根据情形自行设定,而设定的结果往往并不是大家想要的。

W3C规范中描述了二种shrink-to-fit的事态

规范中涉及了一个基本概念,大家先来打探一下。

replaced elements & non-replaced elements

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

  • 1.可替换元素

CSS 里,可替换元素是如此有些因素,
其变现不是由CSS来决定的。这么些外部因素的突显不依靠于CSS规范。
典型的可替换元素有 img、 object、 video 以及
textarea、input那样的表单元素。 一些元素,比如audio和 canvas
,只在一些与众不一致境况下是可替换元素。 使用了 CSS content
属性插入的目的被称作匿名的可替换元素。

  • 2.不可替换元素

反之,则为不可替换元素。

打探了定义后,我们回归正题。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具体的宽度为多少?

先看效果图再回复:

C++ 1

结果应该会当先你的预想:inner(红色背景)的肥瘦并不是outer(藏粉色背景)的大幅度(正常情形下相应可以继续父容器的增幅),因此sub1和sub2比我们预料的要小得多。

再回复这么些题材此前,大家先总括修改一下,看行不行从中找到出现这么些难题的由来。经过调试,发现三种最简便易行的方案能够化解这一个标题:

  • 1.给inner加宽度width: 100%;

  • 2.取消inner的浮动。

化解后的法力如下:

C++ 2

那确实是大家想要的,可那却巧妙地’躲’过了不可替换元素浮动这些现象。老实讲,我反复赶上过这一个景况,不过一味也就是采纳上述多个方案去尝尝,可并不了然真正的缘故,于是仍然啃了须臾间W3C有关那上边的正经,规范的讲述如下:

C++ 3

第一不说英文的难题,单纯的’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自适应后的幅度。直接上图:

C++ 4

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

翻看Blog原文请戳此处