Basis van webtechnologie

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

Wat is voor het element met de bovenstaande CSS de breedte van de buitenkant van de linkerrand van de border tot de buitenkant van de rechterrand van de border?

  1. A200px
  2. B224px
  3. C264px
Antwoord en toelichting tonen

Antwoord: B. 224px

In het CSS-boxmodel bestaat een element van binnen naar buiten uit de inhoud (content), de padding, de border en de margin. Met box-sizing: content-box (de standaardwaarde) is width alleen de breedte van de inhoud, dus de breedte tot de buitenkant van de border is 200 + 10 × 2 + 2 × 2 = 224px. De margin is de ruimte buiten de border en vormt de afstand tot andere elementen. Met box-sizing: border-box omvat width alles tot en met de border, en wordt de breedte van de inhoud 200 − 24 = 176px.

Dit onderwerp oefenen Naar de onderwerppagina

Meer vragen over Basis van webtechnologie

  1. Neem aan dat er geen andere stijldeclaraties zijn. Welke kleur heeft de tekst „Hello” in de bovenstaande HTML?
  2. Bij de verwerking die een browser uitvoert voordat het eerste scherm wordt getoond (het kritieke renderingpad, critical rendering path), laat een <script src="app.js"> zonder attributen in <head> de HTML-parser op dat punt stoppen. Welke beschrijving van het gedrag als aan dit element het attribuut defer wordt toegevoegd, is juist?
  3. In welke volgorde worden de tekens op de console getoond als de bovenstaande JavaScript in een browser wordt uitgevoerd?
  4. Welke URL wordt volgens de same-origin policy van de browser beschouwd als URL met dezelfde origin als https://www.example.com/app/index.html?
  5. JavaScript op een pagina van https://app.example.com gebruikt fetch om een POST-verzoek met een body van Content-Type: application/json naar https://api.example.net/orders te sturen. Welke beschrijving van het gedrag van CORS in dit geval is juist?