Display-types
Hoe elementen in de viewport lopen
Komt elk element onder de andere,
of ernaast of op dezelfde regel?
Leerdoelen
- Displaytypes inline, block en inline-block kennen
- Display-type: flex en none kennen
- floats en clear
- overflow-eigenschap
- herhaling boxmodel en padding
| Legenda | |||
|---|---|---|---|
| block | inline | inline-block |
Vergelijk de volgende elementen
-
p
div
h3
header
main
li
ul
h1 -
a
span
i
strong
em -
img
button
Vergelijk de volgende elementen
-
block
p
div
h3
header
main
li
ul
h1
... -
inline
a
span
i
strong
em -
inline-block
img
button
Eigenschappen van display-types
-
block
- Neemt de HELE breedte van parent in
- Start altijd op een nieuwe regel
- Breedte & hoogte instelbaar
- Padding instelbaar
-
inline
- Gebruikt de benodigde breedte
- Gaat door op huidige regel en bij een tekort naar de volgende regel
- GEEN instelbare breedte & hoogte of padding;
- Wel de regelhoogte instelbaar
- Gebruikt de benodigde breedte
-
inline-block
- Neemt de benodigde breedte in
- Gaat door op de huidige regel, en bij ongelijke hoogtes staan de elementen op de regel: de onderkanten zijn gelijk.
- Breedte, hoogte en padding instelbaar.
- Neemt de benodigde breedte in
Met CSS display-type wijzigen
Bovenstaand resultaat kun je krijgen met de volgende mark-up:
<body>
<nav>
<ul>
<li>home</li>
<li>over ons</li>
<li>openingstijden</li>
<li>contact</li>
</ul>
</nav>
</body>
Een li element heeft display-type block;
Met display: inline-block;
verandert het display-type.
Klik maar op de CSS-code hieronder om dat te activeren/deactiveren.
Met CSS display-type wijzigen 2
Een a element heeft display-type inline;
Met display: block; verandert het display-type.
Klik maar op de CSS-code hieronder om dat te activeren/deactiveren.
Het resultaat hier linksboven kun je krijgen met de volgende mark-up met interne stijl:
<!DOCTYPE html>
<html>
<head>
<title>een voorbeeld van linkjes</title>
<style>
nav ul {
list-style-type: none;
margin: 0; padding: 0;
}
nav li {
display: inline-block;
}
nav a {
width: 150px;
padding: 12px 20px;
text-align: center;
background-color: #369; color: #ccc;
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">over ons</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
Welkom op deze site
</body>
</html>Float en clear
Met float breng je een element naar de zijkant van zijn parent en laat je de daarop volgende mark-up er aan de andere kant langsstromen.
Met clear stopt het omstromen en begint de mark-up met een eigen blok.
experimenteer met
display, padding & marge en floats
display-type flex
display:flex;heeft betrekking op de childeren van het element.
Dus niet op zichzelf zoals bij voorgaande display-types.- Pas flexbox toe op (de children van) het element
- Flex-richting aanpassen
- mag er bij een tekort aan ruimte naar een nieuwe regel?
opdracht
- Ga naar de instructie waar je op 4 manieren probeert elementen naast elkaar te plaatsen.
- Neem jouw oefening met het museum en breid deze uit met mark-up en styling, zoals dat op de instructievideo's is te zien.
- update op GitHub
- update jouw resultaat op hosts.ma-cloud.nl