【CSS】关键字 -webkit-fill-available 详解

2024-04-16 00:50:00

目录

一、问题描述

二、详细解释

三、解决方案

一、问题描述

在进行代码编写的时候发现给antd的inputNumber组件设置width时，不生效。尝试多次无果后，问了同事，同事掏出了一个关键字 -webkit-fill-available 后成功生效。

所以对其产生了兴趣，在网上检索下，用的必应竟然没找到相关信息。

（想起来了，不是必应检索不到，是因为过滤机制，在关键词前添加-起到过滤作用。）

觉得这个属性值是两个字段的拼接，于是检索了fill-available，顺势摸到了stackoverflow的答案。话说之后又用百度，这次倒是发挥了其应有的检索作用，首页就看到了解答。要是能用google就好了，一把辛酸泪

stackoverflow的答案就已经讲的很清楚了

css - what is the usage of -webkit-fill-available? - Stack Overflow

在下面再赘述一下

二、详细解释

width: -webkit-fill-available;

这个属性值需要分块理解。

首先是 -webkit- ，这是一个前缀，浏览器厂商会在属性前加一个私有的前缀来支持新属性。这个前缀指能够在以webkit为内核的浏览器中正常使用。以webkit为内核的浏览器代表有safari和chrome

其次是 fill-available，是css的自适应关键字，其作用为撑满可用空间。

【注】该关键字IE浏览器不支持

三、解决方案

想让这个属性值在所有浏览器都生效，stackoverflow提供如下写法

elem {width: 100%;width: -moz-available;          /* WebKit-based browsers will ignore this. */width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */width: fill-available;
}

我用的是chrome是生效的，其他的不知道行不行，没试过。有时间可以试下

【CSS】关键字 -webkit-fill-available 详解相关推荐

html css主题,HTML+CSS＝无限可能——案例详解：我的POI主题作品
原标题:HTML+CSS＝无限可能--案例详解:我的POI主题作品在微博发了这个作业,收到很多好评,实在太开心! 斌叔让我来投稿,那今天就以这个网页为案例,把制作过程中我的方法和经验分享给大家. 作 ...
java this关键字的使用_Java this 关键字的使用方法详解
Java this 关键字的使用方法详解构造方法中的this关键字构造方法是一个类的对象在通过new关键字创建时自动调用的,在程序中不能向调用其他方法一样通过方法名(也就是类名)来调用.但如果一个 ...
定义html表格的大小和位置,点晴OA工作流表单设计：表格table及宏控件的HTML、CSS、字体参数教程详解...
点晴OA工作流表单设计:表格table及宏控件的HTML.CSS.字体参数教程详解说明:虽然点晴OA内置了强大的富文本编辑器,但是很多时候还是难以实现理想的精确显示效果,为了实现满意的显示效果,网 ...
CSS clear 属性取值详解
之前有整理过一部分知识点, 一直没有发布, 因为都是有关前端方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家这个专题就是工作 ...
css中的position定位详解
css中的position定位详解 position属性指定了元素的定位类型. position属性的5个值:static,relative,fixed,absolute,sticky; 元素可以使用 ...
CSS transition（过渡效果）详解
CSS transition(过渡效果)详解通常当 CSS 的属性值更改后,浏览器会立即更新相应的样式,例如当鼠标悬停在元素上时,通过 :hover 选择器定义的样式会立即应用在元素上.在 CSS3 ...
CSS中的BFC BFC详解 BFC可以解决的问题汇总
CSS中的BFC BFC详解 BFC可以解决的问题汇总简介 BFC 全称 Block Formatting Context, 名为 "块级格式化上下文"它是CSS2.1规范定义的 ...
CSS动画（animation）详解
CSS动画(animation)详解通过<CSS过渡>一节的学习我们知道,利用 transition 属性可以实现简单的过渡动画,但过渡动画仅能指定开始和结束两个状态,整个过程都是由特定 ...
css画心形原理,科技常识：使用CSS画爱心的过程详解
今天小编跟大家讲解下有关使用CSS画爱心的过程详解 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关使用CSS画爱心的过程详解的相关资料,希望小伙伴们看了有所帮助. 今天小颖给大家分享一个 ...
css动画-animation各个属性详解（转）
CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括: ...

最新文章

热门文章