您好,欢迎来到尚佳旅游分享网。
搜索
您的当前位置:首页分享Shrinktofit(自适应宽度)的用法和实例教程

分享Shrinktofit(自适应宽度)的用法和实例教程

来源:尚佳旅游分享网

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

  • 10.3.5 Floating, non-replaced elements

  • 10.3.7 Absolutely positioned, non-replaced elements

  • 10.3.8 Absolutely positioned, replaced elements

  • 10.6.4 Absolutely positioned, non-replaced elements

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

    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>
     <p class="outer">
     <p class="inner">
     <p class="sub1">
     this is 1th line this is 2th line this is 3th line this is 4th line
     </p>
     <p class="sub2">
     sub2 block
     </p>
    
     </p>
     </p>
    </body>
    </html>

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

    那么问题来了,请问inner,sub1,sub2具体的宽度为多少?

    先看效果图再回答:


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

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

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

  • 2.取消inner的浮动。

  • 解决后的效果如下:


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


    首先不说英文的问题,单纯的'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自适应后的宽度。直接上图:



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

    查看Blog原文请戳此处

    【相关推荐】

    1. 免费css在线视频教程

    2. css在线手册

    3. php.cn独孤九贱(2)-css视频教程

    Copyright © 2019- shangjiatang.cn 版权所有 湘ICP备2022005869号-4

    违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

    本站由北京市万商天勤律师事务所王兴未律师提供法律服务