自适应：

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

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. JavaScript-JQ初探实现自定义滚动条

    这是一个基本实现思路,如果有新手和我一样没什么事,喜欢瞎研究话,可以参考下. 一.Html <div class="scroll_con"> <div class ...

  2. idea展开和折叠方法的快捷键

    Ctrl+"+/-",当前方法展开.折叠 Ctrl+Shift+"+/-",全部展开.折叠

  3. OSGi教程：Class Space Consistency

    此教程基于OSGi Core Release 7 OSGi类空间的一致性 详细内容上面英文教程有详细解答 下面主要是一些个人见解,若有不当之处,欢迎指出: "Class space cons ...

  4. LUOGU P1081 开车旅行 （noip 2012）

    传送门 解题思路 这道题刚了一下午,主要就刚在set那里了.先写了一个暴力70分..之后优化预处理,看着大佬神犇们都用的什么双向链表之类的东西,本蒟蒻不会,又懒得手写平衡树,就拿了个set搞了搞,感觉 ...

  5. 清除SQL数据库文本字段中的回车、换行符的方法

    清除SQL数据库中文本字段的回车.换行符的方法 清除回车符: update tableName set columnName = rtrim(ltrim(replace(columnName ,cha ...

  6. JS更改字体颜色、背景颜色

    CSS 颜色十六进制值  http://www.w3school.com.cn/cssref/css_colorsfull.asp CSS background-color 属性 body { bac ...

  7. vue中is的作用和用法

    回顾vue官方文档的过程中发现了is这个特性,虽然以我的写代码风格实在用不上,不过还是记录一下这个知识点 is的作用 <ul> <li></li> <li&g ...

  8. java jsp j2ee

    1. JavaScript用于编写嵌入在网页文档中的程序,它由浏览器负责解释和执行,可以在网页上产生动态的显示效果和实现与用户交互的功能,譬如,让一串文字跟着鼠标移动,让一个图标在网页漂浮移动,验证用 ...

  9. Leetcode925.Long Pressed Name长按键入

    你的朋友正在使用键盘输入他的名字 name.偶尔,在键入字符 c 时,按键可能会被长按,而字符可能被输入 1 次或多次. 你将会检查键盘输入的字符 typed.如果它对应的可能是你的朋友的名字(其中一 ...

  10. iOS 9 学习系列：Storyboard References

    http://www.cocoachina.com/ios/20150922/13474.html 如果你曾经使用 interface builder 创建过一个复杂.界面非常多的应用,你就会明白最后 ...