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.
Les clients de Stuvia ont évalués plus de 700 000 résumés. C'est comme ça que vous savez que vous achetez les meilleurs documents.
L’achat facile et rapide
Vous pouvez payer rapidement avec iDeal, carte de crédit ou Stuvia-crédit pour les résumés. Il n'y a pas d'adhésion nécessaire.
Focus sur l’essentiel
Vos camarades écrivent eux-mêmes les notes d’étude, c’est pourquoi les documents sont toujours fiables et à jour. Cela garantit que vous arrivez rapidement au coeur du matériel.
Foire aux questions
Qu'est-ce que j'obtiens en achetant ce document ?
Vous obtenez un PDF, disponible immédiatement après votre achat. Le document acheté est accessible à tout moment, n'importe où et indéfiniment via votre profil.
Garantie de remboursement : comment ça marche ?
Notre garantie de satisfaction garantit que vous trouverez toujours un document d'étude qui vous convient. Vous remplissez un formulaire et notre équipe du service client s'occupe du reste.
Auprès de qui est-ce que j'achète ce résumé ?
Stuvia est une place de marché. Alors, vous n'achetez donc pas ce document chez nous, mais auprès du vendeur jakoblierman. Stuvia facilite les paiements au vendeur.
Est-ce que j'aurai un abonnement?
Non, vous n'achetez ce résumé que pour €2,99. Vous n'êtes lié à rien après votre achat.