Darstellung und Sichtbarkeit in CSS beeinflussen

Die Elemente einer Website werden in Inline- und Block-Elemente unterschieden. Diese unterscheiden sich auch im Verhalten. Beispielsweise nehmen Block-Elemente standardmäßig die gesamte verfügbare Breite ein und Inline-Elemente nur soweit, wie es für den Inhalt notwendig ist. In manchen Fällen ist es notwendig, den Inline-Elementen das Verhalten von Block-Elementen zuzuweisen und umgekehrt. Hierfür kann die Eigenschaft display verwendet werden.

Mit der Eigenschaft visibility wird die Sichtbarkeit eines Elements festgelegt werden. So kann man erreichen, dass ein Element versteckt und angezeigt wird, z.B. bei einem Menü, der ein- und ausgeblendet werden soll.

Wenn die Inhalte größer sind als das umschließende Element, dann ragen sie standardmäßig aus der Box heraus. Mit der Eigenschaft clip-path können diese zugeschnitten werden. Bei den Formen hat man im Gegensatz zum Vorgänger clip, mehrere Möglichkeiten, z.B. Kreise oder Rechtecke mit abgerundeten Ecken.

In manchen Fällen kann es notwendig sein, einem Element eine gewisse Transparenz zuzuweisen, sodass die Deckkraft geringer als 100% ist. Hierfür kann man die Eigenschaft opacity verwenden.

Wenn man den Elementen eine Größe zuweist, dann kann es passieren, dass die Inhalte zu groß für das Element sind. In solchen Fällen ragen sie aus der Box hinaus. Mit der Eigenschaft overflow kann das Verhalten bei übergroßen Inhalten beeinflusst werden. Damit kann man z.B. den hinausragenden Teil verstecken oder Scrollleisten an der Box einblenden lassen.