CSS -laatikkomalli selitetty esimerkeillä

Jos aiot rakentaa upean verkkosivun asettelun, sinun on tiedettävä marginaalit, reunat, täyte ja sisältö. Jokainen web -suunnittelun elementti, olipa se kuva tai teksti, käyttää laatikkoa, jolla on nämä ominaisuudet. Voit helposti rakentaa monimutkaisia ​​asetteluja pelaamalla laatikkomallilla. Tässä artikkelissa tarkastelemme CSS -laatikkomallia ja näytämme, miten näitä ominaisuuksia käytetään käytännön esimerkkien avulla.

Mikä on CSS -laatikkomalli?

CSS -laatikkomalli on standardin luoma World Wide Web Consortium. Siinä kuvataan kaikki HTML -asiakirjan elementit suorakulmaisina laatikoina, joilla on omat mitat. Nämä laatikot sisältävät sisältöalueen ja valinnaisen ympäröivän marginaalin, reunuksen ja täytealueen. Tutkitaan siis CSS -laatikon osia.

Paljastetaan CSS -laatikkomallin neljä kerrosta.

Ensimmäinen kerros: Sisältö

Sisältöalue sisältää elementin pääsisällön, joka voi olla kuva, teksti tai mikä tahansa mediasisältö. Voit muokata lohkotason elementtien mittoja käyttämällä korkeus ja leveys ominaisuudet.

Toinen kerros: Pehmuste

Täyte on sisältölaatikon ja sen reunuslaatikon välinen tila. Vaikka se istuu sisällön ympärillä välilyönninä, voit käyttää eroa taustavärillä. Voit hakea toppaus-toppi, pehmuste-oikea, pehmuste-pohjaja pehmuste-vasen ominaisuuksia tilan muuttamiseksi.

Kolmas kerros: Raja

Raja käärii sisällön ja pehmustealueen. Voit muuttaa reunan kokoa ja tyyliä käyttämällä reunan leveys, reunatyylinenja reunuksen väri ominaisuudet.

Neljäs kerros: marginaali

Laatikkomallin viimeistä kerrosta käytetään laajalti tilan luomiseen elementtien välille. Marginaali käärii sisällön, pehmusteen ja raja -alueen. Voit käyttää marginaali,marginaali-oikea, marginaali-pohjaja marginaali-vasen ominaisuudet. Voit myös antaa marginaaliominaisuudelle negatiivisen arvon tai auto saavuttaa mahtavia sijoitustekniikoita.

Projektin määritys CSS -laatikkomallille

Rakennetaan miniprojekti, joka osoittaa peruslaatikkomallin sisältölaatikolla ja täyte-, reunus- ja marginaaliominaisuuksilla. Voit käyttää tekstiä, kuvaa tai mediasisältöä. Aloitamme varmistamalla, että se on rakennettu oikein.

Rakenne HTML: llä

Lähtö:

Voit käyttää selaimesi sisäänrakennettuja ominaisuuksia, kuten Chromen kehittäjätyökalut, nähdä mitä tapahtuu. Käytämme kahta Unsplash -kuvaa. Yksinkertaisuuden vuoksi piilomme älypuhelimen kuvan käyttämällä näyttö: ei mitään; kunnes tarvitsemme sitä myöhemmin.

Muotoilu CSS: n avulla

/*************************
PERUSMUOTOILU
*************************/
* {
marginaali: 0px;
pehmuste: 0px;
}
runko {
näyttö: flex;
taipuisa suunta: rivi;
} 
.display {
näyttö: ei mitään! tärkeä;
}

Muotoillaan nyt sisältölaatikko. Ensinnäkin asetamme korkeus ja leveys kuvasta. Myös taustavärin antaminen auttaa visualisoinnissa. Joten, tehdään se.

/*************************
SISÄLTÖLAATIKKO
*************************/
.content-box {
näyttö: flex;
taipuisa suunta: rivi;
perustella sisältö: keskellä;
kohdista kohdat: keskelle;
/ * Sisältöruudun muotoilu korkeus- ja leveysominaisuuksien avulla */
taustaväri: #fdf;
korkeus: 20em;
leveys: 30em;
}

Anna sisällölle tilaa hengittää pehmusteella

Voit joko asettaa toppaus-toppi, pehmuste-oikea, pehmuste-pohjaja pehmuste-vasen ominaisuudet yksitellen tai käytä lyhennettä. Yritä käyttää lyhennettä, jos mahdollista, koska se voi säästää aikaa. Katsotaan miten pehmuste toimii.

 /*************************
TAPETTI
*************************/
/ * Pehmusteen käyttö */
toppaus: 5em;
pehmustus-oikea: 2em;
pehmuste-pohja: 8em;
pehmustus vasen: 2em;
/ * Pehmusteen lyhenne */
/ * ylhäällä/oikealla/alhaalla/vasemmalla */
pehmuste: 5em 2em 8em 2em;
/ * ylhäällä/vaakasuorassa/alhaalla */
pehmuste: 5em 2em 8em;

Lähtö:

Piirrä viivat pehmusteen ympärille reunan avulla

