Het CSS Box-model uitgelegd met voorbeelden

Als u van plan bent een geweldige webpagina-indeling te bouwen, moet u weten over marges, randen, opvulling en inhoud. Elk element in webdesign, of het nu een afbeelding of tekst is, gebruikt een vak met deze eigenschappen. Je kunt eenvoudig complexe lay-outs bouwen door te spelen met het doosmodel. In dit artikel zullen we het CSS Box-model ontleden en laten zien hoe u deze eigenschappen kunt gebruiken met praktische voorbeelden.

Wat is het CSS Box-model?

Het CSS-boxmodel is een standaard gemaakt door de Wereldwijde web consortium. Het beschrijft alle elementen in een HTML-document als rechthoekige vakken met hun eigen afmetingen. Deze vakken bevatten een inhoudsgebied en optionele omringende marge-, rand- en opvulgebieden. Laten we dus eens kijken naar de onderdelen van een CSS-box.

Laten we de vier lagen van het CSS-boxmodel ontdekken.

Eerste laag: inhoud

Het inhoudsgebied bevat de hoofdinhoud van het element, wat een afbeelding, tekst of enige vorm van media-inhoud kan zijn. U kunt de afmetingen van elementen op blokniveau wijzigen met hoogte en breedte eigendommen.

Tweede laag: opvulling

Opvulling is de ruimte tussen het inhoudsvak en het randvak. Hoewel het als witruimte om uw inhoud zit, kunt u een achtergrondkleur gebruiken om het verschil te visualiseren. Je kunt solliciteren padding-top, opvulling-rechts, opvulling-bodem, en opvulling-links eigenschappen om de ruimte te wijzigen.

Derde laag: rand

De rand omsluit de inhoud en het opvulgebied. U kunt de grootte en stijl van de rand wijzigen met grensbreedte, border-stijl, en rand kleur eigendommen.

Vierde laag: Marge

De laatste laag van het boxmodel wordt veel gebruikt om ruimte tussen elementen te genereren. De marge omhult de inhoud, de opvulling en het randgebied. Je kunt gebruiken marge-top,marge-rechts, margin-bottom, en marge-links eigendommen. U kunt de marge-eigenschap ook een negatieve waarde geven of auto om een ​​aantal geweldige plaatsingstechnieken te bereiken.

Projectconfiguratie voor CSS Box-model

Laten we een miniproject bouwen om het basisdoosmodel te demonstreren met een inhoudsvak en eigenschappen voor opvulling, rand en marge. U kunt kiezen voor tekst, afbeeldingen of media-inhoud. We beginnen met ervoor te zorgen dat het goed is gestructureerd.

Structuur met HTML

Uitgang:

U kunt ingebouwde functies van uw browser gebruiken, zoals de Hulpprogramma's voor Chrome-ontwikkelaars, om te zien wat er aan de hand is. We gebruiken twee afbeeldingen van Unsplash. Voor de eenvoud verbergen we de afbeelding van de smartphone met Geen weergeven; totdat we het later nodig hebben.

Stijlen met CSS

/*************************
BASISSTIJLING
*************************/
* {
marge: 0px;
opvulling: 0px;
}
lichaam {
weergave: flexibel;
flex-richting: rij;
} 
.Scherm {
weergave: geen !belangrijk;
}

Laten we nu onze inhoudsdoos stylen. Eerst stellen we de hoogte en breedte van het beeld. Ook helpt het geven van een achtergrondkleur bij een betere visualisatie. Dus laten we het doen.

/*************************
INHOUD DOOS
*************************/
.content-box {
weergave: flexibel;
flex-richting: rij;
rechtvaardigen-inhoud: centrum;
align-items: midden;
/* Het inhoudsvak opmaken met eigenschappen voor hoogte en breedte */
achtergrondkleur: #fdf;
hoogte: 20em;
breedte: 30em;
}

Geef inhoud ruimte om te ademen met opvulling

U kunt ofwel instellen padding-top, opvulling-rechts, opvulling-bodem, en opvulling-links eigenschappen afzonderlijk of gebruik de steno. Probeer indien mogelijk de steno te gebruiken, aangezien dit u wat tijd kan besparen. Laten we eens kijken hoe opvulling werkt.

 /*************************
PADDING
*************************/
/* Opvulling toepassen */
padding-top: 5em;
opvulling-rechts: 2em;
vulling-bodem: 8em;
opvulling-links: 2em;
/* Padding steno */
/* boven/rechts/onder/links */
vulling: 5em 2em 8em 2em;
/* boven/horizontaal/onder */
vulling: 5em 2em 8em;

Uitgang:

