Web design hoofdstuk 9 & 10

Question 1

Wat is de betekenis van “flow van elementen” in HTML?

Answer 1

Het is de manier waarop elementen op een webpagina worden weergegeven, van boven naar beneden en van links naar rechts, zoals ze in het HTML-document zijn geschreven.

Question 2

Hoe geeft een browser standaard de elementen van een HTML-document weer?

Answer 2

De browser toont de elementen in dezelfde volgorde als ze in het HTML-document zijn geschreven, van boven naar beneden en van links naar rechts.

Question 3

Wat zijn CSS-eigenschappen die de positie van elementen veranderen?

Answer 3

CSS-eigenschappen zoals position, float, en display kunnen de positie van elementen op een pagina veranderen.

Question 4

Hoe kunnen CSS-eigenschappen aangeven waar een element zich op een pagina bevindt?

Answer 4

CSS-eigenschappen zoals top, bottom, left, en right bepalen de exacte locatie van een element op een pagina.

Question 5

Welke eigenschappen in CSS kunnen bepalen of een element een “regel” kan delen met andere elementen?

Answer 5

Eigenschappen zoals display, position, en float bepalen of een element een regel kan delen met andere elementen op de pagina.

Question 6

Wat wordt bedoeld met “gerelateerde attributen” van een element in CSS?

Answer 6

Dit zijn de CSS-eigenschappen die invloed hebben op hoe een element wordt weergegeven en gepositioneerd op een webpagina.

Question 7

Hoe kunnen CSS-eigenschappen de weergave van elementen in een HTML-document veranderen?

Answer 7

CSS-eigenschappen kunnen de grootte, positie, kleur, achtergrond en andere visuele aspecten van elementen aanpassen om de weergave op een webpagina te veranderen.

Question 8

Wat is de rol van de display-eigenschap in CSS?

Answer 8

Het bepaalt hoe HTML-elementen op een pagina worden weergegeven. Deze eigenschap kan vier verschillende waarden hebben

Question 9

Wat is display-block?

Answer 9

Het zorgt ervoor dat een HTML-element de hele breedte van de pagina inneemt en altijd op een nieuwe regel begint. Het kan geen andere elementen naast zich hebben. Dit soort elementen hebben vanzelf de hoogte die nodig is om al hun inhoud weer te geven.

Question 10

Wat is de rol van display: inline?:

Answer 10

Hiermee worden elementen naast elkaar weergegeven zonder een nieuwe regel te starten. Ze nemen alleen zoveel horizontale ruimte in als nodig is voor hun inhoud.

Question 11

Wat is de rol van display: inline - block?:

Answer 11

display : inline - block combineert de eigenschappen van block en inline. Het laat elementen naast elkaar staan, maar ze kunnen ook de hoogte en breedte hebben zoals een blokelement.

Question 12

display: none: Dit verbergt het element volledig, het is alsof het element niet bestaat in de pagina?

Answer 12

display: none verbergt het element volledig, het is alsof het element niet bestaat in de pagina

Question 13

Wat is het verschill tussen block - level element en een inline element?

Answer 13

Een block-level element begint altijd op een nieuwe regel en strekt zich uit over de volledige breedte van de pagina. Het kan geen ander block element op dezelfde regel hebben.

Een inline element begint niet op een nieuwe regel en neemt alleen zoveel ruimte in als nodig is voor zijn inhoud. Het kan naast andere inline-elementen op dezelfde regel staan.

Question 14

wat is het verschill tussen static en relative position?

Answer 14

Kort gezegd, position: static plaatst een element op de standaardpositie zonder mogelijkheid tot aanpassing van de positie, terwijl
position: relative een element op zijn oorspronkelijke positie plaatst, maar de mogelijkheid biedt om de positie relatief te verplaatsen zonder de lay-out van andere elementen te beïnvloeden.

Question 15

Hoeveel posities bestaan?

Answer 15

vijf en die zijn :static , relatieve , Absolute , fixed en Sticky.

Question 15

Wanner gebruiken wij een static positie?

Answer 15

Dit is de standaardpositie van elementen. We gebruiken position: static wanneer we willen dat een element zich gedraagt volgens de normale documentstroom, zonder enige positionering of verplaatsing

Question 16

Wanner gebruiken wij een relative positie?

Answer 16

