码迷,mamicode.com
首页 > Web开发 > 详细

CSS3 最小内容尺寸(min-content size)和最大内容尺寸(max-content size)简介

时间:2016-01-19 10:43:48      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:

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

CSS3 最小内容尺寸(min-content size)和最大内容尺寸(max-content size)简介

标签:

原文地址:http://blog.csdn.net/iefreer/article/details/50536851

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!