关于width属性max/min-content和fit-content

Posted diamj878

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于width属性max/min-content和fit-content相关的知识,希望对你有一定的参考价值。

自适应内部元素

在css3中width的新的属性max/min-content和fit-content、fill-availablea属性,作用是什么?

兼容性如图,在移动端已经使用,目前都有是有前缀:

例如:

.min-content {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;    
}

 

 

 

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

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是会个跟随有定宽的的最大最小宽度,不会进行收缩。

min-content的例子:

将图片同级文字显示根据图片的大小一样

3.fit-content的属性

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

对于三种属性,2,3分别对1属性进行比较说明:

如下:

1与2中的min-content属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .box {
        background-color: #f0f3f9;
        padding: 10px;
        margin: 10px 0 20px;
        overflow: hidden;
    }

    .inline-block {
        display: inline-block;
    }
    .min-content {
        width: -webkit-min-content;
        width: -moz-min-content;
        width: min-content;
    }
</style>
<body>
<strong>display:inline-block;</strong>
<div class="box inline-block">
    <img src="flower.jpg">
    <p>display:inline-block具有收缩特性,但这里宽度随文字。而width:min-content随图片。</p>
</div>

<strong>width: min-content;</strong>
<div class="box min-content">
    <img src="flower.jpg">
    <p>display:inline-block具有收缩特性,但这里宽度随文字。而width:min-content随图片。</p>
</div>
</body>
</html>
View Code

 

1与max-content属性的比较

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .box {
        background-color: #f0f3f9;
        padding: 10px;
        margin: 10px 0 20px;
        overflow: hidden;
    }

    .inline-block {
        display: inline-block;
    }
    .max-content {
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
    }
</style>
<body>
<strong>display:inline-block;</strong>
<div class="box inline-block">
    <img src="flower.jpg">
    <p>display:inline-block具有收缩特性,但是,当(例如这里的)描述文字超过一行显示的时候,其会这行,不会让自身的宽度超过父级容器的可用空间的,但是,width:max-content就不是酱样子哦咯!表现得好像设置了white-space:nowrap一样,</p>
</div>

<strong>width: max-content;</strong>
<div class="box max-content">
    <img src="flower.jpg">
    <p>display:inline-block具有收缩特性,但是,当(例如这里的)描述文字超过一行显示的时候,其会这行,不会让自身的宽度超过父级容器的可用空间的,但是,width:max-content就不是酱样子哦咯!表现得好像设置了white-space:nowrap一样,</p>
</div>
</body>
</html>
View Code

 

1 属性与3书性的比较

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .box {
        background-color: #f0f3f9;
        padding: 10px;
        /* 这里左右方向是auto */
        margin: 10px auto 20px;
        overflow: hidden;
    }

    .inline-block {
        display: inline-block;
    }
    .fit-content {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
    }
</style>
<body>
<strong>display:inline-block;</strong>
<div class="box inline-block">
    <img src="flower.jpg">
    <p>display:inline-block居中要靠父元素,而width:fit-content直接margin:auto.</p>
</div>

<strong>width: fit-content;</strong>
<div class="box fit-content">
    <img src="flower.jpg">
    <p>display:inline-block居中要靠父元素,而width:fit-content直接margin:auto.</p>
</div>
</body>
</html>
View Code

 

 

以上是关于关于width属性max/min-content和fit-content的主要内容,如果未能解决你的问题,请参考以下文章

理解CSS3 max/min-content及fit-content等width值

关于 max-width 属性的 CSS 媒体查询为平板电脑和桌面设置 1024px 大小

关于flex的三属性2--flex-basis

关于meta标签的使用,属性的说明

关于iframe

WPF中的Width和ActualWidth有啥区别?