We gebruiken position: relative wanneer we een element willen verplaatsen ten opzichte van zijn normale positie. Het element wordt verplaatst ten opzichte van waar het normaal zou zijn, maar andere elementen worden niet beïnvloed.

Question 17

Wanner gebruiken wij een Absolute positie?

Answer 17

Absolute: Met position: absolute kunnen we een element losmaken van de normale documentstroom en het positioneren ten opzichte van zijn naaste gepositioneerde voorouder (meestal een element met een andere position dan static) of het hele venster.

Question 18

Wanner gebruiken wij een fixed positie?

Answer 18

Fixed: We gebruiken position: fixed wanneer we willen dat een element op een specifieke positie op het scherm blijft, zelfs als de pagina wordt gescrolld. Dit is handig voor het maken van elementen zoals navigatiebalken of meldingsvensters die altijd zichtbaar moeten zijn.

Question 19

Wanner gebruiken wij een sticky positie?

Answer 19

We gebruiken position: sticky wanneer we willen dat een element zich relatief gedraagt ​​totdat het een bepaalde scrollpositie bereikt. Daarna blijft het element “vastgeplakt” op die positie, zelfs als er verder wordt gescrolld. Dit is handig voor elementen zoals navigatiemenu’s die bovenaan de pagina moeten blijven staan terwijl gebruikers naar beneden scrollen.

Question 20

ALLES OVER CLEAR

Answer 20

De clear eigenschap in CSS wordt gebruikt om te bepalen hoe elementen zich moeten gedragen ten opzichte van zwevende elementen. Wanneer een element clear toepast, beïnvloedt het de positionering van elementen naast zwevende elementen.

Hier is een eenvoudige uitleg van de rol van de clear eigenschap:

Clearing float: Als een element naast een zwevend element moet worden geplaatst, maar niet naast het zwevende element kan verschijnen vanwege de float, kun je clear gebruiken om te bepalen aan welke kant van het zwevende element het volgende element moet verschijnen.

Voorkomen van overlap: Door clear toe te passen op een element, kun je voorkomen dat het overlapt met een eerder zwevend element, waardoor een betere lay-out en visuele hiërarchie ontstaat.

Kortom, de clear eigenschap wordt gebruikt om de positionering van elementen naast zwevende elementen te beheren en overlappende problemen op te lossen die worden veroorzaakt door het gebruik van floats in CSS-layouts.

Question 21

Clear waarden

Answer 21

left - de linkerkant van het element zal geen enkel ander element binnen hetzelfde bevatt ende
element raken.
* right - de rechterkant van het element zal geen enkel ander element binnen hetzelfde bevatt ende
element raken.
* both - geen van beide zijden van het element raakt een ander element binnen hetzelfde bevatt ende
element.
* none - het element kan beide zijden raken

Question 22

Justify_- content eigenschappen) wat is het rol van flex-start?

Answer 22

Elementen aan de linkerkant van de container uitlijnen

Question 23

Wat is het rol van flex-end?

Answer 23

Elementen aan de rechterkant van de container uitlijnen.

Question 24

Wat is het rol van center?

Answer 24

center: Elementen in het midden van de container uitlijnen.

Question 25

Wat is het rol van space between ?

Answer 25

space-between: Elementen opstellen gelijkmatig verdeeld over de as.

Question 26

Wat is het rol van space-around?

Answer 26

space-around: Elementen opstellen met gelijke ruimte aan de buitenkanten op de as.

Question 26

wat zijn de align-items?

Answer 26

align-items is een CSS-eigenschap die wordt gebruikt in flexbox lay-outs om de uitlijning van flex-items langs de dwarsas (verticale as) van een flexcontainer te bepalen. Het controleert hoe flex-items worden uitgelijnd in de richting loodrecht op de hoofdas van de flexcontainer.

Hier is een eenvoudige uitleg van align-items:

align-items wordt gebruikt om de uitlijning van flex-items langs de dwarsas van een flexcontainer te regelen.
Het heeft verschillende waarden, zoals flex-start, flex-end, center, baseline, en stretch.
Met align-items: flex-start worden de flex-items uitgelijnd aan het begin van de dwarsas van de flexcontainer.
Met align-items: flex-end worden de flex-items uitgelijnd aan het einde van de dwarsas van de flexcontainer.
Met align-items: center worden de flex-items gecentreerd langs de dwarsas van de flexcontainer.
Met align-items: baseline worden de flex-items uitgelijnd op hun baselijn.
Met align-items: stretch worden de flex-items uitgerekt om de hoogte van de flexcontainer te vullen.
Kort gezegd, align-items is een CSS-eigenschap waarmee je de verticale uitlijning van flex-items binnen een flexcontainer kunt beheren.

