自适应：

撑满空闲空间与收缩到内容尺寸。

CSS3将这两种情况分别定义为'fill-availabel'和'fit-content'。

除此之外 ，还新增了更细粒度的'min-content'和'max-content'。这四个关键字可用于设置宽高属性。本文将详细介绍CSS3中的这四个自适应关键字

　　[注意]IE浏览器不支持，webkit内核浏览器需添加-webkit-前缀

fill-available

　　width:fill-available表示撑满可用空间

　　举例来说，页面中一个<div>元素，该<div>元素的width表现就是fill-available自动填满剩余的空间

　　出现fill-available关键字值的价值在于，可以让元素的100%自动填充特性不仅仅在block水平元素上，也可以应用在其他元素

fit-content

　　width:fit-content表示将元素宽度收缩为内容宽度

min-content

　　width:min-content表示采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度

max-content

　　width:max-content表示采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。如果出现文本，则相当于文本不换行

CSS3 ,fill-available、max-content、min-content、fit-content,自适应的更多相关文章

  1. 集合函数AVG，SUM，MAX，MIN

    需要计算这些值的平均值.使用函数AVG(),你可以返回一个字段中所有值的平均值. 假如你对你的站点进行一次较为复杂的民意调查.访问者可以在1到10之间投票,表示他们喜欢你站点的程度.你把投票结果保存在 ...

  2. 【转载】set_input_delay和set_output_delay的选项-max和-min的讨论

    转自:http://www.cnblogs.com/freshair_cnblog/archive/2012/09/12/2681060.html 一.存在背景分析 文档的说法是,set_input_ ...

  3. Oracle bug 使用max或min函数into到一个char类型报字符缓冲区太小的错误

    这个BUG出现会报错如下: selectto_char(max(RENEWAL_DATE)) intoM_YEAR_MONTH fromt_renewal_schedule; ORA-06502: P ...

  4. iOS开发之AutoLayout中的Content Hugging Priority和 Content Compression Resistance Priority解析

    本篇博客的内容也不算太复杂,算是AutoLayout的一些高级的用法.本篇博客我们主要通过一些示例来看一下AutoLayout中的Content Hugging Priority以及Content C ...

  5. mvc 中Range中max和min值晚绑定

    对于Attribute : Range(min,max)的min和max必须在用的时候给,但是需求有时须要把这两个值存db.动态取出的.这时就须要razor帮忙了: @Html.TextBoxFor( ...

  6. SQL使用总结-like,MAX，MIN

    1. 时间索引不容许使用like 对时间索引适应like,会时间索引变成字符串操作,成为遍历动作,失去索引价值. 错误写法: EXPLAIN  SELECT AVG(data_value) AS av ...

  7. zip()函数，max()和min()，built-in function，import模块，read()，readlines()，write()，writelines()，with..as..文件处理方式

    zip()函数:将可迭代对象作为参数,将对象中的对应元素打包成一个个元组. #map()普通的输出例子 print(list(zip(('a','n','c'),(1,2,3)))) print(li ...

  8. 维护满足max(+ or -)min<=k的区间

    这是一种经典的单调栈+线段树的维护方法. 从左到右枚举右端点. 线段树维护每一个左端点的max(+ or -)min的值. 每次右端点移动的时候,把a[i]加入单调栈. 每弹栈一次,便在线段树上把对应 ...

  9. SQL中MAX()和MIN()函数的使用（比较字符串的大小）

    在SQL数据库中,最大/最小值函数—MAX()/MIN()是经常要用到的,下面就将为您分别介绍MAX()函数和MIN()函数的使用,供您参考,希望对您学习SQL数据库能有些帮助. 当需要了解一列中的最 ...

  10. Python之路Python内置函数、zip()、max()、min()

    Python之路Python内置函数.zip().max().min() 一.python内置函数 abs() 求绝对值 例子 print(abs(-2)) all() 把序列中每一个元素做布尔运算, ...

随机推荐

  1. 【BZOJ2809】【APIO2012】dispatching

    左偏树. 每个子节点维护大根堆,遍历一个儿子就往自己合并,合并发现钱不够了就删除队顶. //Achen #include<algorithm> #include<iostream&g ...

  2. js实现翻转一个字符串

    字符串作在程序中是非常常见的,因为程序中绝大部分的数据都可以当作字符串来处理.在这里介绍几种翻转字符串的方法. (1)使用字符串函数 //使用数组翻转函数 function reverseString ...

  3. LintCode刷题笔记-- BackpackII

    标记: 动态规划 问题描述: Given n items with size Ai, an integer m denotes the size of a backpack. How full you ...

  4. yii常用操作数据

    yii常用操作数据.php <?php defined('YII_DEBUG') or define('YII_DEBUG', true); //当在调试模式下,应用会保留更多日志信息,如果抛出 ...

  5. c中函数指针和回调函数

    函数指针: 指向函数的指针.(定义的函数会分配一块内存,同变量一样存在首地址)示例如下: int Func(int x); /*声明一个函数*/ int (*p) (int x); /*定义一个函数指 ...

  6. ConvertJavaMiliSecondToDateTime

    private static DateTime ConvertJavaMiliSecondToDateTime(long javaMS)        {            DateTime UT ...

  7. Directx11教程(64) tessellation学习(6)-PN Triangles

    原文:Directx11教程(64) tessellation学习(6)-PN Triangles       前面我们用tessellation细分三角形或者四边形,产生的细分点都是在三角形或四边形 ...

  8. maven的配置和使用

    Maven 简介 1.1 Maven 是什么 翻译为“专家”,“内行” Maven是跨平台的项目管理工具.主要服务于基于Java平台的项目构建,依赖管理和项目信息管理. 1.2 为什么使用Maven ...

  9. objectarx之两条曲线最短距离

    double CCommonFuntion::GetLineDistance(AcDbObjectId& Line1, AcDbObjectId& Line2){ AcGeLineSe ...

  10. python系列之（3）爬取豆瓣图书数据

    上次介绍了beautifulsoup的使用,那就来进行运用下吧.本篇将主要介绍通过爬取豆瓣图书的信息,存储到sqlite数据库进行分析. 1.sqlite SQLite是一个进程内的库,实现了自给自足 ...