web前端入门到实战:CSS3中width值为max/min-content及fit-content

在css3中新增了width的属性值:max-content;min-content和fit-content、fill-availablea,用来实现以内容为主的尺寸计算方式。

创新互联建站专注于企业营销型网站建设、网站重做改版、合山网站定制设计、自适应品牌网站建设、html5商城网站开发、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为合山等各大城市提供网站开发制作服务。

分别介绍一下这三个属性的意义:

1.fill-available的意义——自动填满剩余的空间
就是有个div没有任何样式的时候,浏览器是按照自动填充的样式呈现的,就是100%width的样式填充的。按照盒子模式,不仅元素在block中可以呈现自动填满空间的样式,在inline-block上也是可以这样呈现的(包裹收缩的inline-block元素上,这里说的inline-block是具有收缩特性)。

div { display:inline-block; width:fill-available; }

2.max-content和min-content是会个跟随有定宽的的最大最小宽度,不会进行收缩。

3.fit-content的属性 width:fit-content可以实现元素收缩效果的同时,保持原本的block水平状态,于是,就可以直接使用margin:auto实现元素向内自适应同时的居中效果了。就是div的自适应宽度不是100%而是内容的大小。很好的实现了,block元素的水平居中。

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

web前端入门到实战:CSS3中width值为max/min-content及fit-content

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

兼容性:

web前端入门到实战:CSS3中width值为max/min-content及fit-content

代码如下:

学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
(从零基础开始到前端项目实战教程,学习工具,职业规划)

网站名称:web前端入门到实战:CSS3中width值为max/min-content及fit-content
本文路径:http://scyanting.com/article/pcsgej.html