Question 27

Wat is het rol van baseline?

Answer 27

baseline: Elementen worden uitgelijnd op de basislijn van de container

Question 28

Wat is het rol van stretch?

Answer 28

stretch: Elementen worden uitgerokken om binnen de container te passen.

Question 29

Wat is het rol van flex direction?

Answer 29

flex-direction. Deze CSS eigenschap bepaald de richting in dewelke de elementen in hun container geplaatst worden, en aanvaard de volgende waarden

Question 30

Wat is het rol van row elementen?

Answer 30

row: Elementen worden geplaatst in dezelfde richting als deze van de tekst.

Question 30

Wat is het rol van row-reverse elementen?

Answer 30

row-reverse: Elementen worden geplaatst in de tegenovergestelde richting van de tekst.

Question 31

Wat is het rol van column elementen?

Answer 31

column: Elementen worden onder elkaar geplaatst

Question 32

Wat is het rol van column-reverse elementen?

Answer 32

column-reverse: Elementen worden boven elkaar geplaatst.

Question 33

Wat is de order eigenschapp?

Answer 33

order wordt gebruikt om de volgorde van flex-items binnen een flexcontainer te bepalen.Kortom, met de order eigenschap kun je de visuele volgorde van flex-items binnen een flexcontainer beheren zonder de HTML-structuur te wijzigen.

Question 34

Alles over Flex-wrap eigenschap

Answer 34

Standaard probeert een flexcontainer om alle flex-items in één enkele rij (of kolom) te plaatsen, zonder dat ze naar de volgende rij (of kolom) worden verplaatst, zelfs als ze niet in de beschikbare ruimte passen.
Met flex-wrap: nowrap (de standaardwaarde) worden de flex-items niet op een nieuwe regel geplaatst en worden ze in de flexcontainer gedrukt, waardoor ze mogelijk buiten de container kunnen uitsteken.
Met flex-wrap: wrap worden de flex-items op meerdere regels (of kolommen) geplaatst als ze niet meer in de beschikbare ruimte passen, zodat ze binnen de container blijven.
Met flex-wrap: wrap-reverse wordt hetzelfde gedaan als wrap, maar de volgorde van de rijen (of kolommen) wordt omgekeerd, waarbij de laatste rij (of kolom) bovenaan komt te staan en de eerste rij (of kolom) onderaan.

Question 35

The two properties flex-direction and flex-wrap are used so often together that the shorthand property flex-flow was created to combine them. This shorthand property accepts the value of the two properties separated by a space.

For example, you can use flex-flow: row wrap to set rows and wrap them.

Try using flex-flow to repeat the previous level.

Answer 35

pond {

display: flex;
flex-wrap: wrap;
flex-direction: column;
}

Question 36

The frogs are spread all over the pond, but the lilypads are bunched at the top. You can use align-content to set how multiple lines are spaced apart from each other. This property takes the following values:

flex-start: Lines are packed at the top of the container.
flex-end: Lines are packed at the bottom of the container.
center: Lines are packed at the vertical center of the container.
space-between: Lines display with equal spacing between them.
space-around: Lines display with equal spacing around them.
stretch: Lines are stretched to fit the container.
This can be confusing, but align-content determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container. When there is only one line, align-content has no effect.

Answer 36

j

Question 37

Wat zijn de justify-content elementen

Answer 37

The justify-content property in CSS is used in flexbox layouts to determine the alignment of flex items along the main axis (horizontal axis) of the flex container. It controls how flex items are distributed and aligned within the available space of the flex container.

Here are the main values for justify-content:

flex-start: This aligns the flex items at the start of the main axis of the flex container. This means they will be positioned at the left (for horizontal layouts) or top (for vertical layouts).

flex-end: This aligns the flex items at the end of the main axis of the flex container. So, they will be positioned at the right (for horizontal layouts) or bottom (for vertical layouts).

center: This centers the flex items along the main axis of the flex container. This means they will be placed in the middle of the available space.

space-between: This evenly distributes the flex items along the main axis of the flex container, with equal space between the items. The first item starts at the beginning of the container and the last item ends at the end of the container.

