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

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

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

replaced elements & non-replaced elements

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

  • 1.不可替换元素：

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

<div>this is my content</div>

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

  • 2.可替换元素：

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

<img src="1.jpg">

了解了概念后，我们回归主题。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详细的宽度为多少？

先看效果图再回答：

结果应该会出乎你的意料：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本身没设宽度喔～)，怎样强制不换行也非常easy。慢慢的将sub1的宽度调大，就会发现调至100%时恰好足够用一行来现实其内容。这时内容的宽度就是inner自适应后的宽度。直接上图：

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

查看Blog原文请戳此处

查看简书原文请戳此处

shrink-to-fit(自适应宽度)的更多相关文章

  1. 从三栏自适应宽度布局到css布局的讨论

    如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...

  2. UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

    UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...

  3. JS实现自适应宽度的Tag切换

    效果体验:http://hovertree.com/texiao/js/3.htm 该效果使用纯JavaScript代码,实现TAB页切换效果,TAB标签根据内容自适应宽度,点击TAB标签切换内容页. ...

  4. RelativeLayout中的格局，自适应宽度布局

    RelativeLayout中的布局,自适应宽度布局 该图片中为android布局:总布局为 RelativeLayoutAtLeft 为居左 <TextView android:backgro ...

  5. Qt的tablewidget行列头自适应宽度

    Qt构造一个TableWidget后,窗口最大化后,列头默认不能自适应宽度,研究了一下,Qt提供了两种方式来处理这个问题,如下:   1. 使用horizontalHeader()->setRe ...

  6. [Winform]DataGridView列自适应宽度

    引言 在做winform项目中,数据控件DataGridView的使用多多少少是会用到的,如果不设置它的属性,默认情况下是不会自适应宽度的,你想查看某项的数据,就不得不将标题栏拖来拖去,挺烦的. 方法 ...

  7. ASP.NET实例——漂亮的自适应宽度的导航条（仿Discuz!）

    PHP比较成熟的开放的源代码比较多,比方说PrestaShop,比方说Discuz!...... 虽然语言不同,但基本原理是一样的,有时间的话读一读,对学习ASP.NET应该是非常有好处的(唉,什么时 ...

  8. 漂亮的自适应宽度的多色彩CSS图片按钮

    一.素材               二.效果 三.CSS *{padding:0;margin:0} /*----------------------------------- 自适应宽度图片按钮 ...

  9. CSS 圣杯布局升级版---多个固定宽度一个自适应宽度

    1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...

  10. 关于jqGrid组件表格无法自适应宽度问题

    今天生成了一个4列的表格,但是无法自适应宽度,使用 $(window).resize(function(){ $(window).unbind("onresize"); $(&qu ...

随机推荐

  1. Linux下 iptables防火墙 放开相关port 拒绝相关port 及查看已放开port

    我用的是fedora 14 1. 查看iptables 防火墙已经开启的port:/etc/init.d/iptables status [root@hzswtb2-mpc ~]#/etc/rc.d/ ...

  2. PHP-密码学算法及其应用-散列函数

    转自http://www.smatrix.org/bbs/simple/index.php?t5591.html /////////////////////////////////////////// ...

  3. django之整体复习

    1. 配置文件: media: avatar = models.FileField(upload_to='avatar') sessiongs MEDIA_ROOT=os.path.join(BASE ...

  4. [na]tcp的可靠性

  5. ngModelController的方法和属性的使用

    ngModelController方法 $render(); 当视图需要更新的时候会被调用.使用ng-model的指令应该自行实现这个方法. $isEmpty(value); 该方法用于判断输入值是否 ...

  6. iOS应用程序状态切换相关

    一.iOS应用程序状态机一共有五种状态: 1. Not running:应用还没有启动,或者应用正在运行但是途中被系统停止. 2. Inactive:当前应用正在前台运行,但是并不接收事件(当前或许正 ...

  7. C++static关键字用法

    一.static的作用有三种:限制变量或函数作用域.保持变量内容的持久.默认初始化为0 1.被static关键字修饰的全局函数或者变量具有文件作用域,即只在当前文件中可见. 2.被static修饰的变 ...

  8. cocosbuilder的一些坑

    主要是大小写问题 在扁平发布模式下,如果存在大小写不同的文件,文件会被替换掉.而模拟上运行没问题,在真机上运行 有问题.找了半天才发现,坑啊!

  9. notification 报错the method build() is undefined for the type Notificatin.Builder

    notification 报错the method build() is undefined for the type Notificatin.Builder 这事api版本号太低导致的 Notifi ...

  10. 数据库 Navicat_Premium_11.0.10 破解版下载安装

    下载地址:http://www.liangchan.net/soft/download.asp?softid=4785&downid=8&id=4804 破解说明:安装之后不要立即启动 ...