Jakob Lierman Webapplicaties I
Hoofdstuk 4
Logische indeling: div – span
<div> en <span> zijn elementen zonder voorgedefinieerde (sematische) betekenis.
Worden gebruikt voor het toevoegen van stijl of het positioneren van een webpagina.
<div> block element
<span> inline element
Boxmodel
HTML-element bekijken als onzichtbare box.
Nemen de maximale ruimte in die ze krijgen van hun parent element.
Inline elementen nemen enkel ruimte in die ze nodig hebben om hun content weer te geven.
Een box kan zichtbaar worden gemaakt door de border stijl toe te kennen.
Display
De display eigenschap kan de eigenschappen van elementen veranderen.
Mogelijke waarden:
- inline: element krijgt de eigenschappen van een inline element
- block: element krijgt de eigenschappen van een block element
- inline-block: behoudt de eigenschappen van een block element, maar wordt in de pagina (in
de flow) weergegeven als een inline element
- none: element wordt niet weergegeven (neemt ook geen ruimte in)
Niet de gewoonte om inline elementen te switchen naar block elementen.
Visibility
Kan slechts twee waarden hebben:
- visible: zichtbaar, is default
- hidden: verbergt het element maar bewaart de nodige ruimte voor het element
Dimensies
Lengte en breedte kunnen worden aangepast met height en width. Dit slaat op de hoogte en
breedte van de content, niet op de padding en border.
1
, Jakob Lierman Webapplicaties I
Value kan uitgedrukt worden in:
- px: pixels (absolute waarde)
- %: relatieve waarde tegenover de parent container
- em: relatieve waarde tegenover de grootte van het gebruikte lettertype van de parent box
- rem: relatieve waarde tegenover de grootte van het gebruikte lettertype van het root
element
Ook mogelijk om een minimale en maximale breedte en hoogte te bepalen. Bij wijziging van het
browservenster is er steeds een minimale en/of maximale breedte en/of lengte gegarandeerd.
Attributen: min-width, max-width, min-height, max-height.
Schuifbalk bij overflow.
Opbouw box
- content: bevat tekst en afbeeldingen
- padding: ruimte rond de content, zorgt ervoor dat rand niet direct aan de content vasthangt
- border: een rand rond de padding (met: border-width, border-style, border-color)
- margin: ruimte rond de border, wordt niet beïnvloed door een achtergrondkleur (volledig
transparant) (overlappende margins: zie https://css-tricks.com/what-you-should-know-
about-collapsing-margins/) (centreren: waarde “auto”)
Layout
= het positioneren van de elementen van een pagina.
De normalen flow (position: static) van een pagina stapel alle block elementen op elkaar. Elk block
element begint op een nieuwe lijn. Zelfs als de breedte van een element wordt aangepast
(verminderd) zal een onderliggend element niet deze ruimte innemen, tenzij men ingrijpt in de
normale flow.
Normal flow doorbreken:
- float layout
- relatieve positionering
- absolute positionering
- fixed positionering
- flex layout
2
Hoofdstuk 4
Logische indeling: div – span
<div> en <span> zijn elementen zonder voorgedefinieerde (sematische) betekenis.
Worden gebruikt voor het toevoegen van stijl of het positioneren van een webpagina.
<div> block element
<span> inline element
Boxmodel
HTML-element bekijken als onzichtbare box.
Nemen de maximale ruimte in die ze krijgen van hun parent element.
Inline elementen nemen enkel ruimte in die ze nodig hebben om hun content weer te geven.
Een box kan zichtbaar worden gemaakt door de border stijl toe te kennen.
Display
De display eigenschap kan de eigenschappen van elementen veranderen.
Mogelijke waarden:
- inline: element krijgt de eigenschappen van een inline element
- block: element krijgt de eigenschappen van een block element
- inline-block: behoudt de eigenschappen van een block element, maar wordt in de pagina (in
de flow) weergegeven als een inline element
- none: element wordt niet weergegeven (neemt ook geen ruimte in)
Niet de gewoonte om inline elementen te switchen naar block elementen.
Visibility
Kan slechts twee waarden hebben:
- visible: zichtbaar, is default
- hidden: verbergt het element maar bewaart de nodige ruimte voor het element
Dimensies
Lengte en breedte kunnen worden aangepast met height en width. Dit slaat op de hoogte en
breedte van de content, niet op de padding en border.
1
, Jakob Lierman Webapplicaties I
Value kan uitgedrukt worden in:
- px: pixels (absolute waarde)
- %: relatieve waarde tegenover de parent container
- em: relatieve waarde tegenover de grootte van het gebruikte lettertype van de parent box
- rem: relatieve waarde tegenover de grootte van het gebruikte lettertype van het root
element
Ook mogelijk om een minimale en maximale breedte en hoogte te bepalen. Bij wijziging van het
browservenster is er steeds een minimale en/of maximale breedte en/of lengte gegarandeerd.
Attributen: min-width, max-width, min-height, max-height.
Schuifbalk bij overflow.
Opbouw box
- content: bevat tekst en afbeeldingen
- padding: ruimte rond de content, zorgt ervoor dat rand niet direct aan de content vasthangt
- border: een rand rond de padding (met: border-width, border-style, border-color)
- margin: ruimte rond de border, wordt niet beïnvloed door een achtergrondkleur (volledig
transparant) (overlappende margins: zie https://css-tricks.com/what-you-should-know-
about-collapsing-margins/) (centreren: waarde “auto”)
Layout
= het positioneren van de elementen van een pagina.
De normalen flow (position: static) van een pagina stapel alle block elementen op elkaar. Elk block
element begint op een nieuwe lijn. Zelfs als de breedte van een element wordt aangepast
(verminderd) zal een onderliggend element niet deze ruimte innemen, tenzij men ingrijpt in de
normale flow.
Normal flow doorbreken:
- float layout
- relatieve positionering
- absolute positionering
- fixed positionering
- flex layout
2
