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. 关于vue的语法规则检测报错问题

    搭建了一个vue项目,在配置路有的时候,陆续出现了各种报错其中最多的是一些写法,例如空格,缩进,各种括号,结果我一句一句对照,修改相当之费时间,效率低,一上午,一个路由配置都没写好 主要报错如下: 截 ...

  2. Wannafly挑战赛19 B矩阵

    矩阵 思路: 预处理好前缀和,枚举上边界和下边界,将二维变成一维,用单调队列找满足题意的最小前缀 复杂度,O(r*r*c) 代码: #pragma GCC optimize(2) #pragma GC ...

  3. python 自动化测试Jenkins 持续集成

    一直在做 python 自动化测试,但是脚本的执行之前是运维来维护的,通过 saltstack, 自己并未做过多的研究,后续可以研究一下 saltstack. 今天先研究一下使用 github 管理项 ...

  4. Axure RP 8 下载 激活可以使用的授权码、用户名、秘钥等

    百度云下载地址: 链接:https://pan.baidu.com/s/13z0IPsKbLdPktiCD5eUe-A 提取码: oxhw 用户名: axureuser 序列号: 8wFfIX7a8h ...

  5. （转）C# Assembly.Load 使用

    在C#中,我们要使用反射,首先要搞清楚以下命名空间中几个类的关系: System.Reflection命名空间(1)  AppDomain:应用程序域,可以将其理解为一组程序集的逻辑容器(2)  As ...

  6. LeetCode--155--最小栈(java版)

    设计一个支持 push,pop,top 操作,并能在常数时间内检索到最小元素的栈. push(x) -- 将元素 x 推入栈中. pop() -- 删除栈顶的元素. top() -- 获取栈顶元素. ...

  7. 跨域和jsonp的原理

    什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制. 所谓同源是指,域名,协议,端口均相同,不明白没关系,举个栗子: h ...

  8. Oracl 12c (课本)

    一.安装和部署:https://www.cnblogs.com/-xuan/p/10211387.html 二. (1)体系结构 Oracle体系结构 实例:实例是后台进程和内存的集合 数据库:数据库 ...

  9. Alyona and a tree CodeForces - 739B (线段树合并)

    大意: 给定有根树, 每个点$x$有权值$a_x$, 对于每个点$x$, 求出$x$子树内所有点$y$, 需要满足$dist(x,y)<=a_y$. 刚开始想错了, 直接打线段树合并了..... ...

  10. python记录_day14 内置函数二 迭代 二分法

    一.匿名函数 形式: lambda 形参:返回值 lambda表示的是匿名函数. 不需要用def来声明, 一句话就可以声明出一个函数.匿名函数不是说一定没名字,而是他们的名字统一称为“lambda”, ...