A CSS Box modell példákkal magyarázva

Ha fantasztikus weblap -elrendezést tervez, tudnia kell a margókról, a szegélyekről, a kitöltésről és a tartalomról. A webdesign minden eleme, legyen az kép vagy szöveg, használ ilyen tulajdonságokkal rendelkező dobozt. A dobozos modellel játszva könnyen összetett elrendezéseket készíthet. Ebben a cikkben a CSS Box modellt boncolgatjuk, és gyakorlati példákkal bemutatjuk, hogyan kell ezeket a tulajdonságokat használni.

Mi a CSS Box modell?

A CSS dobozmodell egy szabvány, amelyet a World Wide Web Consortium. A HTML dokumentum összes elemét téglalap alakú dobozként írja le, saját méretekkel. Ezek a dobozok tartalomterületet és opcionális körüli margó-, szegély- és kitöltési területeket tartalmaznak. Tehát vizsgáljuk meg a CSS doboz részeit.

Fedezzük fel a CSS doboz modell négy rétegét.

Első réteg: tartalom

A tartalomterület tartalmazza az elem fő tartalmát, amely lehet kép, szöveg vagy bármilyen médiatartalom. A blokkszintű elemek méreteit a segítségével módosíthatja magasság és szélesség tulajdonságait.

Második réteg: párnázás

A kitöltés a tartalomdoboz és a szegélydoboz közötti tér. Bár a tartalom körül szóközként helyezkedik el, a háttérszínt használva megjelenítheti a különbséget. Jelentkezni lehet padding-top, párnázás-jobb, párnázott-alsó, és párnázás-bal tulajdonságokkal módosíthatja a teret.

Harmadik réteg: Határ

A szegély becsomagolja a tartalmat és a párnázási területet. A segítségével átméretezheti és stílusba állíthatja a szegélyt border-width, szegély stílusú, és szegély színű tulajdonságait.

Negyedik réteg: Margó

A dobozmodell utolsó rétegét széles körben használják az elemek közötti tér létrehozására. A margó betakarja a tartalmat, a párnázást és a szegélyterületet. Te tudod használni margin-top,margin-right, margin-bottom, és margin-left tulajdonságait. A margin tulajdonságnak negatív értéket is adhat, vagy auto félelmetes elhelyezési technikák eléréséhez.

Projektbeállítás a CSS Box Modellhez

Építsünk egy mini projektet, amely bemutatja az alapdoboz -modellt tartalommezővel, kitöltéssel, szegéllyel és margóval. Szöveget, képet vagy médiatartalmat használhat. Kezdjük azzal, hogy megbizonyosodunk arról, hogy megfelelően van felépítve.

Szerkezet HTML -szel

Kimenet:

Használhatja a böngésző beépített szolgáltatásait, például a Chrome fejlesztői eszközök, hogy lássuk, mi történik. Az Unsplash két képét használjuk. Az egyszerűség kedvéért elrejtjük az okostelefon képét a használatával kijelző: nincs; amíg később szükségünk lesz rá.

Stílus CSS használatával

/*************************
ALAPTÍPUS
*************************/
* {
margó: 0 képpont;
párnázás: 0px;
}
test {
kijelző: flex;
flex-direction: sor;
} 
.display {
kijelző: nincs! fontos;
}

Most formázzuk meg tartalomdobozunkat. Először is beállítjuk a magasság és szélesség a képről. Ezenkívül a háttérszín megadása segít a jobb megjelenítésben. Szóval, tegyük meg.

/*************************
TARTALOMJEGYZÉK
*************************/
.content-box {
kijelző: flex;
flex-direction: sor;
igazolni-tartalom: center;
align-items: center;
/ * A tartalomdoboz formázása a magasság és szélesség tulajdonságaival */
háttérszín: #fdf;
magasság: 20em;
szélesség: 30em;
}

Adjon tartalomszobát lélegezni párnázással

Beállíthatja akár padding-top, párnázás-jobb, párnázott-alsó, és párnázás-bal tulajdonságokat külön -külön, vagy használja a gyorsírást. Ha lehetséges, próbálja meg használni a gyorsírást, mivel ez időt takaríthat meg. Lássuk, hogyan működik a párnázás.

 /*************************
PÁRNÁZÁS
*************************/
/ * Párnázás alkalmazása */
padding-top: 5em;
párnázás-jobb: 2em;
párnázott-alsó: 8em;
párnázás-bal: 2em;
/ * Párnázás gyorsírás */
/ * felső/jobb/alsó/bal */
párnázás: 5em 2em 8em 2em;
/ * felül/vízszintesen/alul */
párnázás: 5em 2em 8em;

Kimenet:

Rajzoljon vonalakat a párnázás körül a szegéllyel

