mozilla

Version 499155 von max-width

  • Adressname der Version: Web/CSS/max-width
  • Titel der Version: max-width
  • ID der Version: 499155
  • Erstellt:
  • Autor: fscholz
  • Aktuelle Version? Ja
  • Kommentar CSS/max-width Web/CSS/max-width
Schlagwörter: 

Inhalt der Version

{{ CSSRef() }}

Übersicht

Die max-width Eigenschaft wird verwendet, um die maximale Breite eines Elements festzulegen. Das verhindert, dass der benutzte Wert der width Eigenschaft nicht größer wird als der festgelegte Wert von max-width.

Hinweis: max-width überschreibt width, allerdings überschreibt min-width auch max-width.

  • Standardwert: none
  • Anwendbar auf: Blockelemente und ersetzte Elemente, für <table> siehe Browser Kompatibilität
  • Vererbbar: Nein
  • Prozentwerte: beziehen sich auf die Breite des umschließenden Blocks
  • Medium: visuell
  • berechneter Wert: die Prozentzahl wie festgelegt, die absolute Länge oder none

Syntax

max-width:  <Längenangabe> | <Prozentzahl> | none | -moz-max-content | -moz-min-content | -moz-fit-content | -moz-available | inherit

Werte

<Längenangabe>
Siehe Länge für mögliche Einheiten.
Prozentzahl
Eine prozentuale Angabe, die sich auf die Breite des umschließenden Blocks bezieht.
none
Das Element verfügt über keine maximale Breite.
inherit
Der Wert des Elternelements wird geerbt.

Mozilla Erweiterungen

-moz-max-content
{{ gecko_minversion_inline("1.9") }} Bevorzugte intrinsische Breite.
-moz-min-content
{{ gecko_minversion_inline("1.9") }} Minimale intrinsische Breite.
-moz-available
{{ gecko_minversion_inline("1.9") }} Die Breite des umschließenden Blocks minus horizontalen margin, padding und border Werten.
-moz-fit-content
{{ gecko_minversion_inline("1.9") }} Gleichbedeutend zu -moz-max-content.

Beispiele

body  { max-width: 40em; }
table { max-width: 75%; }
form  { max-width: none; }

Beispiel 1 {{ gecko_minversion_inline("1.9") }}

p { background: gold }

The Mozilla community produces a lot of great software.

Beispiel 2 {{ gecko_minversion_inline("1.9") }}

p { background: lightgreen;
    max-width:  intrinsic;         /* Safari/WebKit */
    max-width:  -moz-max-content;  /* Firefox/Gecko */
  }

The Mozilla community produces a lot of great software.

Beispiel 3 {{ gecko_minversion_inline("1.9") }}

p { background: lightblue;  max-width: -moz-min-content; }

The Mozilla community produces a lot of great software.

Browser Kompatibilität

Browser ab Version auf <table> anwendbar intrinsische Breite minimale intrinsische Breite
Internet Explorer 7.0 nein --- --- --- ---
Firefox (Gecko) 1.0 (1.0) ja 3.0 (1.9) -moz-max-content 3.0 (1.9) -moz-min-content
Opera 4.0 ja --- --- --- ---
Safari (WebKit) 2.0.2 (416), vorher fehlerhaft nein 2.0 (412) ? intrinsic --- ---

Spezifikation

Siehe auch

{{ languages( { "en": "en/CSS/max-width", "es": "es/CSS/max-width", "fr": "fr/CSS/max-width" } ) }}

Quelltext der Version

<p>{{ CSSRef() }}</p>
<h2 id=".C3.9Cbersicht.3A">Übersicht</h2>
<p>Die <code>max-width</code> Eigenschaft wird verwendet, um die maximale Breite eines Elements festzulegen. Das verhindert, dass der benutzte Wert der <a href="/de/CSS/width" title="de/CSS/width"><code>width</code></a> Eigenschaft nicht größer wird als der festgelegte Wert von <code>max-width</code>.</p>
<p>Hinweis: <code>max-width</code> überschreibt <a href="/de/CSS/width" title="de/CSS/width"><code>width</code></a>, allerdings überschreibt <a href="/de/CSS/min-width" title="de/CSS/min-width"><code>min-width</code></a> auch <code>max-width</code>.</p>
<ul>
 <li>Standardwert: <code>none</code></li>
 <li>Anwendbar auf: Blockelemente und ersetzte Elemente, für &lt;table&gt; siehe <a href="/de/CSS/max-width#Browser_Kompatibilit.c3.a4t" title="de/CSS/max-width#Browser_Kompatibilit.c3.a4t">Browser Kompatibilität</a></li>
 <li>Vererbbar: Nein</li>
 <li>Prozentwerte: beziehen sich auf die Breite des umschließenden Blocks</li>
 <li>Medium: visuell</li>
 <li>berechneter Wert: die Prozentzahl wie festgelegt, die absolute Länge oder <code>none</code></li>
