CSS-leveysominaisuus määrittää elementin sisältöalueen leveyden. Tämä alue on elementin reunuksen, pehmusteen ja marginaalin välinen tila. Lisäksi CSS-leveysominaisuus, jonka arvo on ' sopiva sisältö ” säätää elementin leveyttä sisällön mukaan.
Tämä tutkimus selittää CSS-leveysominaisuuden arvolla fit-content.
Kuinka käyttää CSS-leveysominaisuutta fit-content-arvon kanssa?
Jos haluat käyttää CSS-leveysominaisuutta fit-content-arvon kanssa, tarkista annettu syntaksi:
leveys: sovi-sisältö
Esimerkki
Lisää HTML:ään kolme div-elementtiä samalla luokan nimellä ' laatikko ”ja kolme eri luokkaa” väri-1 ”, “ väri - 2 ”, ja ” väri - 3 ”, vastaavasti. Lisää
-elementti jokaisen div sisällä lisätäksesi sisältöä verkkosivulle:
< div luokkaa = 'laatikon väri-1' >
< s > CSS-leveyden sopiva sisältö s >
div >
< div luokkaa = 'laatikon väri-2' >
< s > Hei maailma ! s >
div >
< div luokkaa = 'laatikon väri-3' >
< s > Ryhmätyö alkaa luottamuksen rakentamisesta. Olemme tiimityötä varten yhteinen tehtävä. s >
div >
Tässä on HTML-koodin tulos:
Toistaiseksi olemme keskustelleet HTML-sivusta. Nyt seuraavassa osiossa käytämme erilaisia CSS-tyylejä HTML-elementteihin, jotta ne näyttävät paremmilta. Jatkuvassa esimerkissä tarkastelemme ' leveys 'omaisuus jolla on arvo' sopiva sisältö ' CSS:ssä.
Tyyli 'laatikko' jako
.laatikko {leveys: sovi-sisältö;
korkeus: 50px;
väri: haamuvalkoinen;
täyte: 6px;
marginaali: 2px;
fonttikoko: 18px;
}
' .laatikko ” viittaa div-luokan laatikkoon. Alla on siihen sovellettavat ominaisuudet:
-
- ' leveys 'omaisuus arvolla' sopiva sisältö ” käyttää käytettävissä olevaa tilaa, mutta se ei ylitä sisältöä.
- ' korkeus ” on ominaisuus, joka määrittää elementin korkeuden.
- ' väri- ” määrittää elementin fontin värin.
- ' pehmuste ”-ominaisuus tuottaa tilaa elementin reunan sisälle tai sisällön ympärille.
- ' marginaali ” määrittää tilan elementin ympärillä.
- ' Fonttikoko ”-ominaisuus määrittää kirjasinkoon.
Tyyli “väri-1” jako
.väri- 1 {taustaväri: #00ABB3;
}
' taustaväri '-ominaisuus on asetettu ' .väri-1 ” div.
Tyyli “väri-2” jako
.väri- 2 {taustaväri: #083AA9;
}
Tyyli “väri-3” jako
taustaväri: #4C6793;
}
Voidaan havaita, että elementin leveys asetetaan yhtä suureksi kuin sisältö:
Sepä hienoa! Olemme oppineet menestyksekkäästi CSS:n käytön leveys 'omaisuus arvolla' sopiva sisältö ”.
Johtopäätös
CSS-leveys-ominaisuuden avulla voimme käyttää useita arvoja. Nämä arvot ovat prosentteina, pikseleinä tai enemmän. Jos haluat asettaa sen sisällön mukaan, ' sopiva sisältö ”-arvo voidaan asettaa. Tässä viestissä on kuvattu CSS-leveysominaisuuden arvo fit-content ja käytännön esittely.