A szegélytulajdonság alkalmazása során győződjön meg arról, hogy a szegély színű tulajdonságot, hogy a szegélynek megkülönböztethető színe legyen a háttértől. Kiválaszthatja a szegély stílusú akár egyénileg, akár egy mozdulattal a gyorsírási tulajdonság használatával. Ugyanez vonatkozik a border-width ingatlan.

Beállíthatja a határsugár hogy a doboz lekerekített sarkokat adjon be sugarával px, rem, em, vagy százalék.

 /*************************
HATÁR
*************************/
/ * A szegélytulajdonságok alkalmazása */
/ * A szegély színének beállítása */
szegélyszín: rgb (148, 234, 255);
/ * Válassza ki a szegély stílusát */
border-top-style: szilárd;
border-right-style: szaggatott;
border-bottom-style: horony;
border-left-style: gerinc;
/ * szegély stílusú gyorsírás */
/ * felső/jobb/alsó/bal */
szegély stílusú: tömör szaggatott barázda gerinc;
/ * A szegély szélességének beállítása */
border-top-width: 4em;
border-right-width: 2em;
border-bottom-width: 2em;
border-left-width: 2em;
/* szegély szélességű gyorsírás*/
/ * felső/jobb/alsó/bal */
border-width: 4em 2em 2em 2em;
/ * felül/vízszintesen/alul */
border-width: 4em 2em 2em;
/ * határ menti ingatlan gyorsírása */
/* szegély: 4em szilárd rgb (148, 234, 255); */
/ * Határ sugarának beállítása */
határ-sugár: 5em;
határ-sugár: 20%;

Kimenet:

Tegyen helyet a dobozok között margóval

A gombbal vízszintesen középre helyezheti a dobozt margó: 0 automatikus, feltéve, hogy meghatározott szélességű.

 /*************************
ÁRRÉS
*************************/
/ * Margótulajdonságok alkalmazása */
margin-top: 4em;
margin-right: 5em;
margin-bottom: 3em;
margin-left: 5em;
/ * Margó gyorsírás */
/ * felső/jobb/alsó/bal */
margin: 4em 5em 3em 5em;
/ * felül/vízszintesen/alul */
margin: 4em 5em 3em;
/ * Automatikus margó használata */
margin: 3em auto;

Kimenet:

A margin tulajdonságot egy, kettő, három vagy négy érték használatával adhatja meg. Az értékek lehetnek hosszúság, százalék vagy kulcsszó auto. Értsük meg, hogyan működik:

• Ha csak egy értéket ad meg, az azt jelenti, hogy mind a négy oldalnak ugyanaz a margója lesz.
• Ha két értéket ad meg, az első érték azt jelenti margin-top és margin-bottom míg a második érték megadja margin-right és margin-left.
• Három érték megadásakor az első és az utolsó vonatkozik margin-top és margin-bottom illetőleg. A középső érték a vízszintes területre vonatkozik, azaz margin-right és margin-left.
• Ha megadja mind a négy értéket, akkor azok az óramutató járásával megegyező irányban fent, jobbra, alul és balra érvényesek.

Ne feledje, hogy ezeket a gyorsbillentyűket a párnázáshoz és a szegélytulajdonságokhoz is használhatja.

Lásd még: Az alapvető CSS3 tulajdonságok csalólapja

Használtál már negatív margót? A vizualizálás érdekében töröljük kijelző: nincs a második kép megjelenítéséhez, majd állítson be negatív margót.

/* .display {
kijelző: nincs! fontos;
} */
.content-box {
kijelző: flex;
flex-direction: sor;
align-items: center;
háttérszín: #fdf;
magasság: 20em;
szélesség: 30em;
párnázás: 5em 2em 8em;
szegély stílusú: tömör szaggatott barázda gerinc;
border-width: 4em 2em 2em;
határ-sugár: 20%;
/ * Negatív margó használata */
árrés: 3em -20em 3em 5em;
}

Kimenet:

A dobozos modell: Tökéletes Pixel weboldal készítése

A dobozmodell lehetővé teszi az elemek közötti tér meghatározását, a szegélyek hozzáadását és a komplex megjelenésű elrendezés egyszerű létrehozását. Azonnal elkezdheti a fantasztikus webhely létrehozását. Közben felfedezheti a border-box tulajdonságot részletesen, és játsszon a fenti kóddal.

Meg kell értenie, hogy vannak más módszerek a tartalom CSS -ben történő elhelyezésére. Ezek közé tartozik a CSS Grid és a CSS Flexbox. Ha már elégedett a dobozos modellel, folytassa az alternatívák megismerését.

CSS Flexbox bemutató: Az alapok

Tökéletesen pozícionálja HTML -elemeit a CSS Flexbox segítségével.

Olvassa tovább

A szerzőről