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. 人脸识别demo使用教程

    最近在研究虹软家的arcface 人脸识别 demo,现在就给大家分享一下官方的demo**工程如何使用? **1.下载代码:git clone https://github.com/asdfqwra ...

  2. Codeforces 1082 G - Petya and Graph

    G - Petya and Graph 思路: 最大权闭合子图 对于每条边,如果它选了,那么它连的的两个点也要选 边权为正,点权为负,那么就是求最大权闭合子图 代码: #pragma GCC opti ...

  3. 牛客OI周赛6-提高组 B 践踏

    践踏 思路: 如果k不为0, 那么就是对k取模意义下的区间更新, 单点查询 否则, 就是普通的区间更新, 单点查询 代码: #pragma GCC optimize(2) #pragma GCC op ...

  4. BZOJ 3585 mex

    题目已经没有了 思路: 莫队+分块 首先有一个结论:所有的答案都在0到n之间,用反正法就能证明,所以所有大于n的数都可以看成n 离线,对询问区间进行莫队,再对答案的范围0到n进行分块 复杂度(n+2* ...

  5. 放弃 Tightvnc, 选择 Tigervnc

    构建headless vnc server ,我终于放弃了Tightvnc 基于以下原因: 1) 已知的Qt5的键盘映射问题,导致virtualbox 的使用出现困难 https://unix.sta ...

  6. 7内存管理-MRC

    @0简介 内存管理,即内存里各个对象的管理,即内存里各个对象的生命周期的管理,(从面向对象的角度看) @1引用计数器 默认为1,即有一滴的生命血液,若为0就会死去 @2单个对象的管理 自己管理自己,自 ...

  7. 算法：最短路径之弗洛伊德（Floyd）算法

    https://cloud.tencent.com/developer/article/1012420 为了能讲明白弗洛伊德(Floyd)算法的主要思想,我们先来看最简单的案例.图7-7-12的左图是 ...

  8. 雷林鹏分享：jQuery EasyUI 表单 - 创建异步提交表单

    jQuery EasyUI 表单 - 创建异步提交表单 本教程向您展示如何通过 easyui 提交一个表单(Form).我们创建一个带有 name.email 和 phone 字段的表单.通过使用 e ...

  9. linux 如何释放缓存

    操作: 同步 sync 释放所有缓存 echo 3 > /proc/sys/vm/drop_caches 原理: sync 将所有未写的系统缓冲区写到磁盘中,包含已修改的 i-node.已延迟的 ...

  10. every day a practice —— morning（2）

    Two years at sea have fostered a close relationship between the two fellow sailors as they cross the ...