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

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.不可替换元素：

大部分的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(自适应宽度)相关推荐

CSS 圣杯布局升级版---多个固定宽度一个自适应宽度
1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"><div class="main ...
CSS自适应宽度圆角按钮
CSS自适应宽度圆角按钮,背景图要使用满足最长按钮的宽度,然后通过两个标签a, span,一个通过背景图的左对齐,一个通过背景图的右对齐. <!DOCTYPE html PUBLIC " ...
[Winform]DataGridView列自适应宽度
引言在做winform项目中,数据控件DataGridView的使用多多少少是会用到的,如果不设置它的属性,默认情况下是不会自适应宽度的,你想查看某项的数据,就不得不将标题栏拖来拖去,挺烦的. 方法 ...
沫沫金：2014最新全浏览器兼容左列固定右列自适应宽度技巧大公开
做前端的人肯定会遇到经典的左列固定,右列自适应宽度的样式效果.这种想起来很简单做起来很麻烦的事情今天你有好方案了. --不要信那些什么左侧写固定宽度,右侧不用写宽度属性和浮动属性,浏览器自动就实现右列 ...
自适应宽度元素单行文本省略用法探究
单行文本省略是现代网页设计中非常常用的技术,几乎每个站点都会用到.单行文本省略适用于显示摘要信息的场景,如列表标题.文章摘要等.在响应式开发中,自适应宽度元素单行文本省略容易失效不起作用,对网页开发这 ...
CSS之左定宽度右自适应宽度并且等高布局
一.两列布局:左边固定宽度,右边自适应宽度方法1:浮动布局采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML: CSS: 上面这种实现方法最关 ...
html 图片高度页面高度自适应,怎样让网页图片高度自适应宽度
[摘要] 你肯定知道width百分比可以实现图片宽度的自适应,那么你知道高度也可以根据宽度变话而自适应比变化么,看下本文就了解了! 当前响应式布局,内容尺寸自适应设备是众多网站开发者的选择,毕竟现在显 ...
使用负边距创建自适应宽度的流体布局
随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题.目前国内门户很多都进行了改版,采用目前的主流–960px左右的宽度. 我认为 ...
uniapp图片自适应_uni-app下input组件基于内容自适应宽度的实现
1.需求设计图是'单价'编辑项是input,随输入内容自己改变,前后有而fix(如果单位'￥/片'放后面那就好做多了):但是uni-app的input组件是有自定宽度的,而且试了好多css都很难控制 ...
漂亮的自适应宽度的多色彩CSS图片按钮
一.素材二.效果三.CSS *{padding:0;margin:0}/*----------------------------------- 自适应宽度图片按钮 - ...

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

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

replaced elements & non-replaced elements

shrink-to-fit(自适应宽度)相关推荐

最新文章

热门文章