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. Linux下解包/打包，压缩/解压命令

    .tar 解包:tar xvf FileName.tar 打包:tar cvf fileName.tar DirName tar.gz和.tgz 解压:tar zxvf FileName.tar.zi ...

  2. leecode第十六题（最接近的三数之和）

    class Solution { public: void quick_order(vector<int>& num, int star, int en)//快排 { int st ...

  3. Java 8里面lambda的最佳实践

    Java 8已经推出一段时间了,越来越多开发人员选择升级JDK,这条热门动弹里面看出,JDK7最多,其次是6和8,这是好事! 在8 里面Lambda是最火的主题,不仅仅是因为语法的改变,更重要的是带来 ...

  4. 服务器--远程桌面选择"本地资源"下不显示"本地磁盘"的解决办法(转）

    转自:http://blog.sina.com.cn/s/blog_4cd978f90102wsvc.html “远程连接桌面”,每次连接候,我都选择了“本地资源”下面的“磁盘驱动器”,都会在远程电脑 ...

  5. hadoop ssh 端口-ssh-copy-id详解

    ssh-copy-id详解 http://www.blogdaren.com/post-1815.html 服务器时常需要配置无密码的登录方式,最一般的设置方式如下: 使用ssh-keygen和ssh ...

  6. 他将Yahoo!Hadoop从20个节点扩展为42000个节点

    他将Yahoo!Hadoop从20个节点扩展为42000个节点 http://www.csdn.net/article/2012-11-08/2811629-Interview-Hortonworks ...

  7. android -------- Data Binding的使用（二）

    分享一下Data Binding在项目中一些常用的基础,点击事件和输入框的一些操作. DataBinding允许我们在xml中view的一些事件属性(如onClick等)中填写DataBinding表 ...

  8. [LintCode] Binary Tree Level Order Traversal（二叉树的层次遍历）

    描述 给出一棵二叉树,返回其节点值的层次遍历(逐层从左往右访问) 样例 给一棵二叉树 {3,9,20,#,#,15,7} : 3 / \ 9 20 / \ 15 7 返回他的分层遍历结果: [ [3] ...

  9. Pytorch半精度浮点型网络训练问题

    用Pytorch1.0进行半精度浮点型网络训练需要注意下问题: 1.网络要在GPU上跑,模型和输入样本数据都要cuda().half() 2.模型参数转换为half型,不必索引到每层,直接model. ...

  10. PHP如何定义类及其成员属性与操作

    1.类的定义: 类的关键字定义使用class 1.定义一个空类 Class Person{}; 2.定义一个有成员属性和操作的类 Class Person{ //成员属性 $name     =  ' ...