Testen Sie Ihre Fähigkeiten: Größenbestimmung

Größenbestimmung 1

In dieser Aufgabe haben Sie zwei Boxen.

Um die Aufgabe abzuschließen:

1. Geben Sie der ersten Box eine Größe, sodass die Höhe mindestens 100px beträgt, selbst wenn weniger Inhalt vorhanden ist, der sie auf diese Höhe bringen würde. Der Inhalt sollte nicht überlaufen, wenn er nicht in die Box passt.
2. Um dies zu testen, entfernen Sie den Inhalt aus dem HTML, um sicherzustellen, dass Sie immer noch eine 100px hohe Box haben, selbst ohne Inhalt.
3. Geben Sie der zweiten Box eine feste Größe von 100px Höhe. In diesem Fall sollte der Inhalt überlaufen.

Der Ausgangspunkt der Aufgabe sieht so aus:

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

<div class="box box1">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
    corn soko endive gumbo gourd.
  </p>
</div>

<div class="box box2">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
    corn soko endive gumbo gourd.
  </p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
  padding: 1em;
}

.box {
  border: 5px solid black;
  width: 400px;
  margin-bottom: 1em;
}

.box1 {
  /* Add styles here */
}

.box2 {
  /* Add styles here */
}

Das aktualisierte Styling sollte so aussehen:

.box1 {
  min-height: 100px;
}

.box2 {
  height: 100px;
}

Größenbestimmung 2

In dieser Aufgabe haben Sie eine Box, die eine andere Box enthält.

Um die Aufgabe abzuschließen:

1. Stellen Sie sicher, dass die innere Box eine Breite von 60% der Breite der äußeren Box hat. Die box-sizing-Eigenschaft ist auf border-box gesetzt, was bedeutet, dass die Gesamtbreite jegliches padding und border einschließt.
2. Geben Sie der inneren Box 10% padding auf allen Seiten.

Der Ausgangspunkt der Aufgabe sieht so aus:

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

<div class="box">
  <div class="inner">Make me 60% of my parent's width.</div>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
  padding: 1em;
}

.box {
  border: 5px solid black;
  width: 400px;
  margin-bottom: 1em;
}

.inner {
  background-color: rebeccapurple;
  color: white;
  border-radius: 5px;
}

* {
  box-sizing: border-box;
}
.inner {
  /* Add styles here */
}

Das aktualisierte Styling sollte so aussehen:

.inner {
  width: 60%;
  padding: 10%;
}

Größenbestimmung 3

In dieser Aufgabe haben Sie zwei Bilder in Boxen. Ein Bild ist kleiner als die Box, während das andere größer ist und aus der Box herausragt.

Um die Aufgabe abzuschließen, stellen Sie sich vor, dass die Box responsiv ist und daher wachsen und schrumpfen könnte. Wenden Sie eine Deklaration auf die Bilder an, sodass das große Bild in die Box schrumpft, das kleine Bild jedoch nicht gedehnt wird.

Der Ausgangspunkt der Aufgabe sieht so aus:

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

<div class="box">
  <img
    alt="A pink star"
    src="https://mdn.github.io/shared-assets/images/examples/star-pink_256x256.png" />
</div>

<div class="box">
  <img
    alt="Hot air balloons flying in clear sky, and a crowd of people in the foreground"
    src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
</div>

body {
  font: 1.2em / 1.5 sans-serif;
  padding: 1em;
}
.box {
  border: 5px solid black;
  margin-bottom: 1em;
  width: 500px;
}

img {
  /* Add styles here */
}

Das aktualisierte Styling sollte so aussehen:

img {
  max-width: 100%;
}

• Zurück
• Übersicht: Grundlagen der CSS-Gestaltung
• Weiter