Containing Block
Enthaltender Block
Ein enthaltender Block ist das Rechteck, das ein Element verwendet, um seine Position und prozentuale Größe zu berechnen.
Ein weiteres Beispiel
Platziere ein Verkaufszeichen 8px vom Blockanfang und 8px vom Inline-Ende. Das Setzen von `position: relative` auf der Karte macht sie zum richtigen enthaltenen Block. Ein transformierter Karussell-Vorfahre kann das Zeichen nicht mehr in eine entfernte Ecke ziehen.
Hauptteile
- 01Vorfahr herstellen
- 02Referenzrechteck
- 03Aufgelöstes Einfügefeld oder Prozentsatz
Verwenden Sie es, wenn
Finden Sie das reale enthaltende Blockelement, bevor Sie Prozentgrößen, absolute oder klebrige Positionen oder transformierte Eltern beheben.
Nutze es nicht, wenn
Gehe nicht davon aus, dass es immer das nächstgelegene DOM-Elternelement oder die Ansicht ist. Positionierungs- und Containment-Regeln können dies ändern.
In Code verwendeter Name
positioning scheme + containing-block-establishing ancestor Vor dem Ausliefern
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Complete the task with Enthaltender Block (Containing Block). User context: Platziere ein Verkaufszeichen 8px vom Blockanfang und 8px vom Inline-Ende. Das Setzen von `position: relative` auf der Karte macht sie zum richtigen enthaltenen Block. Ein transformierter Karussell-Vorfahre kann das Zeichen nicht mehr in eine entfernte Ecke ziehen. Design concept to apply: Enthaltender Block (Containing Block). Why it fits: Finden Sie das reale enthaltende Blockelement, bevor Sie Prozentgrößen, absolute oder klebrige Positionen oder transformierte Eltern beheben. Do not use it when: Gehe nicht davon aus, dass es immer das nächstgelegene DOM-Elternelement oder die Ansicht ist. Positionierungs- und Containment-Regeln können dies ändern. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): Ein formelles Dokument kann trotzdem ein Entwurf, ein Release Candidate oder die finale Version sein. Prüfe seinen Status und die Browser- oder Plattform-Unterstützung. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Diese Anfrage prüfen
Review how Enthaltender Block (Containing Block) is used now. Definition: Ein enthaltender Block ist das Rechteck, das ein Element verwendet, um seine Position und prozentuale Größe zu berechnen. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.