最大寬度 | 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易站