CSS-Kurs / Breite, Höhe, min/max-Grenzen und box-sizing

CSS-Breite und -Höhe legen bevorzugte Dimensionen fest, während min-width, max-width, min-height und max-height Grenzen setzen. Mit box-sizing: border-box beinhalten die angegebenen Dimensionen Padding und Rahmen, aber eine Höhenbegrenzung erfordert dennoch eine gezielte Overflow-Strategie.

Vergleichen Sie content-box und border-box

Geben Sie beiden Karten width: 300px, 20px Padding auf jeder Seite und 2px Rahmen. Bei content-box beträgt der Inhalt 300px und die Border-Box 344px. Bei border-box beträgt die Border-Box 300px und der Inhalt 256px. Der Außenabstand liegt in beiden Fällen außerhalb der angegebenen Breite. Siehe Das Boxmodell: Inhalt, Padding, Rahmen und Außenabstand.

border-box behält Padding und Rahmen innerhalb der angegebenen Größe bei. Eine Erhöhung des Paddings reduziert die verfügbare Inhaltsbreite und kann das Umbruchverhalten beeinflussen. Wenn allein das Padding und die Ränder die angegebene Breite überschreiten, kann der Inhalt nicht negativ werden, sodass die tatsächliche Box diese Breite überschreiten kann. Siehe MDN: Box-Sizing.

*, *::before, *::after { box-sizing: border-box; }

Diese Regel vereinheitlicht die Größenberechnung einschließlich der Pseudoelemente in neuen Dokumenten. Wenn Sie dies auf bestehenden Seiten pauschal anwenden, kann sich das auf der Grundlage der content-box erstellte Layout ändern, prüfen Sie also zuerst den benötigten Bereich. Das vollständige Beispiel wendet die allgemeinen Regeln an, weist die content-box jedoch nur zur .content zum Vergleich zu.

Fließende Breiten sowie minimale oder maximale Grenzen festlegen

.fluid { width: 100%; max-width: 32rem; min-height: 10rem; }

.limits { width: 100%; min-width: 180px; max-width: 320px; }

width: 100% bezieht sich auf die Breite des umgebenden Bezugsblocks (Containing Block), und max-width begrenzt, dass sie auf breiten Bildschirmen größer wird. Unter der Bedingung, dass die Schriftgröße der Wurzel 16px beträgt, sind 32rem 512px. min-width ist die Untergrenze, wie klein sie sein kann. Selbst wenn der Bildschirm schmaler als 180px ist, kann die Einhaltung der Mindestbreite zu einem horizontalen Überlauf führen.

Eine Mindestbeschränkung hat Vorrang, wenn sie mit einem Maximum in Konflikt steht: min-width: 360px mit max-width: 320px lässt das Element nicht unter 360px schrumpfen. Die entsprechenden Höhenbeschränkungen verhalten sich ähnlich. Automatische Mindestgrößen von Flexbox und Grid erfordern eigene Prüfungen; verwenden Sie min-width: 0, wo geeignet. Siehe MDN: min width, MDN: min height.

Vergleichen Sie automatische, feste und eingeschränkte Höhen

Eine Höhenbegrenzung entfernt überlaufenden Text nicht automatisch. Der Standardüberlauf kann ihn außerhalb des Rahmens anzeigen; overflow: hidden kann Informationen abschneiden, die der Leser benötigt. Bei der Kombination von Maximalhöhe mit Scrollen sollten auch Tastaturzugang und mobile Interaktion überprüft werden. Das vollständige Beispiel lässt zusätzlichen Raum nach den Boxen, damit Sie den Fehler bei fester Höhe beobachten können. Wenn eine Box nicht wie erwartet verkleinert wird, überprüfen Sie auch Überlauf, lange Zeichenfolgen und Auslassungszeichen.

Prozentuale Höhenbedingungen verstehen

.height-parent { height: 200px; }

.half { height: 50%; }

Im normalen Blockfluss lässt ein übergeordneter Block mit einer expliziten Höhe von 200px ein Kind-Element in height: 50% auf 100px auflösen. Wenn die Höhe des übergeordneten Elements vom Inhalt abhängt, wird diese einfache Berechnung normalerweise stattdessen als auto aufgelöst. Eine alleinige min-height liefert nicht dieselbe Bedingung. Absolute Positionierung, Flexbox und Grid können unterschiedliche Regeln für die prozentuale Auflösung haben. Siehe MDN: height.

