Samenvatting Web technologie box stijlen

Box stijlen

Background-origin:
Stelt oorsprong van achtergrond in
- Vanaf begin van rand (border)
- Binnen rand (border)
- Binnen opvulling (padding)

Border-box:
De achtergrond is gepositioneerd tov de border box

Padding-box:
De achtergrond is gepositioneerd tov de padding box

Content-box:
De achtergrond is gepositioneerd tov de content box

Voorbeelden:
background-origin: border-box;
background-origin: border-box;
background-origin: content-box, padding-box;

Background-clip:
Stelt in of achtergrond van element zich onder de … uitstrekt
- Border box
- Padding box
- Content box

Border-box:
Achtergrond reikt tot buitenkant van rand (border)
Onder rand in z-volgorde!

Padding-box:
Achtergrond strekt zich uit tot buitenkant van opvulling
Er wordt geen achtergond onder de border getekend!

Content-box:
Achtergrond is getekend in inhoudsvak

Tekst:
Achtergrond getekend in voorgrondtekst

Object-fit & Object-position
Object-fit = instellen hoe inhoud van vervangen element (img, video) moet
worden aangepast aan container
Contain:
Aangepast aan hoogte- en breedteverhouding van inhoudsvak van element