Redzamība - CSS-triki

Anonim

visibilityĪpašums CSS ir divas dažādas funkcijas. Tas slēpj tabulas rindas un kolonnas, kā arī elementu, nemainot izkārtojumu.

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

visibilityir četras derīgas vērtības: visible, hidden, collapse, un inherit. Mēs apmeklēsim katru no viņiem, lai uzzinātu vairāk.

redzams

Tāpat kā tas izklausās, visiblepadara lietas redzamas. Pēc noklusējuma nekas nav paslēpts, tāpēc šī vērtība neko nedara, ja vien neesat iestatījis hiddenšo vai šī elementa vecāku.

paslēpts

hidden Vērtība slēpj lietas. Tas ir savādāk nekā izmantot display: none, jo hidden tikai vizuāli slēpj elementus. Elements joprojām atrodas un joprojām aizņem vietu lapā, taču jūs to vairs nevarat redzēt (piemēram, necaurredzamību pagriežot uz 0). Interesanti, ka šis īpašums netiek mantots pēc noklusējuma. Tas nozīmē, ka atšķirībā no display vai opacity īpašībām jūs varat izveidot elementu hiddenun joprojām ir viens no tā bērniem visible:

Ievērojiet, ka, neskatoties uz to, ka vecāku elements neizraisa :hover.

sabrukt

Šis ietekmē tikai tabulas rindas ( ), rindu grupas (piemēram, ), kolonnas ( ), kolonnu grupas ( ) vai elementus, kas ir izveidoti tādā veidā display).

Atšķirībā no hiddenšīs vērtības tiek paslēpts tabulas apakšelements, neatstājot vietu tur, kur tā bija. Ja tas tiek izmantots jebkur, izņemot tabulas apakšelementu, tas darbojas tāpat visibility: hidden.

Ar to ir tik daudz dīvainību, ka ir grūti zināt, ar ko sākt. Tāpat kā uzkoda:

  • Pārlūks Chrome / Safari sabruks rindā, taču tā aizņemtā vieta paliks. Un, ja tabulas šūnās iekšpusē bija apmale, tā sabruks vienā malā gar augšējo malu.
  • Pārlūkā Chrome / Safari netiks sakļauta kolonna vai kolonnu grupa.
  • Safari sakļaut tabulas šūnu (nepareizi), bet Chrome to nedarīs (pa labi).
  • Jebkurā pārlūkprogrammā, ja šūna atrodas sakļautā kolonnā (neatkarīgi no tā, vai tā faktiski sabrūk vai nē), šīs šūnas teksts netiks rādīts.
  • Opera (pirms WebKit) sabruks crap no visa, izņemot tabulas šūnu (kas ir pareizi).

Ir vairāk, bet būtībā: nelietojiet to nekad.

mantot

Noklusējuma vērtība. Tas vienkārši liek elementam mantot vecāka vērtību.

Flexbox

visibility: collapse; tiek izmantots arī Flexbox, un tas ir precīzāk definēts.

Pārlūka atbalsts

Pamati, neņemot vērā visas dīvainības ar sabrukumu:

Jebkurš Jebkurš Jebkurš 4+ 4+ Jebkurš Jebkurš

IE 7 - neatbalsta collapsevai inherit.