Führen Sie das Beispiel aus und vergleichen Sie die Abmessungen.

Speichern Sie den folgenden Code als UTF-8 in sizing.html. Er enthält zwei Breitenberechnungen, eine Größenbegrenzung und einen Höhenvergleich mit demselben Text.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing width and height</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 16px; font: 16px/1.6 sans-serif; color: #333; }
    .compare { width: 300px; padding: 20px; border: 2px solid #3d6b89;
      margin-block: 16px; background: #eef6fa; }
    .content { box-sizing: content-box; }
    .border { box-sizing: border-box; }
    .fluid { width: 100%; max-width: 32rem; min-height: 10rem;
      padding: 24px; border: 2px solid #3d6b89; }
    .limits { width: 100%; min-width: 180px; max-width: 320px;
      padding: 12px; border: 1px solid #777; margin-block: 16px; }
    .height-box { width: 100%; max-width: 300px; padding: 12px;
      border: 2px solid #b98022; margin-block-end: 16px; }
    .height-box p { margin: 0; }
    .fixed { height: 96px; margin-block-end: 120px; }
    .minimum { min-height: 160px; }
    .limited { max-height: 96px; overflow: auto; }
    .height-parent { height: 200px; max-width: 300px; background: #eee; }
    .half { height: 50%; background: #cbe8d7; }
  </style>
</head>
<body>
  <h1>Comparing element sizes</h1>
  <h2>Same width: 300px</h2>
  <div class="compare content">content-box：344px to border</div>
  <div class="compare border">border-box：300px to border</div>
  <h2>Fluid width with minimum and maximum limits</h2>
  <div class="fluid">The maximum width is 32rem and the minimum height is 10rem. Try adding more sentences.</div>
  <div class="limits">The width is at least 180px and at most 320px.</div>
  <h2>fixed height 96px</h2><div class="height-box fixed"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>Height that fits the content</h2><div class="height-box"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>Minimum height: 160px</h2><div class="height-box minimum"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>Maximum height: 96px, with scrolling</h2><div class="height-box limited" tabindex="0" role="region" aria-label="Maximum Height Comparison"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>200px height of 50% of parent</h2><div class="height-parent"><div class="half">Height: 100px</div></div>
</body>
</html>

1. Überprüfen Sie die tatsächliche Breite von .content und .border in einem breiten Fenster. Sie beträgt jeweils 344px und 300px. Wenn Sie nur das Padding der Content-Box auf 30px ändern, wird es 364px sein, und die äußere Breite der Border-Box bleibt bei 300px, selbst nach derselben Änderung.
2. Reduzieren Sie die Fensterbreite, um zu sehen, ob die .fluid mit ihrem übergeordneten Element schrumpft. In einem breiten Fenster mit einer Root von 16px beträgt das Maximum 512px. Ändern Sie min-width von .limits vorübergehend zu 360px. Die Mindestbreite setzt sich gegen max-width: 320px durch. Setzen Sie sie wieder auf 180px zurück.
3. Fügen Sie denselben Absatz zu den vier Höhenvergleichsfeldern hinzu. Die feste Höhe sollte über die Grenzen hinaus überlaufen, auto und min-height sollten bei Bedarf wachsen, und das max-height-Panel sollte mit internem Scrollen lesbar sein.
4. Entfernen Sie height: 200px vom übergeordneten Element. Überprüfen Sie, dass die Höhe von 50% des Kindes nicht mehr bei 100px bleibt, und stellen Sie die ursprüngliche Deklaration wieder her, um sicherzustellen, dass sie wieder 100px beträgt.
5. Erhöhen Sie die Schriftgröße oder den Vergrößerungsfaktor Ihres Browsers. Stellen Sie sicher, dass Buchstaben bei fester Höhe nicht abgeschnitten werden oder sich überlappen, und üben Sie die Beurteilung, wann auto für Fließtext verwendet wird, der keine Größenbeschränkungen erfordert.

Wenn trotz width: 100% horizontaler Überlauf entsteht, überprüfen Sie box-sizing, linke und rechte Außenabstände, große min-width und lange Zeichenkette in dieser Reihenfolge. Verwechseln Sie nicht die Größe des Inhalts, der in den Entwicklertools angezeigt wird, mit der Größe der Rahmen. Nach der Änderung des Wertes stellen Sie die ursprüngliche Deklaration wieder her, um die Vergleichsbedingung beizubehalten.