使用min-content实现容器宽度自适应于内部元素
发布日期:2021-09-04 18:45:14 浏览次数:1 分类:技术文章

本文共 1473 字,大约阅读时间需要 4 分钟。

前言

设计师可以分为如下两类:

  • 先做好设计,然后将内容放入静态框架中
  • 优秀的设计师充分考虑内容的各个方面及其上下文,并创建适合于内容的设计

HTML原生就是响应式的(HTML内容在视口内流式的分布)。随着CSS的广泛应用,设计者创建了许多固定布局的“盒子”并把内容强制的放在盒子之中,这有悖于HTML原生响应的特性。

过去几年出现了一场革命,包括自适应设计,响应式设计,移动优先设计等。所有这些思想最根本部分就是优先考虑内容。CSS3也因此定义和实现一些新的属性。其中就包括内在和外在的宽度(intrinsic and extrinsic width values)。

引入问题

我们以一个常规的 WEB 页面设计问题(figure 元素内的图片)来引出问题并加以说明。

www.30ke.cn

三十客 - 一个专注于前端学习和分享的网站。

figure默认显示效果

因为figure是块级标记,所以元素一直延伸到至整个容器中。 在以内容优先的设计中,我们通常希望容器 (本例中为 figure元素) 尽可能小。 到目前为止,有几种方法可以实现。

figure {    float: left;}

figure默认显示效果

通过设置浮动,可以实现 figure 元素折叠。但是如果 figure 中的 p (段落)元素宽于图片宽度,则figure元素会收缩至最宽的子元素,而不是图片的宽度。

使用display: inline-blocktable-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;}

上述代码,很好的解决了上述问题。而且 marginpadding 在图片容器内部仍然有效。

min-content 是内在和外在的宽高系列值中的一个,其它还包括 max-contentfit-content等。这些值和 flexboxgrid 和其它布局系统,使得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 的回退方案。但是因为本人水平有限,文中难免存在描述不清,代码不完善等问题,还请大家多多予以批评指正!

参考文献

转载地址:https://blog.csdn.net/weixin_34221112/article/details/89663699 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:几道密码题练习记录
下一篇:gif-drawable的使用及详解

发表评论

最新留言

初次前来,多多关照!
[***.217.46.12]2024年03月29日 01时34分35秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

mysql 行转列 显示_mysql 行转列 (结果集以坐标显示) 2019-04-21
由于连接方在一段时间后没有正确答复或连接的主机_新风换气机使用效果不佳,为何?掌握正确使用方法就好了... 2019-04-21
mysql 查询姓王_MySQL查询语句练习题,测试足够用了 2019-04-21
mysql多实例脚本_mysql多实例脚本 2019-04-21
python如何生成excel文件夹_用python脚本通过excel生成文件夹树结构 2019-04-21
python获取post请求中的所有参数_Django从POST reques获取请求参数 2019-04-21
mysql加密复制_MySQL主从复制使用SSL加密 2019-04-21
python启动远端 exe_python打包exe开机自动启动的实例(windows) 2019-04-21
java当前路径_java获取当前路径的几种方法 2019-04-21
java web传递参数_Javaweb的八种传值方式 2019-04-21
java gui支持的包有哪两个_Java GUI 2019-04-21
java list详解_java集合List解析 2019-04-21
java坐标代码_java实现计算地理坐标之间的距离 2019-04-21
kettle调用java程序_Kettle ETL调用 java代码来进行数据库的增删改查 2019-04-21
mysql 取两个时间差 php_在php和MySql中计算时间差的方法详解 2019-04-21
mysql 重启数据库实例_mysql 单机多实例重启数据库服务 2019-04-21
collator java_Java Collator getInstance(Locale)用法及代码示例 2019-04-21
dtc mysql_DTCC归来-高可用可扩展数据库架构探讨 2019-04-21
java怎样将日期本土化_Java中的日期操作 2019-04-21
java生产者消费者模型到精通_java生产者消费者模型 2019-04-21