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.
Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.
Quick and easy check-out
You can quickly pay through credit card or Stuvia-credit for the summaries. There is no membership needed.
Focus on what matters
Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!
Frequently asked questions
What do I get when I buy this document?
You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.
Satisfaction guarantee: how does it work?
Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.
Who am I buying these notes from?
Stuvia is a marketplace, so you are not buying this document from us, but from seller jakoblierman. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy these notes for $3.19. You're not tied to anything after your purchase.