CSS3 最小内容尺寸(min-content size)和最大内容尺寸(max-content size)简介
2016-01-18 19:04
776 查看
CSS sizing level3规范中,和布局尺寸相关内容,经常会出现min-content size和max-content size等术语。
这需要分为两类:一类是和块元素相关,一类是和行内元素相关。
1. min-content inline size
最小内容行内尺寸表示在尽可能使用软性(即非硬性指定)包含技术(比如自动换行)后,刚好包含了元素内容而不出现溢出的尺寸。
2. max-content inline size
和min-content inline size不同,最大内容行内尺寸表示在不使用任何软性包含技术时,在单行内(除非使用硬性换行)刚好包含了元素内容而不出现溢出的尺寸。
3. max-content block size 和 min-content block size
对于块元素而言,这两者是等同的。
4. max-content contribution 和 min-content contribution
最大内容贡献和最小内容贡献分别对应于max-content, min-content size,
只不过在此之上,还需要计算入内外边距(margin/padding)以及边界(border)的尺寸。
理解这些术语,对于掌握CSS3新引入的网格布局,弹性布局技术都是有帮助的。
自己试一试 有一个直观的印象。
by iefreer
这需要分为两类:一类是和块元素相关,一类是和行内元素相关。
1. min-content inline size
最小内容行内尺寸表示在尽可能使用软性(即非硬性指定)包含技术(比如自动换行)后,刚好包含了元素内容而不出现溢出的尺寸。
2. max-content inline size
和min-content inline size不同,最大内容行内尺寸表示在不使用任何软性包含技术时,在单行内(除非使用硬性换行)刚好包含了元素内容而不出现溢出的尺寸。
3. max-content block size 和 min-content block size
对于块元素而言,这两者是等同的。
4. max-content contribution 和 min-content contribution
最大内容贡献和最小内容贡献分别对应于max-content, min-content size,
只不过在此之上,还需要计算入内外边距(margin/padding)以及边界(border)的尺寸。
理解这些术语,对于掌握CSS3新引入的网格布局,弹性布局技术都是有帮助的。
自己试一试 有一个直观的印象。
by iefreer
相关文章推荐
- CSS练习02
- W3School-CSS 分类 (Classification) 实例
- css 常用样式命名规则
- css选择器
- CSS3动画基本的转换和过渡
- css三种样式引入方法,html链接,html中<table>的使用方法
- 纯CSS控制背景图片100%自适应填充布局
- CSS3.0盒模型display:-webkit-box;的使用
- css3 中transition监听事件
- css3 动画中display none
- input输入框的各种样式 文本框为下划线 text输入框样式
- css渐变按钮等
- 全动态Portlet点击后选中样式
- 全动态Portlet点击后选中样式
- css命名规范总结
- 用CSS3来添加项目编号
- [转]css讲解 font-weight:bold和bolder区别
- css3 之rem 的使用
- CSS3属性transform详解
- CSS实现背景渐变(gradient)多兼容