CSS ülevaade stiilid

CSS-skeemid on rohkem kui lihtsalt piirid

CSSi ülevaade on kinnisvara segane. Kui te esimest korda sellest teada saite, on raske mõista, kuidas see isegi kaugemalgi piiriomandist erineb. W3C selgitab, et see sisaldab järgmisi erinevusi:

Joonised ei võta ruumi

See avaldus iseenesest on segane. Kuidas veebisaidil olev objekt veebilehel ei asu ruumi? Aga kui te arvate, et teie veebileht on sibulaga sarnane, võib iga lehe ese olla teise elemendi ülaosas. Konstruktsiooni vara ei asu ruumi, sest see asetatakse alati elemendi kasti peal.

Kui elemendi ümber asetatakse ülevaade, ei mõjuta see seda, kuidas see element lehel aset leiab. See ei muuda elemendi suurust ega positsiooni. Kui panete elemendile ülevaate, võtab see sama palju ruumi, nagu oleks teil selle elemendi ülevaade. See ei kehti piiri kohta. Elemendi välislävi ja kõrgus lisatakse elemendi piiri. Nii et kui teil oleks pilt, mis oli 50 pikslit lai ja mille 2-piksliline piir oleks, võtab see 54 pikslit (2 pikslit iga külgpiiri kohta). Sama kujutis koos 2-pikslise kontuuriga võtab teie lehele üle 50 piksli laiuse, kontuur kuvatakse pildi välimise serva kohal.

Joonised võivad olla mitte-täisnurksed

Enne kui hakkate mõtlema, "lahe, nüüd võin ringi joonistada!" Mõtle uuesti. Sellel avaldusel on teistsugune tähendus kui võite arvata. Kui lisate elemendile piiri, tõlgendab brauser elementi nii, nagu oleks see üks hiiglaslik ristkülikukast. Kui kast jagatakse mitu rida, jätab brauser lihtsalt servadest lahti, kuna kast ei ole suletud. Näib, et brauser näeb piiri lõpmata laia ekraaniga - piisavalt lai, et see piir oleks üks pidev ristkülik.

Vastupidi, ülevaade vara võtab arvesse servad. Kui ülevaatlik element katab mitu rida, lõpeb joon rea lõpus ja taastub uuesti järgmisele reale. Võimaluse korral jääb kontuur täielikult ühendatuks, luues mitte-ristkülikukujulise kuju.

Üldise vara kasutamine

Konkreetse vara üks parimaid kasutusviise on otsinguterminite esiletõstmine. Paljud saidid teevad seda taustavärvi abil, kuid võite kasutada ka ülevaade vara ja ärge muretsege oma lehtede lisavahemiku lisamise pärast.

Kontuur-värvivariand aktsepteerib terminit "inverts", mis muudab kontuuri värvi praeguse taustaga pöördväärtuseks. See võimaldab esile tõsta dünaamiliste veebisaitide elemente, ilma et oleks vaja teada, milliseid värve kasutatakse .

Võite kasutada ka ülevaadete omadusi, et eemaldada punktiirjoon ümber aktiivsete linkide. See CSS-trikkide artikkel näitab, kuidas punktiirjoont eemaldada.