mozilla
您的搜索结果

    min-width

    概述

    min-width 属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 min-width 的值。

    min-width 的值会同时覆盖 max-widthwidth

    • 初始值 0
    • 适用元素 all elements but non-replaced inline elements, table rows, and row groups
    • 可继承 no
    • Percentages refer to the width of the containing block
    • 适用媒体 visual
    • 计算值 the percentage as specified or the absolute length
    • 可动画 yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    语法

    形式语法: <length> | <percentage> | max-content | min-content | fit-content | fill-available
    min-width: 3.5em
    min-width: 10%
    min-width: max-content
    min-width: min-content
    min-width: fit-content
    min-width: fill-available
    
    min-width: inherit
    

    <length>
    固定的最小宽度。 查看 <length> 了解可用单位。负值会让该声明失效。
    <percentage>
    固定的最小宽度表现为包含快宽度的 <percentage> (百分比值)。负值会让该声明失效。
    max-content
    固有首选宽度。
    min-content
    固有最小宽度
    fill-available
    包含块的宽度减去水平 margin、border 和 padding。有些浏览器在实现时使用了该关键字的早期名字: available
    fit-content
    等同于 min(max-content, max(min-content, fill-available).

    示例

    table { min-width: 75%; }
    
    form { min-width: 0; }
    

    规范

    Specification Status Comment
    CSS Intrinsic & Extrinsic Sizing Module Level 3 Working Draft 增加 max-contentmin-contentfit-content, 和 fill-available 关键字。
    CSS3 Box 与 CSS3 Writing Modes 两份草案在某种程度上定义了这些关键字。本草案取代了这些草案。
    CSS Flexible Box Layout Module Candidate Recommendation 早期的修订规范 增加了 auto 关键字并将其作为初始值。然而 CSSWG 随后重置了这一变更。直至2013 年 3月 29日,最新的 编辑草案 没有对 min-width 属性做任何修改(也就是说 auto 值已经不被推荐)。
    CSS Transitions Working Draft 定义 min-width 为动画属性。
    CSS Level 2 (Revision 1) Recommendation 初始定义。

    浏览器兼容性

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 1.0 1.0 (1.0) 7.0 4.0 2.0.2 (416), buggy before
    applies to <table> [1] Not supported (Yes) Not supported (Yes) Not supported
    max-content, min-content, fit-content, and fill-available 24.0 -webkit [3] 3.0 (1.9) -moz [2] Not supported Not supported Not supported [3]
    auto已废弃 Gecko 22 21.0 16.0 (16.0) Not supported 12.10 Not supported
    auto as initial value已废弃 Gecko 22 21.0 18.0 (18.0) Not supported 12.10 Not supported
    Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support ? ? ? ? ? ?

    注意

    [1] CSS 2.1 对于 min-width 用于 <table> 时的行为未做任何定义。因此任何行为都是符合 CSS2.1 的;新的 CSS 规范可能会定义该行为,因此 Web 开发人员不应该依赖此时的规范。

    [2] Gecko 试验性的实现了 CSS3 Basic Box 中给出的定义。该规范定义了 available 而不是 fill-available。同时 fit-content 的定义相比 CSS3 Intrinsic 也进行了简化。

    [3] WebKit 也实现了一份早期提案,即关键字 intrinsic

    See also

    文档标签和贡献者

    Contributors to this page: teoli, sunnylost
    最后编辑者: teoli,