9. Unterrichtsblock

CSS Overflow

Die CSS overflow-Eigenschaft steuert, was mit Inhalten passiert, die zu groß sind, um in einen Bereich zu passen. Dieser Text ist wirklich lang und die Höhe seines Containers beträgt nur 100 Pixel. Daher wird eine Bildlaufleiste hinzugefügt, um dem Leser zu helfen, den Inhalt zu scrollen. Eigenschaft: overflow: scroll;

Die overflow-Eigenschaft kontrolliert, was mit Inhalt passiert, der größer als sein Rahmen ist

Die overflow-Eigenschaft gibt an, ob der Inhalt abgeschnitten oder Bildlaufleisten hinzugefügt werden soll, wenn der Inhalt eines Elements zu groß ist, um in den angegebenen Bereich zu passen.

Die overflow-Eigenschaft hat die folgenden Werte:

• visible– Standard. Der Überlauf wird nicht abgeschnitten. Der Inhalt wird außerhalb der Box des Elements gerendert
• hidden– Der Überlauf wird abgeschnitten und der Rest des Inhalts ist unsichtbar
• scroll– Der Überlauf wird abgeschnitten und eine Bildlaufleiste hinzugefügt, um den Rest des Inhalts anzuzeigen
• auto– Ähnlich wie scroll, fügt aber nur bei Bedarf Bildlaufleisten hinzu
• overflow-x gibt an, was mit den linken/rechten Rändern des Inhalts geschehen soll.
• overflow-y gibt an, was mit den oberen/unteren Rändern des Inhalts geschehen soll.

Hinweis: Die overflow-Eigenschaft funktioniert nur für Blockelemente mit einer bestimmten Höhe.

Hinweis: In OS X Lion (auf Mac) sind Bildlaufleisten standardmäßig ausgeblendet und werden nur angezeigt, wenn sie verwendet werden (auch wenn „overflow: scroll“ eingestellt ist).

CSS inline-block

Unterschied zu display: inline;

Im Vergleich zu display: inline, besteht der Hauptunterschied darin, dass display: inline-block es möglich macht, eine Breite und Höhe für das Element festzulegen.

Auch werden bei display: inline-block die oberen und unteren border & padding respektiert, bei display: inline nicht.

Unterschied zu display: block;

Im Vergleich zu display: block besteht der Hauptunterschied darin, dass display: inline-block nach dem Element kein Zeilenumbruch hinzugefügt wird, sodass das Element neben anderen Elementen stehen kann.

Das folgende Beispiel zeigt das unterschiedliche Verhalten von display: inline, display: inline-block und display: block:

span .eins {
  display: inline; /* Standard-Wert für span-Elemente */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid red;
  background-color: pink;
}

span .zwei {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid red;
  background-color: pink;
}

span .drei {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid red;
  background-color: pink;
}

display: inline

display: inline-block

display: block

Verwenden von inline-block zum Erstellen von Navigationslinks

Eine häufige Verwendung von display: inline-block ist, Listenelemente horizontal statt vertikal anzuzeigen. Das folgende Beispiel erstellt horizontale Navigationslinks:

Beispiel

.nav {
  background-color: yellow;
  list-style-type: none;
  text-align: center; 
  padding: 0;
  margin: 0;
}

.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}

Standardgemäß werden die Listenelemente vertikal dargestellt. In diesem Beispiel stellen wir diese mit inline-block nebeneinander dar. Hinweis: beim verkleinern des Browserfensters, erfolg automatisch ein Umbruch, wenn es zu eng wird.

• Overflow
• Inline-Block
• Align
• Opacity

CSS align – Elemente horizontal und vertikal zentrieren

• Um ein Blockelement (wie <div>) horizontal zu zentrieren, verwendet man margin: auto;
• Das Festlegen der Breite des Elements verhindert, dass es sich bis zu den Rändern seines Containers ausdehnt.
• Das Element nimmt dann die angegebene Breite ein und der verbleibende Platz wird gleichmäßig auf die beiden Ränder aufgeteilt.

Dieses div-Element ist zentriert:

.zentriert {
  margin: auto;
  width: 50%;
  border: 3px solid pink;
  padding: 10px;
}

Hinweis: Die Zentrierung hat keine Auswirkung, wenn die width-Eigenschaft nicht festgelegt ist (oder auf 100 % festgelegt ist).

Text zentrieren

Um den Text einfach innerhalb eines Elements zu zentrieren, verwendet man text-align: center;

Dieser Text ist zentriert

.center {
  text-align: center;
  border: 3px solid green;
}

Zentrieren eines Bildes

Um ein Bild zu zentrieren, setzt Sie man das linke und rechte margin auf auto und machet es zu einem block Element:

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Vertikal zentrieren – mit padding

Es gibt viele Möglichkeiten, ein Element in CSS vertikal zu zentrieren. Eine einfache Lösung ist die Verwendung von top und bottom padding:

.zentriert {
  padding: 70px 0;
  border: 2px solid pink;
}

.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}

Vertikal zentrieren – Zeilenhöhe verwenden

Ein weiterer Trick besteht darin, die line-heightEigenschaft mit einem Wert zu verwenden, der gleich der heightEigenschaft ist:

.zentriert {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

/* Wenn der Text mehrere Zeilen hat fügt man folgende Code hinzu: */
.zentriert p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

Vertikal zentrieren – Verwenden von position und transform

Wenn padding und line-height keine Optionen sind, besteht eine andere Lösung darin, die position– und die transform-Eigenschaft zu verwenden:

.zentriert {
  height: 200px;
  position: relative;
  border: 3px solid green;
}

.zentriert p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Hinweis: Mehr Informationen die Eigenschaft transform bearbeiten wir in einem späteren Unterrichtsblock

Vertikal zentrieren – flexbox verwenden

Man kann flexbox auch verwenden, um Dinge zu zentrieren. Hierbei ist zu beachten, dass flexbox in IE10 und früheren Versionen nicht unterstützt wird:

Ich bin vertikal und horizontal zentriert.

.zentrierung {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 2px solid pink;
}

CSS opacity

Die opacity-Eigenschaft gibt die Deckkraft/Transparenz eines Elements an.

Transparentes Bild

Die opacity-Eigenschaft kann einen Wert von 0,0 bis 1,0 annehmen. Je niedriger der Wert, desto transparenter:

img {
  opacity: 0.5;
}

Transparenter Hover-Effekt

Die opacityEigenschaft wird oft zusammen mit dem :hover Selektor verwendet, um die Deckkraft beim Mouseover zu ändern:

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}