Iga element veebilehel on ristkülikukujuline kast. CSS-i kuvaomadus määrab selle ristkülikukasti käitumise. Tavaliselt kasutatakse ainult käputäie väärtusi:
div ( display: inline; /* Default of all elements, unless UA stylesheet overrides */ display: inline-block; /* Characteristics of block, but sits on a line */ display: block; /* UA stylesheet makes things like and block */ display: run-in; /* Not particularly well supported or common */ display: none; /* Hide */ )
Kõigi elementide vaikeväärtus on sees. Enamik „Kasutajaagendi stiililehti” (vaikestiilid, mida brauser rakendab kõikidele saitidele) lähtestab paljud elemendid blokeerimiseks. Vaatame need kõik läbi ja käsitleme siis mõnda teist vähem levinud väärtust.
Järjekorras
Elementide vaikeväärtus. Mõelge sellistele elementidele nagu , või, kuidas teksti nendesse elementidesse teksti mähkimine tekstistringi ei lõhu tekstivoogu.
Element on 1px punane ääris. Pange tähele, et see asub ülejäänud tekstiga otse joontes.
Reasisene element aktsepteerib veerist ja polsterdust, kuid element istub sellegipoolest rida, nagu võite arvata. Ääris ja polster suruvad teisi elemente ainult horisontaalselt, mitte vertikaalselt.
Sisseehitatud element ei aktsepteeri heightja width. See lihtsalt ignoreerib seda.
Sisse blokeeritud
Element, mille väärtuseks inline-blockon määratud, on väga sarnane tekstisisesega, kuna see asetub teksti loomuliku vooluga ("baasjoonel"). Erinevus on selles, et olete võimeline määrama a widthja heightmida austatakse.
Blokeeri
blockBrauseri UA stiilitabel määrab hulga elemente . Nad on tavaliselt konteiner elemente, nagu , ja
. Samuti kirjuta tekst “blokeerib” nagu
ja
. Plokitaseme elemendid ei istu reas, vaid murravad neist mööda. Vaikimisi (ilma laiust määramata) võtavad nad nii palju horisontaalset ruumi kui võimalik.
Kaks punase äärisega elementi on
mis on ploki taseme elemendid. Nende vaheline element ei istu reas, kuna plokid lagunevad allpool olevate elementide all.
Sissesõit
Esiteks ei tööta see atribuut Firefoxis. Sõna on see, et selle spetsifikatsioon pole piisavalt täpselt määratletud. Et sellest aru saada, on see justkui see, kui soovite, et päiseelement istuks selle all oleva tekstiga joondatud kujul. Selle hõljumine ei toimi ega ka midagi muud, kuna te ei soovi, et päis oleks selle all asuva tekstielemendi laps, soovite, et see oleks tema enda iseseisev element. „Brauserites“ on see järgmine:
Ärge siiski arvestage sellega.
Flexbox
displayVara kasutatakse ka uute fangled paigutus meetodeid nagu FlexBox.
.header ( display: flex; )
Flexboxi süntaksil on mõned vanemad versioonid, seega palun vaadake selle artikli süntaksit, kuidas kasutada flexboxi parimat brauserituge. Vaadake kindlasti seda Flexboxi täielikku juhendit.
Voolujuur
flow-rootKuva väärtus loob uue "blokeerida vormingu kontekstis", kuid on muidu sarnane block. Uus BFC aitab selliste asjadega nagu ujukite puhastamine, eemaldades selleks vajaduse häkkimise järele.
.group ( display: flow-root; )
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
Chrome
Firefox
IE
Edge
Safari
58
53
Ei
79
13
Mobiil / tahvelarvuti
Android Chrome
Android Firefox
Android
iOS-i Safari
88
85
81
13.0-13.1
Võre
Võrgu paigutuse määrab algselt ka kuvaomadus.
body ( display: grid; )
Siin on meie võrgu paigutuse juhend, mis sisaldab brauseri tugitabelit.
Puudub
Eemaldab lehelt elemendi täielikult. Pange tähele, et kui element on endiselt DOM-is, eemaldatakse see visuaalselt ja muul mõeldaval viisil (te ei saa sellele ega selle lastele vahekaarti teha, ekraanilugejad ignoreerivad seda jne).
Tabeli väärtused
Seal on terve hulk kuvatavat väärtust, mis sunnib mitte-tabeli elemente käituma nagu tabeli elemente, kui teil seda vaja on. See on haruldane, kuid mõnikord võimaldab see teil oma koodiga olla "semantilisem", kasutades samal ajal tabelite ainulaadseid positsioneerimisvõimeid.