Kun käytät rajaominaisuutta, varmista, että käytät reunuksen väri ominaisuus antaa reunalle eri värin kuin tausta. Voit valita reunatyylinen joko yksitellen tai kerralla käyttämällä pikakirjoitusominaisuutta. Sama koskee reunan leveys omaisuutta.

Voit myös asettaa raja-säde antaa laatikolle pyöristetyt kulmat, joiden säde on sisäänpäin px, rem, emtai prosenttia.

 /*************************
Raja
*************************/
/ * Rajaominaisuuksien käyttäminen */
/ * Aseta reunuksen väri */
reunusväri: rgb (148, 234, 255);
/ * Valitse reunustyyli */
border-top-style: kiinteä;
border-right-style: katkoviiva;
border-bottom-style: ura;
raja-vasen-tyyli: harjanne;
/ * reunatyylinen lyhenne */
/ * ylhäällä/oikealla/alhaalla/vasemmalla */
reunatyyli: kiinteä katkoviivainen harjanne;
/ * Aseta reunan leveys */
reunan yläosan leveys: 4em;
raja-oikea-leveys: 2em;
raja-pohja-leveys: 2em;
raja-vasen leveys: 2em;
/* reunan leveyden lyhenne*/
/ * ylhäällä/oikealla/alhaalla/vasemmalla */
reunan leveys: 4em 2em 2em 2em;
/ * ylhäällä/vaakasuorassa/alhaalla */
reunan leveys: 4em 2em 2em;
/ * raja -omaisuuden lyhenne */
/* raja: 4em kiinteä rgb (148, 234, 255); */
/ * Aseta rajasäde */
raja-säde: 5em;
raja-säde: 20%;

Lähtö:

Lisää tilaa laatikoiden väliin marginaalilla

Voit keskittää laatikon vaakasuoraan käyttämällä marginaali: 0 automaattinen, jos sillä on tietty leveys.

 /*************************
MARGINAALI
*************************/
/ * Marginaaliominaisuuksien käyttäminen */
marginaali: 4em;
marginaali-oikea: 5em;
marginaali-pohja: 3em;
marginaali-vasen: 5em;
/ * Marginaalin lyhenne */
/ * ylhäällä/oikealla/alhaalla/vasemmalla */
marginaali: 4em 5em 3em 5em;
/ * ylhäällä/vaakasuorassa/alhaalla */
marginaali: 4em 5em 3em;
/ * Automaattisen marginaalin käyttäminen */
marginaali: 3em auto;

Lähtö:

Voit määrittää marginaaliominaisuuden käyttämällä yhtä, kahta, kolmea tai neljää arvoa. Arvot voivat olla pituus, prosenttiosuus tai esimerkiksi avainsana auto. Ymmärrämme, miten se toimii:

• Kun määrität vain yhden arvon, se tarkoittaa, että kaikilla neljällä sivulla on sama marginaali.
• Kun määrität kaksi arvoa, ensimmäinen arvo tarkoittaa marginaali ja marginaali-pohja kun taas toinen arvo määrittää marginaali-oikea ja marginaali-vasen.
• Kun määrität kolme arvoa, ensimmäinen ja viimeinen pätevät marginaali ja marginaali-pohja vastaavasti. Keskiarvo on vaakasuoralle alueelle, ts. marginaali-oikea ja marginaali-vasen.
• Kun määrität kaikki neljä arvoa, ne koskevat ylhäällä, oikealla, alhaalla ja vasemmalla (myötäpäivään).

Huomaa, että voit käyttää näitä pikanäppäimiä myös pehmuste- ja reunusominaisuuksiin.

Katso myös: Essential CSS3 Properties -huijausarkki

Oletko koskaan käyttänyt negatiivista marginaalia? Poistaaksemme sen visualisoimiseksi näyttö: ei mitään toisen kuvan näyttämiseksi ja aseta sitten negatiivinen marginaali.

/* .näyttö {
näyttö: ei mitään! tärkeä;
} */
.content-box {
näyttö: flex;
taipuisa suunta: rivi;
kohdista kohdat: keskelle;
taustaväri: #fdf;
korkeus: 20em;
leveys: 30em;
pehmuste: 5em 2em 8em;
reunatyyli: kiinteä katkoviivainen harjanne;
reunan leveys: 4em 2em 2em;
raja-säde: 20%;
/ * Negatiivisen marginaalin käyttäminen */
marginaali: 3em -20em 3em 5em;
}

Lähtö:

Laatikkomalli: Pixelin täydellinen verkkosivusto

Laatikkomallin avulla voit määrittää tilaa elementtien väliin, lisätä reunuksia ja rakentaa helposti monimutkaisen ulkoasun. Voit aloittaa heti luodaksesi upean verkkosivuston. Samaan aikaan voit tutustua rajalaatikko omaisuutta yksityiskohtaisesti ja leikkiä yllä olevalla koodilla.

Sinun on ymmärrettävä, että CSS: n sisällön asettamiseen on olemassa muita menetelmiä. Näitä ovat CSS Grid ja CSS Flexbox. Kun olet tyytyväinen laatikkomalliin, sinun on jatkettava näiden vaihtoehtojen oppimista.

CSS Flexbox -opetusohjelma: perusteet

Sijoita HTML -elementit täydellisesti CSS Flexboxin avulla.

Lue seuraava

Kirjailijasta