css3里有四个属性，用来实现以内容为主的尺寸计算方式，intrinsic sizing

其中 fill 关键字，需要加浏览器前缀，并拼接available， 比如width: -webkit-fill-available;

下面一张图形象的体现了四个属性的表现

需要提一下的是：max-content 和fit-content， 当元素内容没有超出行宽的时候，最终的宽度都是内容的宽度。而超出行宽的时候，max-content的表现是不换行，出现横向滚动条，fit-content的表现是会换行。

更多介绍，可以点击下面链接看看

推荐博客：https://www.cnblogs.com/xiaohuochai/p/7210540.html

参考网址：https://googlechrome.github.io/samples/css-intrinsic-sizing/

css3 min-content，max-content，fit-content, fill属性的更多相关文章

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

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

  2. Linq查询Count、Sum、Min、Max、Average

    原文地址:Linq——Count.Sum.Min.Max.Average作者:mousekitty Linq查询之Count.Sum.Min.Max.Average using System; usi ...

  3. Min and Max

    Min and Max 需要处理不同数据类型; 另外*args, 表示的是位置参数, *kwargs表示的是key参数, args的类型为tuple类型, 参数为min(3, 2)时, args为(3 ...

  4. 5.7.2.2 min()和max()方法

    Math对象还包含许多方法,用于辅助完成简单和复杂的数学计算. 其中,min()和max()方法用于确定一组数值中的最小值和最大值.这两个方法都可以接受任意多个数值参数,如下例子: var max = ...

  5. C语言：min和max头文件

    转自:http://www.cppblog.com/jince/archive/2010/09/14/126600.html min和max头文件 虽然说求最大值最小值函数在哪个头文件下并不是非常重要 ...

  6. 随机获取min和max之间的一个整数

    // 随机获取min和max之间的一个整数 const randomNum = (Min, Max) => { let Range = Max - Min; let Rand = Math.ra ...

  7. JS单体内置对象之Math常用方法（min，max，ceil，floor，round，random等）

    1.min()和max()方法 Math.min()用于确定一组数值中的最小值.Math.max()用于确定一组数值中的最大值. alert(Math.min(2,4,3,6,3,8,0,1,3)); ...

  8. mysql中min和max查询优化

    mysql max() 函数的需扫描where条件过滤后的所有行: 在测试环境中重现: 测试版本:Server version:         5.1.58-log MySQL Community ...

  9. min cost max flow算法示例

    问题描述 给定g个group,n个id,n<=g.我们将为每个group分配一个id(各个group的id不同).但是每个group分配id需要付出不同的代价cost,需要求解最优的id分配方案 ...

  10. Visual C++中min()和max()函数的使用

    标准库在<algorithm>头中定义了两个模板函数std::min() 和 std::max().通常用它可以计算某个值对的最小值和最大值. 可惜在 Visual C++ 无法使用它们, ...

随机推荐

  1. webbench高并发测试

    安装ctags sudo apt-get install ctags 安装webbench 下载webbench http://home.tiscali.cz/~cz210552/distfiles/ ...

  2. L1-044. 稳赢

    这种题不是考思维,就是考你细心程度还有基础知识的,代码如下: #include <iostream> #include <string> using namespace std ...

  3. C#_方法的重载

    方法的重载是一种操作性多态,有的时候,可能需要在多个不同的实现中对不同的数据执行相同的逻辑操作,以writeline方法为例,有时可能想他传递一个整数.两者的具体实现肯定是不同的,但在逻辑上,这个方法 ...

  4. The content of element type "web-app" must match "(icon?,display-name?,description?,distributable?,context-param*,filter*,filter-mapping*,listener*,servlet*,servlet- mapping*,session-config?,mime-map

    修改了一下web.xml,加入了一个<filter>,然后就报这样的错??? The content of element type "web-app" must ma ...

  5. [JS]计算字符串中出现最多的字符和其出现次数

    这是一道面试题 此处是利用Obj来解决的,当然不只此一种方法. //思路:遍历数组,拿到一个字符,并将之以 "字符":出现次数 的key:value形式存到对象中. //如果此字符 ...

  6. vue-cli3快速创建项目

    文档:https://cli.vuejs.org/zh/guide/ 条件: npm 更至最新 node >=8.9 1.全局安装 npm install -g @vue/cli 或 yarn ...

  7. 关于JS历史

      js由来        95年那时,绝大多数因特网用户都使用速度仅为28.8kbit/s 的“猫”(调制解调器)上网,但网页的大小和复杂性却不断增加.为完成简单的表单验证而频繁地与服务器交换数据只 ...

  8. bitbucket工程改名导致 repository does not exist. fatal: Could not read from remote repository.

    在bitbucket上把工程改名了,就忘了. 结果同步时报错. 先在本地查看一下 git remote -v 果然是工程的老名字 origin git@bitbucket.org:XXX/oldnam ...

  9. 最短路径遍历所有的节点 Shortest Path Visiting All Nodes

    2018-10-06 22:04:38 问题描述: 问题求解: 本题要求是求遍历所有节点的最短路径,由于本题中是没有要求一个节点只能访问一次的,也就是说可以访问一个节点多次,但是如果表征两次节点状态呢 ...

  10. SQL语句内做除法得出百分比

    保留两位小数点 SELECT ROUND(CAST(field1 AS DOUBLE)/field2, 2) * 100 FROM TB; 不保留 SELECT CAST(field1 AS FLOA ...