• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • max-width

    max-width 属性用来给元素设置最大宽度值。定义了max-width的元素会在达到max-width值之后避免进一步按照width属性设置变大。max-width会覆盖width设置,但min-width设置会覆盖max-width

    示例

    /* <长度> 值 */
    max-width: 3.5em;
    
    /* <百分比> 值 */
    max-width: 75%;
    
    /* 关键字 */
    max-width: none;
    max-width: max-content;
    max-width: min-content;
    max-width: fit-content;
    max-width: fill-available;
    
    /* 全局设置 */
    max-width: inherit;
    max-width: initial;
    max-width: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持max-width

    语法

    max-width:none|<length>|<percentage>|min-content|max-content|fit-content|fill-available


    取值:

    • none:元素未设置最大值。
    • <length>:用长度值来定义最大宽度。不允许负值。参见<length>
    • <percentage>:用百分比来定义最大宽度。不允许负值。以父级块级容器宽度的百分比作为最大宽度。参见<percentage>
    • min-content:固有最小宽度。还处于实验阶段
    • max-content:固有最大宽度。还处于实验阶段
    • fit-content还处于实验阶段。与max-content等价。
    • fill-available:包含块的宽度减去水平 margin、border 和 padding。有些浏览器在实现时使用了该关键字的早期名字: available。还处于实验阶段
    默认值none
    适用于除非置换内联元素,table-row, table-row-group之外的所有元素
    继承性
    动画性
    计算值指定值

    例子

    <div id="parent">
        <div id="child">
            the mozilla community produces a lot of great software.
        </div>
    </div>
    
    #parent { width: 300px; }
    #child  { background: gold;
              width: 100%;
              max-width: 150px;
            }
    
    <div id="parent">
        <div id="child">
            child text
        </div>
    </div>
    
    #parent { background: lightblue;width: 300px; }
    #child  { background: gold;
              width: 100%;
              max-width: -moz-fit-content;
              max-width: -webkit-fit-content;
            }
    

    上篇:min-width

    下篇:max-height