visibilityCSS nuosavybė turi dvi skirtingas funkcijas. Jis slepia lentelės eilutes ir stulpelius, taip pat slepia elementą, nekeisdamas išdėstymo.
p ( visibility: hidden; ) tr ( visibility: collapse; )visibilityturi keturias galiojančias vertybes: visible, hidden, collapseir inherit. Peržiūrėsime kiekvieną iš jų, kad sužinotume daugiau.
matomas
Kaip ir skamba, visibledaro daiktus matomus. Pagal numatytuosius nustatymus niekas nėra paslėpta, todėl ši vertė nieko nedaro, nebent nustatėte hiddenšį elementą arba šio elemento tėvus.
paslėpta
hidden Vertės slepia dalykus. Tai skiriasi nuo naudojimo display: none, nes hidden elementai slepiami tik vizualiai. Elementas vis dar yra ir vis tiek užima vietos puslapyje, bet jo nebematysite (tarsi paverskite neskaidrumą į 0). Įdomu tai, kad ši nuosavybė nepaveldima pagal nutylėjimą. Tai reiškia, kad, skirtingai nei display arba opacity savybės, galite sukurti elementą hiddenir vis tiek turėti vieną iš savo vaikų visible, pavyzdžiui:
Atkreipkite dėmesį, kad nors ir paslėptas, pagrindinis elementas nesuaktyvina :hover.
žlugti
Tai daro tik lentelių eilutes ( ), eilučių grupes (pvz., ), Stulpelius ( ), stulpelių grupes ( ) arba elementus, kurie buvo sukurti tokiu būdu display).
Priešingai hidden, ši reikšmė slepia lentelės subelementą, nepalikdama vietos ten, kur ji buvo. Jei jis naudojamas bet kur, išskyrus lentelės sub-elementą, jis veikia kaip visibility: hidden.
Dėl to yra tiek daug keistenybių, kad sunku žinoti, nuo ko pradėti. Tiesiog kaip užkandis:
- „Chrome“ / „Safari“ žlugs eilutė, tačiau jos užimta vieta išliks. Ir jei viduje esančios lentelės langeliai turėjo kraštinę, tai suskaidys į vieną kraštą išilgai viršutinio krašto.
- „Chrome“ / „Safari“ nesutrauks stulpelių ar stulpelių grupės.
- „Safari“ sutraukti lentelės langelį (neteisinga), bet „Chrome“ (ne).
- Bet kurioje naršyklėje, jei langelis yra sutrauktame stulpelyje (nesvarbu, ar jis iš tikrųjų sutrinka, ar ne), langelio tekstas nebus rodomas.
- „Opera“ (iš anksto parengta „WebKit“) sutriuškins viską, išskyrus lentelės langelį (kuris yra teisingas).
Yra daugiau, bet iš esmės: nenaudokite to niekada.
paveldėti
Numatytoji vertė. Tai tiesiog priverčia elementą paveldėti savo tėvų vertę.
„Flexbox“
visibility: collapse; yra naudojamas ir „Flexbox“, ir geriau apibrėžtas.
Naršyklės palaikymas
Pagrindai, neatsižvelgiant į visas keistenybes su žlugimu:
| Bet koks | Bet koks | Bet koks | 4+ | 4+ | Bet koks | Bet koks |
IE 7- nepalaiko collapsearba inherit.