min-width

摘要

设置元素的最小宽度。它限制了 width 属性不能小于在 min-width 中指定的值。

概述表

初始值: 0
适用范围: 所有元素，但非替换行内元素、表格、行内表格、表格单元格、表格列和列组
继承: 否
媒体: 视觉
计算值: 百分比、绝对长度或 ‘none’
可动画: 是
CSS 对象模型属性: min-width
百分比: 是

语法

min-width: calc()
min-width: fill-available
min-width: fit-content
min-width: inherit
min-width: length
min-width: max-content
min-width: min-content
min-width: none
min-width: percentage

值

length: 指定一个固定宽度。不允许负值。有关可能的单位，请参阅 length。
percentage: 相对于包含块宽度的百分比。如果包含块没有显式设置宽度，则将其视为 none。不允许负值。
calc(): 有关更多详细信息，请参阅 css calc 函数。
inherit: 采用与元素父属性相同的值。
无: 默认值。清除 min-width 值。width 属性可以具有任何值。
max-content: 如果盒子内的所有软换行机会都没有被利用，盒子可以占据的最窄空间。（文本中的空格/标点符号是软换行的例子）。需要浏览器支持 CSS Intrinsic & Extrinsic Sizing Module。
min-content: 盒子可以占据的最窄度量，不会导致因选择更大的度量而避免的内联维度溢出。粗略地说，如果利用了盒子内的所有软换行机会，盒子可以适应其内容。需要浏览器支持 CSS Intrinsic & Extrinsic Sizing Module。
fill-available: 填充包含块的整个可用空间（宽度减去包含块的垂直边距、边框和内边距）。需要在浏览器中支持 CSS Intrinsic & Extrinsic Sizing Module。
fit-content: 如果总可用空间是有限的，则等于 min(max-content, max(min-content, fill-available))。否则，等于 max-content 度量。需要浏览器支持 CSS Intrinsic & Extrinsic Sizing Module。

示例

使用任何 CSS 选择器与 min-width 一起使用以应用它。

/* Restrict all div elements to a min-width of 100px */
div { min-width: 100px }

使用 min-width 和 max-width 属性限制 div 元素的宽度。

<style>
/* Width set to 50% */
.width {
    width:50%;
    background:#eee;
}

/* min-width set to 600px */
.minwidth {
    width: 50%;
    min-width: 600px;
    background: lightblue;
}

/* max-width set to 600px */
.maxwidth {
    width: 50%;
    max-width: 200px;
    background: lightgreen
}

/* Content with border and padding */
.content {
    border:1px solid #c00;
    padding:5px;
}
</style>

<h3>Resize the window to grow and shrink the div from max to min width.</h3>
<div class="width">
        <p class="content">This div also has a width of 50%. <br/><br/>
         Note that the div height increases to accommodate the flow of text.</p>
</div>
<div class="minwidth">
    <p class="content">This div also has a width of 50%.<br /><br /> It also has a min-width of 600px.</p>
</div>
<div class="maxwidth">
    <p class="content">This div also has a width of 50%.<br /><br /> It also has a max-width of 200px.</p>
</div>

查看实时示例

用法

 CSS min width is well supported across most browsers. A few things to consider while usage:

min-width 覆盖 max-width。如果提供的 min-width 大于 max-width，则 max-width 不起作用。
max-content、min-content、fit-content 和 fill-available 处于 W3C 草案阶段，并非所有浏览器都支持。
对 calc 的支持在浏览器中更好。可能需要厂商前缀。

备注

min-width / max-width 属性适用于浮动和绝对定位的块级和行内块级元素，以及一些固有控件。它们不适用于非替换行内元素，例如表格行和行/列组。（“替换”元素具有固有尺寸，例如 img 或 textArea。）此属性仅在严格的 !DOCTYPE 下启用。

参见

Box Model

署名

Microsoft Developer Network: [Windows Internet Explorer API 参考文章]

min-width

摘要

概述表

语法

值

示例

用法

备注

备注

相关规范

参见

相关文章

Box Model

相关页面

署名