自适应：

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

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. Poj 2104区间第k大（归并树）

    题目链接 K-th Number Time Limit: 20000MS Memory Limit: 65536K Total Submissions: 36890 Accepted: 11860 C ...

  2. ICP算法（迭代最近点）

    参考博客:http://www.cnblogs.com/21207-iHome/p/6034462.html 最近在做点云匹配,需要用c++实现ICP算法,下面是简单理解,期待高手指正. ICP算法能 ...

  3. PrintStream 类

    5.PrintStream类(重点) (1)基本概念 java.io.PrintStream类用于打印各种数据内容.   (2)常用的方法 PrintStream(OutputStream out) ...

  4. 从零起步 系统入门Python爬虫工程师

    从零起步 系统入门Python爬虫工程师 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大家看的 ...

  5. Centos7搭建Django出现的问题(Centos7+Django1.11.1+Nginx+uwsgi)

    出现的问题: 1.pip未安装:http://www.cnblogs.com/fnng/p/3737964.html 2.安装uwsgi失败,因为未安装python-devel yum search ...

  6. Mysql+php报错原因

    SQL syntax --语法错误,看near,错误会在near后引号中的内容 的附近 Table/Database....... dosen't existes ---表/库(库名/表名) 不存在 ...

  7. Python比较有用的小语法

    额,这是在Codeforces做题的时候从Virtual judge那儿学的 #ord()内置函数,将单个字符变为int#chr()内置函数,将int变为单个字符# for : else ( 或 wh ...

  8. 【JZOJ4793】【GDOI2017模拟9.21】妮厨的愤怒

    题目描述 栋栋和标标都是厨力++的妮厨.俗话说"一机房不容二厨",他们两个都加入了某OI( )交流♂( )群,在钦定老婆的时候出现了偏差,于是闹得不可开交.可是栋栋是群内的长者,斗 ...

  9. java读取项目路径下的中文文件乱码问题

    出现乱码错误: 处理方案: 对文件路径中存在中文的,都要进行URLDecoder.decode(path,"UTF-8")编码转换 wordContent = URLEncoder ...

  10. git reset三种模式

    reset三种模式区别和使用场景 区别: --hard:重置位置的同时,直接将 working Tree工作目录. index 暂存区及 repository 都重置成目标Reset节点的內容,所以效 ...