自适应：

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

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. bzoj4974: [Lydsy八月月赛]字符串大师

    传送门 题目可转换为已知一个串kmp之后的nxt数组,求字典序最小的原串. 已知第i位结尾的串循环节长度位x,那么nxt[i]=i-x; 当nxt不为0时,s[i]=s[nxt[i]]; nxt为0时 ...

  2. selenium(6)：通过多种定位方式还是不能成功定位的原因

    场景:在成功修改密码后,会弹出一个修改成功的提示.通过id.xpath.class.css方式定位后,执行到这一步时候,就会出现错误. 原因:仔细检查了下代码,发现在提交修改的操作到修改成功的提示之间 ...

  3. LintCode刷题笔记-- LongestCommonSquence

    标签:动态规划 题目描述: Given two strings, find the longest common subsequence (LCS). Your code should return ...

  4. JS中浏览器兼容问题

    body的子节点IE 火狐 显示3个  其他显示7个 float浮动中的兼容 link 操作外联的兼容

  5. PyCharm2019 永久激活

    <!-- 2019激活码 2019-06-21新更新 --> D00F1BDTGF-eyJsaWNlbnNlSWQiOiJEMDBGMUJEVEdGIiwibGljZW5zZWVOYW1l ...

  6. rqnoj86 智捅马蜂窝

    题目描述 背景 为了统计小球的方案数,平平已经累坏了.于是,他摘掉了他那800度的眼镜,躺在树下休息. 后来,平平发现树上有一个特别不一样的水果,又累又饿的平平打算去把它摘下来. 题目描述 现在,将大 ...

  7. 封装好的MySQL.class.php类

    封装好的MySQL.class.php类 作用:数据库操作类 <?php header('content-type:text/html;charset=utf-8'); class MySQLD ...

  8. PHP实现redis限制单ip、单用户的访问次数功能

    本文实例讲述了PHP实现redis限制单ip.单用户的访问次数功能.分享给大家供大家参考,具体如下: 有时候我们需要限制一个api或页面访问的频率,例如单ip或单用户一分钟之内只能访问多少次 类似于这 ...

  9. php7 新内容

    1.use增强 以thinkphp5.0为例 namespace app\home\controller;use think\{Loader,Controller,Captcha,Request}; ...

  10. 2013年山东省第四届ACM大学生程序设计竞赛E题:Alice and Bob

    题目描述 Alice and Bob like playing games very much.Today, they introduce a new game. There is a polynom ...