自适应宽度是指当未明白设定容器的宽度（或外边距设为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. WEP无线网络密码破解

    一,五分钟实现无线WEP入侵的特点: 众所周知WEP加密入侵需要用户通过监听等方法接收到足够数量的WEP验证数据包,然后通过分析软件使用暴力破解的方法穷举法还原出WEP加密密钥的明文信息.五分钟实现无 ...

  2. Python 实现小数和百分数的相互转换

    # -*- coding: utf-8 -*- #百分比转换位小数 # -*- coding: utf-8 -*- s = '20%' # 默认要转换的百分比是字符串aa = float(s.stri ...

  3. python开发者通过国内镜像安装pip包

    对于Python开发用户来讲,PIP安装软件包是家常便饭.但国外的源下载速度实在太慢,浪费时间.而且经常出现下载后安装出错问题.所以把PIP安装源替换成国内镜像,可以大幅提升下载速度,还可以提高安装成 ...

  4. AngularJS 中 Provider 的用法及区别

    在一个分层良好的 Angular 应用中,Controller 这一层应该很薄.也就是说,应用里大部分的业务逻辑和持久化数据都应该放在 Service 里. 为此,理解 AngularJS 中的几个 ...

  5. Django Drops

    1.Django Intro 2.Django Install (1) PIP安装 sudo apt-get isntall python-pip sudo pip install Django (2 ...

  6. OpenCV2马拉松第24圈——轮廓提取

    计算机视觉讨论群162501053 转载请注明:http://blog.csdn.net/abcd1992719g/article/details/27979267 收入囊中 在图片中找到轮廓而且描绘 ...

  7. 深入浅出ObjC之消息 （转）

    在入门级别的ObjC 教程中,我们常对从C++或Java 或其他面向对象语言转过来的程序员说,ObjC 中的方法调用(ObjC中的术语为消息)跟其他语言中的方法调用差不多,只是形式有些不同而已. 譬如 ...

  8. Confluence - Online Team Collaboration Tool

    Confluence - 在线的团队协作沟通工具,包含 meeting 管理, wiki 等等功能 https://www.atlassian.com/software/confluence

  9. atitit.软件开发--socket框架选型--netty vs mina j

    atitit.软件开发--socket框架选型--netty vs mina j . Netty是由JBOSS提供的一个java开源框架 Apache mina 三.文档比较 mina文档多,,, 好 ...

  10. android自定义控件(1)-自定义控件属性

    那么还是针对我们之前写的自定义控件:开关按钮为例来说,在之前的基础上,我们来看看有哪些属性是可以自定义的:按钮的背景图片,按钮的滑块图片,和按钮的状态(是开还是关),实际上都应该是可以在xml文件中直 ...