Vidljivost - CSS-triki

Anonim

visibilityHotel v CSS ima dve različni funkciji. Skriva vrstice in stolpce tabele, prav tako pa tudi element, ne da bi spremenil postavitev.

p ( visibility: hidden; ) tr ( visibility: collapse; )

visibilityima štiri veljavne vrednosti: visible, hidden, collapse, in inherit. Preučili bomo vsakega od njih, da bi izvedeli več.

vidna

Tako kot se sliši, visiblenaredi stvari vidne. Nič ni privzeto skrito, zato ta vrednost ne naredi ničesar, razen če ste nastavili hiddentega ali nadrejenega elementa.

skrito

hidden Vrednost skriva stvari. To je drugače kot pri uporabi display: none, ker hidden le vizualno skrije elemente. Element je še vedno tam in še vedno zavzema prostor na strani, vendar ga ne vidite več (nekako tako, kot da neprosojnost spremenite na 0). Zanimivo je, da ta lastnost privzeto ne podeduje. To pomeni, da lahko za razliko od display ali opacity lastnosti naredite element hiddenin imate še vedno enega od njegovih podrejenih visible, kot je ta:

Upoštevajte, da nadrejeni element, čeprav je skrit, ne sproži :hover.

propad

Ta vpliva samo na vrstice tabele ( ), skupine vrstic (kot ), stolpce ( ), skupine stolpcev ( ) ali elemente, narejene tako, da display).

V nasprotju s hiddentem ta vrednost skriva podelement tabele, ne da bi pustila prostor, kjer je bila. Če se uporablja kjer koli, razen v podelementu tabele, deluje kot visibility: hidden.

Pri tem je toliko čudnosti, da je težko vedeti, kje začeti. Samo kot predjed:

  • Chrome / Safari bo strnil vrstico, vendar bo prostor, ki ga je zasedel, ostal. In če so celice tabele znotraj imele obrobo, se bo ta zložila v eno samo obrobo vzdolž zgornjega roba.
  • Chrome / Safari ne bo strnil stolpca ali skupine stolpcev.
  • Safari strne celico tabele (napačno), Chrome pa ne (desno).
  • Če je celica v stolpcu, ki je strnjen, v katerem koli brskalniku (ne glede na to, ali se dejansko strne), besedilo v tej celici ne bo prikazano.
  • Opera (pred WebKit) bo strla vse sranje, razen celice tabele (kar je pravilno).

Obstaja še več, vendar v bistvu: tega ne uporabljajte nikoli.

podedovati

Privzeta vrednost. To preprosto povzroči, da element podeduje vrednost nadrejenega elementa.

Flexbox

visibility: collapse; se uporablja tudi v Flexboxu in je bolj natančno opredeljen.

Podpora za brskalnik

Osnove, ne da bi upoštevali vse muhe s propadom:

Kaj Kaj Kaj 4+ 4+ Kaj Kaj

IE 7- ne podpira collapseoz inherit.