Lijnen tekenen rond opvulling met rand

Zorg er bij het toepassen van de border-eigenschap voor dat u de rand kleur eigenschap om de rand een andere kleur dan de achtergrond te geven. U kunt de border-stijl afzonderlijk of in één keer door de steno-eigenschap te gebruiken. Hetzelfde geldt voor de grensbreedte eigendom.

U kunt ook de grens-radius om de doos afgeronde hoeken te geven met een straal in px, rem, em, of procent.

 /*************************
GRENS
*************************/
/* Randeigenschappen toepassen */
/* Stel de randkleur in */
randkleur: rgb (148, 234, 255);
/* Selecteer randstijl */
border-top-stijl: solide;
border-right-stijl: onderbroken;
border-bottom-stijl: groef;
border-links-stijl: nok;
/* steno in randstijl */
/* boven/rechts/onder/links */
border-stijl: stevige gestippelde groefrand;
/* Randbreedte instellen */
grens-top-breedte: 4em;
grens-rechts-breedte: 2em;
grens-onder-breedte: 2em;
grens-links-breedte: 2em;
/* steno met grensbreedte*/
/* boven/rechts/onder/links */
grensbreedte: 4em 2em 2em 2em;
/* boven/horizontaal/onder */
grensbreedte: 4em 2em 2em;
/* grens eigenschap steno */
/* rand: 4em effen rgb (148, 234, 255); */
/* Grensradius instellen */
grens-radius: 5em;
grensradius: 20%;

Uitgang:

Ruimte tussen vakken toevoegen met marge

U kunt een vak horizontaal centreren met marge: 0 auto, mits deze een bepaalde breedte heeft.

 /*************************
MARGE
*************************/
/* Marge-eigenschappen toepassen */
marge-top: 4em;
marge-rechts: 5em;
marge-onder: 3em;
marge-links: 5em;
/* Marge afkorting */
/* boven/rechts/onder/links */
marge: 4em 5em 3em 5em;
/* boven/horizontaal/onder */
marge: 4em 5em 3em;
/* Automatische marge gebruiken */
marge: 3em automatisch;

Uitgang:

U kunt de marge-eigenschap opgeven met een, twee, drie of vier waarden. De waarden kunnen een lengte, percentage of een trefwoord zijn zoals auto. Laten we begrijpen hoe het werkt:

• Als u slechts één waarde opgeeft, betekent dit dat alle vier de zijden dezelfde marge hebben.
• Als u twee waarden opgeeft, betekent de eerste waarde marge-top en margin-bottom terwijl de tweede waarde aangeeft: marge-rechts en marge-links.
• Als u drie waarden opgeeft, zijn de eerste en de laatste van toepassing op marge-top en margin-bottom respectievelijk. De middelste waarde is voor het horizontale gebied, d.w.z. marge-rechts en marge-links.
• Als u alle vier de waarden opgeeft, zijn ze van toepassing op respectievelijk boven, rechts, onder en links (met de klok mee).

Merk op dat u deze sneltoetsen ook kunt gebruiken voor opvulling en randeigenschappen.

Zie ook: De essentiële CSS3-eigenschappen Cheatsheet

Heb je ooit een negatieve marge gebruikt? Laten we wissen om het te visualiseren Geen weergeven om onze tweede afbeelding weer te geven en stel vervolgens een negatieve marge in.

/* .Scherm {
weergave: geen !belangrijk;
} */
.content-box {
weergave: flexibel;
flex-richting: rij;
align-items: midden;
achtergrondkleur: #fdf;
hoogte: 20em;
breedte: 30em;
vulling: 5em 2em 8em;
border-stijl: stevige gestippelde groefrand;
grensbreedte: 4em 2em 2em;
grensradius: 20%;
/* Negatieve marge gebruiken */
marge: 3em -20em 3em 5em;
}

Uitgang:

Het Box-model: een perfecte pixelwebsite maken

Met het doosmodel kunt u ruimte tussen elementen definiëren, randen toevoegen en eenvoudig een complex ogende lay-out bouwen. Je kunt direct aan de slag om een ​​geweldige website te maken. Ondertussen kunt u de border-box eigendom in detail en speel wat met de bovenstaande code.

U moet begrijpen dat er andere methoden zijn om inhoud in CSS op te maken. Deze omvatten CSS Grid en CSS Flexbox. Als u eenmaal vertrouwd bent met het doosmodel, moet u verder leren over deze alternatieven.

CSS Flexbox-zelfstudie: de basis

Plaats uw HTML-elementen perfect met behulp van CSS Flexbox.

Lees volgende

Over de auteur