最大宽度 | max-width (Miscellaneous Level 2) - CSS 中文开发手册 - Break易站

•   CSS 中文开发手册

  最大宽度 | max-width (Miscellaneous Level 2) - CSS 中文开发手册

  max-width CSS属性设置元素的最大宽度。它能够防止使用的width属性值变得大于指定的值max-width。

  /* <length> value */
  max-width: 3.5em;
  
  /* <percentage> value */
  max-width: 75%;
  
  /* Keyword values */
  max-width: none;
  max-width: max-content;
  max-width: min-content;
  max-width: fit-content;
  max-width: fill-available;
  
  /* Global values */
  max-width: inherit;
  max-width: initial;
  max-width: unset;

  max-width覆盖width，但min-width覆盖max-width。

  Initial value	none
  应用对象	all elements but non-replaced inline elements, table rows, and row groups
  是否可继承	no
  百分比值	refer to the width of the containing block
  媒体	visual
  计算值	the percentage as specified or the absolute length or none
  动画类型	a length, percentage or calc();
  规范顺序	the unique non-ambiguous order defined by the formal grammar

  语法

  值

  <length>最大宽度，表示为 <length>。<percentage>最大宽度，以<percentage>包含块的宽度表示。

  关键字值

  none宽度没有最大值。

  max-content内在的首选宽度。

  min-content内在的最小宽度。

  fill-available包含块的宽度减去水平边距，边框和填充。（请注意，某些浏览器这个关键字实现一个古老的名字，available。）

  fit-content同为max-content.

  形式语法

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

  实例

  在本例中，“子”将为150像素宽或“父”宽度，以较小者为准：

  <div id="parent">
    <div id="child">
      Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
    </div>
  </div>

  #parent {
    background: lightblue;
    width: 300px;
  }
  
  #child {
    background: gold;
    width: 100%;
    max-width: 150px;
  }

  该fit-content值可用于根据其内容所需的内在大小来设置元素的宽度：

  <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;
  }

  规范

  Specification	Status	Comment
  CSS Intrinsic & Extrinsic Sizing Module Level 3The definition of 'max-width' in that specification.	Working Draft	Adds the max-content, min-content, fit-content, and fill-available keywords.(Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.)
  CSS TransitionsThe definition of 'max-width' in that specification.	Working Draft	Defines max-width as animatable.
  CSS Level 2 (Revision 1)The definition of 'max-width' in that specification.	Recommendation	Initial definition.

  浏览器兼容性

  Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
  Basic support	1.0	(Yes)	1.0 (1.7 or earlier)	7.0	4.0	2.0.2 (416), buggy before
  applies to <table> 1	No support	No support	(Yes)	No support	(Yes)	No support
  max-content, min-content, fit-content, and fill-available	No support 3	No support	3.0 (1.9)-moz 2	No support	No support	No support 3

  Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
  Basic support	?	(Yes)	?	?	?	?

•   CSS 中文开发手册

•   本文标题：最大宽度 | max-width (Miscellaneous Level 2) – CSS 中文开发手册 - Break易站