Web design hoofdsuk 8

Question 1

Waarom is kennis over het box model belangrijk is?

Answer 1

Om te begrijpen hoe elementen op een website worden gepositioneerd en weergegeven .

Question 2

Uit welke vier delen bestaat de box model?

Answer 2

Content , padding , margin en border

Question 3

Wat is content

Answer 3

Dit is de werkelijke inhoud van het element, zoals tekst, afbeeldingen, of andere media.

Question 4

Wat is padding ?

Answer 4

Dat is de ruimte tussen de content en de border van het element. Als je de padding vergroot, komt er meer lege ruimte rondom de inhoud binnen de doos.

Question 5

Wat is border?

Answer 5

Dit is de rand rondom de padding en de inhoud .Je kunt deze rand een kleur, dikte, en stijl geven.

Question 6

Wat is margins?

Answer 6

Dit is de ruimte buiten de border van het element.

Question 7

Waarvoor wordt het content gebruikt?

Answer 7

Om de eigenlijke informatie of media te tonen die je aan de gebruiker wilt laten zien.

Question 8

Waarvoor wordt het padding gebruikt?

Answer 8

1-Om ruimte te creëren rondom de inhoud binnen het element.
2-Om ervoor te zorgen dat de tekst of afbeelding niet direct tegen de rand van het element aan zit, wat het visueel aantrekkelijker kan maken.

Question 9

Waarvoor wordt de borders gebruikt?

Answer 9

1-Om een visuele scheiding te maken tussen de inhoud van het element en andere elementen.

2-Om decoratieve effecten toe te voegen, zoals gekleurde of gestileerde randen.

Question 10

Waarvoor wordt margins gebruikt?

Answer 10

1-Om afstand te creëren tussen het element en andere elementen op de pagina.

Om elementen beter te positioneren op de pagina door lege ruimte om ze heen te plaatsen.

de margins bepaalt de ruimte tussen de hele box model en andere elementen op web pagina

Question 11

Wat zijn de onderdelen van het box model?

Answer 11

Afmetingen van de doos (height en width) ,
Randen van de doos (border) ,
Inzet van de doos (padding)
Marges van de doos (margin)

Question 12

Wat is afmetingen van de doos (height en width)?

Answer 12

Dit zijn de hoogte en breedte van de inhoud van een element.

Standaard zijn deze afmetingen precies zo groot als de inhoud van het element.

Question 13

Wat is de Inzet van de doos (padding):

Answer 13

Dit is de ruimte tussen de inhoud en de rand van de doos.

Het creëert extra witruimte aan de binnenkant van de doos.

Question 14

Wat is Randen van de doos (border):

Answer 14

Dit is de rand rond de doos van een element.

De border kan een kleur, dikte en stijl hebben (bijv. een gestreepte rode lijn van 3px dik).

Question 15

Wat is Marges van de doos (margin):

Answer 15

Dit is de extra witruimte aan de buitenkant van de doos.

Het creëert afstand tussen de doos en andere elementen op de webpagina.

Question 16

OPMERKING

Answer 16

Natuurlijk! Hier is een eenvoudige uitleg van hoe de border de totale afmetingen van een element beïnvloedt:

Voorbeeld
We hebben een <div>-element met de volgende CSS:

```css
.box {
height: 50px;
width: 200px;
background-color: lightgreen;
border: 2px solid green;
}
~~~

Wat gebeurt er?
- Height (hoogte): De inhoud van de div is 50 pixels hoog.
- Width (breedte): De inhoud van de div is 200 pixels breed.
- Border (rand): Er is een groene rand van 2 pixels dik toegevoegd rondom de div.

Totale Afmetingen
Als je een border toevoegt, moet je de dikte van de border optellen bij de hoogte en breedte van de inhoud van de div:

• Breedte:
  
  • De breedte van de inhoud is 200 pixels.
  • Er komt aan beide zijkanten een border van 2 pixels bij.
  • Dus, de totale breedte wordt: 200 pixels (inhoud) + 2 pixels (linker border) + 2 pixels (rechter border) = 204 pixels.
• Hoogte:
  
  • De hoogte van de inhoud is 50 pixels.
  • Er komt aan de boven- en onderkant een border van 2 pixels bij.
  • Dus, de totale hoogte wordt: 50 pixels (inhoud) + 2 pixels (boven border) + 2 pixels (onder border) = 54 pixels.

Simpele Uitleg
Wanneer je een border toevoegt, maak je de div een beetje groter omdat de border buiten de oorspronkelijke hoogte en breedte van de inhoud valt. In dit geval maakt de 2 pixels dikke border de div 4 pixels breder (2 pixels aan elke kant) en 4 pixels hoger (2 pixels aan de bovenkant en 2 pixels aan de onderkant).

Dus, zelfs als je de inhoud 200 pixels breed en 50 pixels hoog hebt gemaakt, wordt de totale grootte van de div 204 pixels breed en 54 pixels hoog door de border.

Question 17

Wat is het rol van box sizing?

Answer 17

Box-sizing: border-box zorgt ervoor dat de opgegeven breedte en hoogte de totale afmetingen van het element omvatten, inclusief padding en border.

Question 18

Waarom box-sizing: border-box gebruiken?

Answer 18

Het maakt het eenvoudiger om de grootte van je elementen te beheren.

Je hoeft niet telkens de padding en border op te tellen bij de breedte en hoogte.

Het zorgt ervoor dat de opgegeven breedte en hoogte gelden voor het hele element, inclusief de padding en border.

Question 19

Als jij geen box sizing toevoeged , wat gaat gebeuren?

Answer 19

Zonder box-sizing: border-box: De opgegeven breedte en hoogte zijn alleen voor de inhoud. Padding en border worden erbij opgeteld.

Question 20

Als jij wel een box sizing gebruikt , Wat gaat gebeuren?

Answer 20

Met box-sizing: border-box: De opgegeven breedte en hoogte omvatten de inhoud, padding en border.

Question 21

OPMERKING!

Answer 21

Door * { box-sizing: border-box; } toe te voegen aan je CSS, zorg je ervoor dat alle elementen op de website deze handige eigenschap gebruiken.

Question 22

OPMERKING!

Answer 22

Bij elementen naast elkaar worden alleen de horizontale marges (links en rechts) gecombineerd.

Verticale marges (boven en onder) worden niet gecombineerd.
Met de eigenschap display: inline-block; worden de div’s naast elkaar gepositioneerd, en de horizontale marges van beide div’s worden bij elkaar opgeteld.

Question 23

Elke browser past standaard marges toe op het venster, zelfs als je zelf geen marges hebt ingesteld. Om met een ‘schone lei’ te beginnen, kun je deze standaard marges in je CSS aanpassen , maar als jij wilt helemaal geen margen hebben wat moet jij wel toeveogen in jij CSS?

Answer 23

*{box-sizing: border-box; margin: 0;}