Vormgeven van de box (box-sizing)

uit de cursus Webdesign & Layout met css (2019)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Volgende video: Collapsing margins

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Webdesign & Layout met css (2019)

perm_identity Belinda | video_library 58 video's | query_builder 03:28:15

Webdesign met CSS

Met css bepaal je de layout en de vormgeving van een webpagina. CSS schrijf je in een apart bestand dat je koppelt aan de html-pagina’s. Hiermee koppel je de inhoud los van de vormgeving en dat biedt heel veel voordelen. Dankzij externe css-stijlbladen zorg je voor een consistente vormgeving en opmaak voor de gehele website. Leer op welke manier je CSS kan verbinden aan webpagina’s en gebruik te maken van de juiste css-selectors.

CSS blijft in ontwikkeling

CSS biedt een groot aantal css-stijlopdrachten waarmee je onder andere teksten en afbeeldingen perfect kunt vormgeven. CSS is continu in beweging omdat hier elke dag aan ontwikkeld wordt. Het is dus een taak om altijd op de hoogte te blijven van de nieuwe mogelijkheden en de veranderingen. Maar de basis is de basis, en die leer je in deze cursus. Vanuit dit startpunt kun je jezelf blijven ontwikkelen in deze krachtige manier van het consistent vormgeven van je HTML-pagina’s.

Doelgroep van deze cursus

Wil jij zelf de vormgeving van html-pagina’s bepalen dan is deze cursus absoluut een must.

Wat ga je leren

In deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). Waaronder hoe je met grid en flexbox op een waanzinnig snelle, efficiënte en makkelijke manier snel een responsive design kunt maken die zich automatisch op elk formaat beeldscherm perfect aanpast. In deze cursus leer je direct hoe je jouw website responsive maakt met mediaqueries. Klinkt misschien ingewikkeld maar je zult merken dat dit reuze meevalt. En daarnaast is het vaardig worden van responsive design een ‘must’ voor webdesigners.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je kennis en ervaring nodig van het vervaardigen en structureren van html-pagina’s.

We werken door in het bestand van de vorige oefening.

Ik verwijder de stijlopdracht 'outline'. Die heb ik even niet meer nodig.

In de vorige video heb je geleerd hoe je afstand kan creëren via de margin en de padding.

Standaard wordt de margin, de border en de padding bij elkaar opgeteld.

En groeit het formaat van het element met deze optelsom.

Dus als ik de h-één een absolute breedte meegeef van width tweehonderd pixels.

Dan is de breedte die dit element nu inneemt niet tweehonderd.

Maar tweehonderd plus, twee keer tien pixels voor de padding, dat is twintig.

En twee keer twintig pixels voor de margin. Dat is nog een een keer extra veertig.

Geef ik ook nog een randdikte op, een border, van vijf pixels solid black.

Dan kom je uit op de volgende optelsom tweehonderdzeventig pixels.

Je begrijpt al dat je dan bij het layouten in de problemen kan komen.

Omdat elementen niet meer naast elkaar passen zodra je een border, margin of padding gaat opgeven.

De standaard css-stijl die voor deze optelsom zorgt is deze.

Ik plaats hem bij de wildcard. Box-sizing:content-box.

Alle html-elementen luisteren nu naar deze stijlopdracht.

Met content-box wordt de inhoud, het contentgebied, als basis gezien.

En de padding, border en margin worden daarbij opgeteld.

Om dit te demonstreren kopieer ik de h-één nogmaals, met Commando C en plak ik die op de regel eronder.

Ik plaats ze naast elkaar met de eigenschap float:left.

Hiermee haal ik ze uit de natuurlijke flow en geven ze als het ware hun eigen ruimte op.

Want normaliter neemt een h-één altijd de hele regel in beslag.

Dat is normaal voor een block-level element.

Maar met de opdracht Float geven ze die ruimte op en mogen andere elementen de vrij gekomen ruimte gaan benutten.

Om te voorkomen dat de paragraaf deze vrijgekomen ruimte in beslag gaat nemen

Geef ik de p-elementen een clear:both mee.

Daarmee geef ik opdracht aan het p-element om op een nieuwe regel te beginnen.

Ik zet nu de breedte van de h-één's op vijftig procent.

En ik verwijder even de margin. Waarom wordt zometeen duidelijk.

Met de breedte op vijftig procent zou je verwachten dat de tweede h-één er gewoon naast zou moeten passen.

Dat ze elk de helft van de breedte zouden innemen. Maar toch gebeurt dat niet.

Dat komt omdat de breedte van de box standaard bepaald wordt door de content.

Vandaar de stijl box-sizing content-box.

Maar ik wijzig de waarde content-box in border-box.

En kijk nu passen de twee koppen op dezelfde regel.

En nemen ze elk keurig vijftig procent in beslag.

Ook als ik het venster kleiner of groter maak blijven ze samen op de regel staan.

Het formaat van de box wordt nu bepaald door de inhoud inclusief een opgegeven padding of rand.

Echter zodra ik weer een margin opgeef. Dan houdt het feest weer op.

Beide elementen groeien weer met opgegeven waarde bij de margin.

En daarom kunnen ze niet meer naast elkaar staan.

Want het is dan vijftig procent plus veertig pixels.

Je moet dus voorzichtig zijn met margin.

Maar wat betreft de padding en de border ben je vrij om deze toe te passen.

Mits je er maar voor zorgt dat je de box-sizing op border-box hebt staan.

Deze plaats ik daarom altijd standaard in mijn stijlblad.