</ul>
<h2>Syntax</h2>
<pre class="eval">
max-width:  &lt;Längenangabe&gt; | &lt;Prozentzahl&gt; | none | -moz-max-content | -moz-min-content | -moz-fit-content | -moz-available | inherit
</pre>
<h3 id="Werte">Werte</h3>
<dl>
 <dt>
  &lt;Längenangabe&gt;</dt>
 <dd>
  Siehe <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="MDC">Länge</a> für mögliche Einheiten.</dd>
 <dt>
  Prozentzahl</dt>
 <dd>
  Eine <a href="/de/CSS/Einheiten#Prozent" title="MDC">prozentuale</a> Angabe, die sich auf die Breite des umschließenden Blocks bezieht.</dd>
 <dt>
  none</dt>
 <dd>
  Das Element verfügt über keine maximale Breite.</dd>
 <dt>
  inherit</dt>
 <dd>
  Der Wert des Elternelements wird geerbt.</dd>
</dl>
<h4 id="Mozilla_Erweiterungen">Mozilla Erweiterungen</h4>
<dl>
 <dt>
  -moz-max-content</dt>
 <dd>
  {{ gecko_minversion_inline("1.9") }} Bevorzugte intrinsische Breite.</dd>
 <dt>
  -moz-min-content</dt>
 <dd>
  {{ gecko_minversion_inline("1.9") }} Minimale intrinsische Breite.</dd>
 <dt>
  -moz-available</dt>
 <dd>
  {{ gecko_minversion_inline("1.9") }} Die Breite des umschließenden Blocks minus horizontalen margin, padding und border Werten.</dd>
 <dt>
  -moz-fit-content</dt>
 <dd>
  {{ gecko_minversion_inline("1.9") }} Gleichbedeutend zu <code>-moz-max-content.</code></dd>
</dl>
<h2>Beispiele</h2>
<pre>
body  { max-width: 40em; }
table { max-width: 75%; }
form  { max-width: none; }
</pre>
<p id="Beispiel_1_.7B.7B_gecko_minversion_inline(.221.9.22)_.7D.7D">Beispiel 1 {{ gecko_minversion_inline("1.9") }}</p>
<pre>
p { background: gold }
</pre>
<p style="background: gold">The Mozilla community produces a lot of great software.</p>
<p id="Beispiel_2_.7B.7B_gecko_minversion_inline(.221.9.22)_.7D.7D">Beispiel 2 {{ gecko_minversion_inline("1.9") }}</p>
<pre>
p { background: lightgreen;
    max-width:  intrinsic;         /* Safari/WebKit */
    max-width:  -moz-max-content;  /* Firefox/Gecko */
  }
</pre>
<p style="background: lightgreen; max-width: -moz-max-content;">The Mozilla community produces a lot of great software.</p>
<p id="Beispiel_3_.7B.7B_gecko_minversion_inline(.221.9.22)_.7D.7D">Beispiel 3 {{ gecko_minversion_inline("1.9") }}</p>
<pre>
p { background: lightblue;  max-width: -moz-min-content; }
</pre>
<p style="background: lightblue; max-width: -moz-min-content;">The Mozilla community produces a lot of great software.</p>
<h2>Browser Kompatibilität</h2>
<table class="standard-table">
 <tbody>
  <tr>
   <th>Browser</th>
   <th>ab Version</th>
   <th>auf <code>&lt;table&gt;</code> anwendbar</th>
   <th colspan="2">intrinsische Breite</th>
   <th colspan="2">minimale intrinsische Breite</th>
  </tr>
  <tr>
   <td>Internet Explorer</td>
   <td><strong>7.0</strong></td>
   <td>nein</td>
   <td>---</td>
   <td>---</td>
   <td>---</td>
   <td>---</td>
  </tr>
  <tr>
   <td>Firefox (Gecko)</td>
   <td><strong>1.0</strong> (1.0)</td>
   <td>ja</td>
   <td>3.0 (1.9)</td>
   <td><code>-moz-max-content</code></td>
   <td>3.0 (1.9)</td>
   <td><code>-moz-min-content</code></td>
  </tr>
  <tr>
   <td>Opera</td>
   <td><strong>4.0</strong></td>
   <td>ja</td>
   <td>---</td>
   <td>---</td>
   <td>---</td>
   <td>---</td>
  </tr>
  <tr>
   <td>Safari (WebKit)</td>
   <td><strong>2.0.2</strong> (416), vorher fehlerhaft</td>
   <td>nein</td>
   <td>2.0 (412) ?</td>
   <td><code>intrinsic</code></td>
   <td>---</td>
   <td>---</td>
  </tr>
 </tbody>
</table>
<h2>Spezifikation</h2>
<ul>
 <li><a class="external" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" lang="en">CSS 2.1 Visual formatting #max-width</a></li>
</ul>
<h2>Siehe auch</h2>
<ul>
 <li><a href="/de/CSS/width" title="de/CSS/width"><code>width</code></a>, <a href="/de/CSS/min-width" title="de/CSS/min-width"><code>min-width</code></a></li>
 <li><a href="/de/CSS/height" title="de/CSS/height"><code>height</code></a>, <a href="/de/CSS/min-height" title="de/CSS/min-height"><code>min-height</code></a>, <a href="/de/CSS/max-height" title="de/CSS/max-height"><code>max-height</code></a></li>
</ul>
<p>{{ languages( { "en": "en/CSS/max-width", "es": "es/CSS/max-width", "fr": "fr/CSS/max-width" } ) }}</p>
Zu dieser Version zurücksetzen