Deutsch
Menü

Grundlagen der Webtechnologien

.card {
  box-sizing: content-box;
  width: 200px;
  padding: 10px;
  border: 2px solid #333;
  margin: 20px;
}

Wie breit ist das mit dem obigen CSS gestaltete Element von der Außenkante des linken Rahmens bis zur Außenkante des rechten Rahmens?

  1. A200px
  2. B224px
  3. C264px
Antwort und Erläuterung anzeigen

Antwort: B. 224px

Im CSS-Boxmodell besteht ein Element von innen nach außen aus Inhalt, Innenabstand (Padding), Rahmen (Border) und Außenabstand (Margin). Bei box-sizing: content-box (dem Standardwert) gibt width nur die Breite des Inhalts an, die Breite bis zur Außenkante des Rahmens beträgt also 200 + 10 × 2 + 2 × 2 = 224px. Der Außenabstand ist der Freiraum außerhalb des Rahmens und bildet den Abstand zu anderen Elementen. Mit box-sizing: border-box umfasst width alles bis einschließlich Rahmen, und die Breite des Inhalts wird 200 − 24 = 176px.

Dieses Thema üben Zur Themenseite

Weitere Fragen zu Grundlagen der Webtechnologien

  1. Es gibt keine weiteren Stilangaben. Welche Farbe hat der Text „Hello“ im obigen HTML?
  2. Bei der Verarbeitung, die ein Browser bis zur Anzeige des ersten Bildschirms ausführt (dem kritischen Rendering-Pfad), hält ein ohne Attribute in <head> geschriebenes <script src="app.js"> das Parsen des HTML an dieser Stelle an. Wie verhält sich das Element, wenn es das Attribut defer erhält?
  3. In welcher Reihenfolge erscheinen die Zeichen in der Konsole, wenn das obige JavaScript im Browser ausgeführt wird?
  4. Welche URL hat nach der Same-Origin-Policy des Browsers denselben Ursprung wie https://www.example.com/app/index.html?
  5. JavaScript auf einer Seite unter https://app.example.com will mit fetch eine POST-Anfrage mit einem Body vom Content-Type application/json an https://api.example.net/orders senden. Welche Aussage über das Verhalten von CORS in diesem Fall ist richtig?