space-around: This distributes the flex items along the main axis of the flex container with equal space around each item. This means there is as much space between the items as there is at the ends of the container.

In short, justify-content allows you to determine how flex items are distributed and aligned along the main axis of the flex container.

De justify-content eigenschap in CSS wordt gebruikt in flexbox lay-outs om de uitlijning van flex-items langs de hoofdas (horizontale as) van de flexcontainer te bepalen. Het controleert hoe flex-items worden verdeeld en uitgelijnd binnen de beschikbare ruimte van de flexcontainer.

Hier zijn de belangrijkste waarden voor justify-content:

flex-start: Hiermee worden de flex-items uitgelijnd aan het begin van de hoofdas van de flexcontainer. Dit betekent dat ze zich links (bij horizontale lay-outs) of bovenaan (bij verticale lay-outs) bevinden.

flex-end: Dit zorgt ervoor dat de flex-items worden uitgelijnd aan het einde van de hoofdas van de flexcontainer. Dus ze zullen zich rechts (bij horizontale lay-outs) of onderaan (bij verticale lay-outs) bevinden.

center: Met deze waarde worden de flex-items gecentreerd langs de hoofdas van de flexcontainer. Dit betekent dat ze in het midden van de beschikbare ruimte worden geplaatst.

space-between: Hiermee worden de flex-items gelijkmatig verdeeld langs de hoofdas van de flexcontainer, met gelijke ruimte tussen de items. Het eerste item bevindt zich aan het begin van de container en het laatste item bevindt zich aan het einde van de container.

space-around: Dit verdeelt de flex-items langs de hoofdas van de flexcontainer met gelijke ruimte rondom elk item. Dit betekent dat er evenveel ruimte is tussen de items als aan de uiteinden van de container.

Kortom, met justify-content kun je bepalen hoe flex-items worden verdeeld en uitgelijnd langs de hoofdas van de flexcontainer.

Question 38

Wat zijn de align-items elementen

Answer 38

The align-items property in CSS is used in flexbox layouts to determine how flex items are aligned along the cross axis (vertical axis for horizontal layouts, horizontal axis for vertical layouts) of the flex container. It controls how flex items are positioned within the flex container’s cross-axis space.

Here are the main values for align-items:

flex-start: Aligns flex items at the start of the cross axis of the flex container. For horizontal layouts, this means items are aligned at the top, and for vertical layouts, it means items are aligned at the left.

flex-end: Aligns flex items at the end of the cross axis of the flex container. For horizontal layouts, this means items are aligned at the bottom, and for vertical layouts, it means items are aligned at the right.

center: Centers flex items along the cross axis of the flex container. This means items are positioned in the middle of the cross-axis space.

baseline: Aligns flex items such that their baselines align. This is particularly useful when dealing with items of different text sizes.

stretch: Stretches flex items to fill the cross-axis of the flex container. This means items will expand to match the height (for horizontal layouts) or width (for vertical layouts) of the flex container.

In summary, align-items allows you to control how flex items are aligned along the cross axis of the flex container in a flexbox layout.

Question 39

Wat zijn de flex-direction elementen

Answer 39

The flex-direction property in CSS is used in flexbox layouts to determine the direction in which flex items are laid out within the flex container. It specifies whether flex items are laid out in rows or columns and the direction in which they are stacked.

Here are the main values for flex-direction:

1. row: Flex items are laid out in a horizontal row, starting from the left and stacking along the main axis (horizontal axis) of the flex container. This is the default value.
2. row-reverse: Flex items are laid out in a horizontal row, but in the reverse order, starting from the right and stacking along the main axis of the flex container.
3. column: Flex items are laid out in a vertical column, starting from the top and stacking along the main axis (vertical axis) of the flex container.
4. column-reverse: Flex items are laid out in a vertical column, but in the reverse order, starting from the bottom and stacking along the main axis of the flex container.

In summary, flex-direction allows you to control the direction in which flex items are laid out within the flex container, either horizontally or vertically, and whether they are stacked in the normal order or in reverse.

Question 40

Wat zijn de order elementen

Answer 40

The order property in CSS is used in flexbox layouts to control the order in which flex items appear within their flex container. It allows you to change the visual order of flex items without changing their position in the source code.

Here’s how the order property works:

