在 CSS3 中新增了 width 的属性值: max-content;min-content 和 fit-content,fill-availablea, 用来实现以内容为主的尺寸计算方式.
分别介绍一下这三个属性的意义:
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 元素的水平居中.
下面一张图形象的体现了四个属性的表现
需要提一下的是: max-content 和 fit-content, 当元素内容没有超出行宽的时候, 最终的宽度都是内容的宽度. 而超出行宽的时候, max-content 的表现是不换行, 出现横向滚动条, fit-content 的表现是会换行.
兼容性:
代码如下:
- <style>
- .dom{
- width: -webkit-max-content;
- width: -moz-max-content;
- width: max-content;
- }
- </style>
自己是一个 6 年的前端工程师, 希望本文对你有帮助!
这里推荐一下我的前端学习交流扣 qun:731771211 , 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 html+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/cd710cef09fb