admin管理员组

文章数量:1794759

CSS3 width之fit

CSS3 width之fit

应用场景：

利用fit-content属性解决居中以及背景自适应内容问题。

问题背景：

最开始使用div包含input的方式，将背景设置在div上，后来发现输入过长文字时，要自适应宽度就很难水平居中。

解决方案：

参考 contenteditable所述，结合内部input替换成设置了contenteditable为true的span标签（不限于此标签），将外层div的width设置为fit-content，再将左右margin设置为auto。

这种方式让元素保持block状态而不会脱离文档流，并且也不用设置父级元素的样式。

延伸问题：

1、width:fill-available

让元素100%自动填充，即自适应父元素宽度。这样可以让display为inline-block的元素表现起来像块级元素，又能够给父元素设置相同的height和line-height，使其垂直居中，且宽度100%。

2、width:max-content

宽度为最长宽度的子元素的宽度。

3、width:min-content

宽度为最小宽度值中最大的值。例如图片的最小宽度值就是自身宽度，文字中，汉字的最小宽度值为一个汉字的宽度，英文的最小宽度是最长单词的宽度。假设一个设置了此属性的元素包含500px宽的图片，font-size为12px的中英文混合段落，其中最长的英文单词是“W3school”。“W3school”占据的宽度肯定大于一个汉字的宽度，但远小于500px，所以该元素宽度和图片一致，为500px。

本文标签： widthfit

版权声明：本文标题：CSS3 width之fit 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686971930a123986.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。