摘要：到目前为止，有几种方法可以实现。通过设置浮动，可以实现元素折叠。将元素写死一个宽度，但这使得元素固定并失去响应特性。用来帮忙我们最终就是要找到最优的图片容器的宽度以最达到最好的适应内部图片的目的。
前言
设计师可以分为如下两类：
先做好设计，然后将内容放入静态框架中
优秀的设计师充分考虑内容的各个方面及其上下文，并创建适合于内容的设计
HTML原生就是响应式的（HTML内容在视口内流式的分布）。随着CSS的广泛应用，设计者创建了许多固定布局的“盒子”并把内容强制的放在盒子之中，这有悖于HTML原生响应的特性。
过去几年出现了一场革命，包括自适应设计，响应式设计，移动优先设计等。所有这些思想最根本部分就是优先考虑内容。CSS3也因此定义和实现一些新的属性。其中就包括内在和外在的宽度（intrinsic and extrinsic width values）。
引入问题我们以一个常规的 WEB 页面设计问题（figure 元素内的图片）来引出问题并加以说明。
www.30ke.cn 三十客 - 一个专注于前端学习和分享的网站。
因为figure是块级标记，所以元素一直延伸到至整个容器中。 在以内容优先的设计中，我们通常希望容器 (本例中为 figure元素) 尽可能小。 到目前为止，有几种方法可以实现。
figure {
float: left;
}
通过设置浮动，可以实现 figure 元素折叠。但是如果 figure 中的 p （段落）元素宽于图片宽度，则figure元素会收缩至最宽的子元素，而不是图片的宽度。
使用display: inline-block 或 table-cell 同样有上述问题。
figure {
width: 500px;
}
将 figure 元素写死一个宽度，但这使得元素固定并失去响应特性。
用 min-width 来帮忙我们最终就是要找到最优的图片容器的宽度以最达到最好的适应内部图片的目的。如果内部的文本换行显示也没关系。
我们可以通过 min-content 来达到目的。尽管该值 2006 年就出现了，但还处在实验阶段，因此需要添加不同浏览器前缀。
figure {
border: 2px solid black;
background: #cae9b8;
margin: 0;
width: -moz-min-content;
width: -webkit-min-content;
width: min-content;
}
上述代码，很好的解决了上述问题。而且 margin 和 padding 在图片容器内部仍然有效。
min-content 是内在和外在的宽高系列值中的一个，其它还包括 max-content ， fit-content等。这些值和 flexbox ，grid 和其它布局系统，使得WEB设计更优秀更灵活。
min-content 的支持性很好，所有现代主流浏览器都支持该值，但是 Internet Explorer and Opera Mini 并不支持。
因此我们借助 max-widht 实现了回退的方案。
figure {
max-width: 500px;
max-width: min-content;
}
完整的带回退的显示方案见如下演示程序：
在线演示程序
本文主要汇编自 Dudley Storey 的一篇博客，并加入了针对Internet Explorer and Opera Mini 的回退方案。但是因为本人水平有限，文中难免存在描述不清，代码不完善等问题，还请大家多多予以批评指正！
参考文献CSS Intrinsic & Extrinsic Sizing Module Level 3
Design From the Inside Out With CSS Min-Content
play.csssecrets.io/
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113687.html
摘要：到目前为止，有几种方法可以实现。通过设置浮动，可以实现元素折叠。将元素写死一个宽度，但这使得元素固定并失去响应特性。用来帮忙用来帮忙我们最终就是要找到最优的图片容器的宽度以最达到最好的适应内部图片的目的。前言 设计师可以分为如下两类： 先做好设计，然后将内容放入静态框架中 优秀的设计师充分考虑内容的各个方面及其上下文，并创建适合于内容的设计 HTML原生就是响应式的（HTML内容在视口内...
摘要：实际上表示视口宽度的，而不是。同样，表示视口高度的当视口宽度小于高度时，等于，否则等于。基于的方法这种应该算是最佳的解决办法实现方法当使用布局时，使用在水平和垂直方向都会居中。 1.自适应内部元素 在css中，不给元素一个height值时，元素会自适应其内部的元素高度，有时我们想让元素的宽度也达到此效果，应用场景如下。 如下当前的这种布局，想要改成最外层的div的宽度由当前的图片撑开的...
摘要：简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验下面我介绍哪些或许你不知道小技巧。默认为，此时阴影与元素同样大。如果没有指定，则由浏览器决定通常是的值，不过目前取透明。首先，我们要明白这里的最小宽度值是什么意思。 暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。...
摘要：简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验下面我介绍哪些或许你不知道小技巧。默认为，此时阴影与元素同样大。如果没有指定，则由浏览器决定通常是的值，不过目前取透明。首先，我们要明白这里的最小宽度值是什么意思。 暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。...
摘要：简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验下面我介绍哪些或许你不知道小技巧。默认为，此时阴影与元素同样大。如果没有指定，则由浏览器决定通常是的值，不过目前取透明。首先，我们要明白这里的最小宽度值是什么意思。 暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。...
阅读 2846·2021-09-28 09:36
阅读 3936·2021-09-22 15:52
阅读 3630·2021-09-06 15:00
阅读 1947·2021-09-02 15:40
阅读 2797·2021-09-02 15:15
阅读 3453·2021-08-17 10:15
阅读 2781·2019-08-30 15:53
阅读 2072·2019-08-29 18:39