• By default, flex items have an order value of 0, which means they appear in the order they appear in the source code.
• You can assign positive or negative integer values to the order property to change the order of flex items.
• Flex items with lower order values appear first, while items with higher order values appear later.
• If multiple flex items have the same order value, they appear in the order they appear in the source code.

In summary, the order property allows you to visually reorder flex items within a flex container without changing their position in the HTML source code.

Question 41

Wat zijn de align-self elementen

Answer 41

The align-self property in CSS is used within flexbox layouts to individually control the alignment of flex items along the cross axis (vertical axis for horizontal layouts, horizontal axis for vertical layouts) within the flex container.

Here’s how align-self works:

• While align-items applies to all flex items within a flex container, align-self allows you to override the alignment for individual flex items.
• It accepts the same values as align-items: flex-start, flex-end, center, baseline, and stretch.
• By setting align-self on a specific flex item, you can adjust its alignment independently of the other items.

For example, if align-items is set to flex-start for the flex container, but you want one particular item to be centered vertically, you can use align-self: center on that item.

In summary, align-self gives you granular control over the alignment of individual flex items within a flex container, allowing you to override the default alignment set by align-items.

Question 42

Wat zijn de flex-flow elementen

Answer 42

The flex-flow property in CSS is a shorthand property that combines the flex-direction and flex-wrap properties, allowing you to set both properties in a single declaration.

Here’s how flex-flow works:

• It accepts two values: the first value sets the flex-direction, and the second value sets the flex-wrap.
• The syntax is as follows: flex-flow: <flex-direction> <flex-wrap>;
• For example, flex-flow: row wrap; sets the flex-direction to row (horizontal layout) and the flex-wrap to wrap (allowing items to wrap onto multiple lines if needed).
• Similarly, flex-flow: column nowrap; sets the flex-direction to column (vertical layout) and the flex-wrap to nowrap (preventing items from wrapping onto multiple lines).

Using flex-flow is convenient when you want to set both the direction and wrapping behavior of flex items in a single declaration, rather than separately specifying flex-direction and flex-wrap.

In summary, flex-flow is a shorthand property in CSS for setting both the flex-direction and flex-wrap properties of a flex container in one line.

Question 43

Wat zijn de flex-wrap elementen

Answer 43

The flex-wrap property in CSS is used within flexbox layouts to control whether flex items are allowed to wrap onto multiple lines or columns when they exceed the available space of the flex container along the main axis (horizontal axis for row direction, vertical axis for column direction).

Here’s how flex-wrap works:

• By default, flex items are laid out in a single line (or column) and are not allowed to wrap onto multiple lines.
• Setting flex-wrap: nowrap; (the default value) ensures that flex items remain on a single line, even if they exceed the available space of the flex container.
• Setting flex-wrap: wrap; allows flex items to wrap onto multiple lines or columns if they exceed the available space of the flex container. This means that items will start a new line (or column) if there is not enough space to fit them in the current line (or column).
• Setting flex-wrap: wrap-reverse; is similar to wrap, but it reverses the direction of the wrapping. This means that items will wrap onto multiple lines (or columns) starting from the opposite end of the main axis.

In summary, flex-wrap controls whether flex items are allowed to wrap onto multiple lines or columns when they exceed the available space of the flex container, providing flexibility in how the items are laid out within the container.

Question 45

Wat zijn de align-content elementen

Answer 45

The align-content property in CSS is used within flexbox layouts to control how flex lines (rows or columns of flex items) are aligned within the flex container along the cross axis (vertical axis for horizontal layouts, horizontal axis for vertical layouts) when there is extra space available.

Here’s how align-content works:

• It applies to the entire flex container and controls the alignment of flex lines, not individual flex items.
• It only has an effect when there is extra space available in the cross axis of the flex container (i.e., when flex items do not fill the entire cross axis).
• It accepts the following values:
  
  • flex-start: Aligns flex lines at the start of the cross axis of the flex container.
  • flex-end: Aligns flex lines at the end of the cross axis of the flex container.
  • center: Centers flex lines along the cross axis of the flex container.
  • space-between: Distributes flex lines evenly along the cross axis, with equal space between them and at the edges of the flex container.
  • space-around: Distributes flex lines evenly along the cross axis, with equal space around them.
  • stretch: Stretches flex lines to fill the cross axis of the flex container.

In summary, align-content allows you to control how flex lines are aligned within a flex container along the cross axis when there is extra space available, providing flexibility in the layout of flex items.