CSS揭秘--笔记--自适应内部元素
来源:互联网 发布:vnr更新网络 编辑:程序博客网 时间:2024/06/02 02:27
结构代码如下
<p>some text.....</p><figure> <img src="***.jpg"/> <figcaption> there have some text.... </figcaption></figure><p>some text...</p>
CSS内部与外部尺寸模型是一个较新的规范,它为width和height属性定义了一些新的关键字,例如我们这里使用的min-content.这个关键字将解析为这个容器内部最大不可断行元素的宽度(css魔法翻译为最大,我觉得是最小的不可断行的元素宽度。)
规范原文
min-content size
The smallest size a box could take that doesn’t lead to overflow that could be avoided by choosing a larger size. (See §4 Intrinsic Size Determination.)
min-content inline size
The narrowest inline size a box could take that doesn’t lead to inline-dimension overflow that could be avoided by choosing a larger inline size. Roughly, the inline size that would fit around its contents if all soft wrap opportunities within the box were taken.
现在使用两行简单的css代码就可以吧figure设置为恰当的宽度,并让他水平居中
figure{width:min-content;margin:auto;}
demo在下面网址
play.csssecrets.io/intrinsic-sizing
为了给旧版本提供一个平稳的回退样式,我们可以在使用这个技巧的同事,提供一个固定的max-width值
figure{max-width:300px;max-width:min-content;margin:auto;}figure > img{max-width:inherit;}
当浏览器支持min-content时,后一条的max-width声明会覆盖前一条,如果figure的尺寸是由内部因素决定时,第二条规则中的max-width:inherit就不会生效了。
- CSS揭秘--笔记--自适应内部元素
- 《css揭秘》阅读笔记
- css 背景图片自适应元素大小
- CSS揭秘--笔记--滚动提示
- 《css揭秘》-学习笔记1
- CSS布局--左侧自适应母元素高度
- 表单元素的css样式,自适应屏幕
- css布局--父级元素高度自适应
- css元素背景图片自适应屏幕大小
- div+css让div内部元素均匀分布
- CSS揭秘--笔记--扩大可点击区域
- 《css揭秘》学习笔记(一)
- 《css揭秘》学习笔记(二)
- CSS 内联元素和块级元素内部布局规则
- CSS学习笔记-块状元素-行间元素
- 用CSS伪元素实现自适应布局表格
- CSS学习笔记-CSS 伪元素
- 纯CSS设计div内部元素水平垂直居中
- VS程序发布
- android复习路之类的加载篇
- SOLR:APACHE版solr环境搭建及作为Hbase二级索引使用
- 【C++】NULL指针、零指针、空指针、野指针
- PAT_乙级 1019 数字黑洞
- CSS揭秘--笔记--自适应内部元素
- 线段树
- Android上在两个Activity之间传递Bitmap对象
- Scanner 的next() 与nextline()
- 深度优先搜索 (DFS)
- java的字符串类型
- MySQL
- zgrep 与 grep 区别
- Java多线程总结