宽高

widthheight 样式能分别设置元素的宽度与高度。

$$tip

widthheight 样式对行内元素不起效。

$$

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/KKyeWaX?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

关键字属性

widthheight 属性还有三个特殊的关键字属性值:

  • max-content:固有首选长度,表示为元素允许的最大长度。
  • min-content:固有最小长度,表示为元素允许的最小长度。
  • fit-content:尽可能在不溢出的情况下选择接近 max-content 的长度,至少为 min-content 的长度,公式为:min(max-content, max(min-content, 可用长度))
<div class="container">
    <div class="min-content">min-content say hello to 三眼鸭</div>
    <div class="max-content">max-content say hello to 三眼鸭</div>
    <div class="fit-content">fit-content say hello to 三眼鸭</div>
</div>
<style>
    .container {
        background-color: teal;

        width: 160px;
    }

    .min-content,
    .max-content,
    .fit-content {
        background-color: pink;

        margin: 20px 0;
    }

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

    .max-content {
        width: max-content;
    }

    .fit-content {
        width: fit-content;
    }
</style>

$$demo <div class="container"> <div class="min-content">min-content say hello to 三眼鸭</div> <div class="max-content">max-content say hello to 三眼鸭</div> <div class="fit-content">fit-content say hello to 三眼鸭</div> </div> <style> body { padding: 1px; } .container { background-color: teal;

    width: 160px;
}

.min-content,
.max-content,
.fit-content {
    background-color: pink;

    margin: 20px 0;
}

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

.max-content {
    width: max-content;
}

.fit-content {
    width: fit-content;
}

</style>

$$

最小宽高

min-widthmin-height 样式用以设置元素的最小宽度与最小高度。

$$tip

min-widthmin-height 的优先级高于 widthheight,当两者冲突时以min-widthmin-height 为先。

$$

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/yLPEMov?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

最大宽高

max-widthmax-height 样式用以设置元素的最大宽度与最大高度。

$$tip

max-widthmax-height 的优先级高于 widthheight,当两者冲突时以max-widthmax-height 为先。

$$

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/JjOZWvq?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>