CSS tanfolyam

előző ◈ a következő

CSS tanfolyam. Lecke 39. láthatóság elemek. Tulajdonságok láthatóság: és a kijelzőn:.

CSS tanfolyam. Lecke 39. láthatóság elemek.
Tulajdonságok láthatóság: és a kijelzőn:.

Annak érdekében, hogy kihasználják a láthatatlan elem tulajdonságai láthatóság (ebben a formában: visibility: hidden;) és a kijelző (ebben a formában: display: none;).

Megjegyzendő, hogy ez a két lehetőség más-más eredményt.

visibility: hidden; - (visibility: hidden;) elem lesz rejtve, de továbbra is elfoglalni ugyanazon a helyen, mint korábban.

display: none; - (display: none;) és az elem lesz rejtve, de most már nem vesz részt ugyanazon a helyen. Az oldal jelenik meg, ha az elem egyáltalán nem.

Vegyük mindkét lehetőség példákkal.

1. példa láthatóság: rejtett;

A gomb megnyomása a jogot, hogy adjunk a tulajdon visibility: hidden;
A gombra kattintva most.

Ez a szöveg egy nagy díva kifejezetten azzal a céllal, hogy bemutassák a szövegben bárhol ezt a kis díva. Ha megnyomja figyelmét, hogy a változások (és hogy ez változik) a helyét a szövegben.

2. példa display: none;

A gomb megnyomása a jogot, hogy adjunk a tulajdon display: none;
A gombra kattintva most.

Ez a szöveg egy nagy díva kifejezetten azzal a céllal, hogy bemutassák a szövegben bárhol ezt a kis díva. Ha megnyomja figyelmét, hogy a változások (és hogy ez változik) a helyét a szövegben.

Most viszont, hogy az elmélet.

Az ingatlan láthatóság: kétféleképpen működhet:
  • láthatóság: láthatók; - láthatóság engedélyezve van, ez az alapértelmezett.
  • visibility: hidden; - Kapcsolja ki a láthatóságot, rejtett eleme, lásd a fenti 1. példa, mint a futás az ingatlan.

Ami a tulajdonságok a kijelzőn. Itt lehetséges értékeit sokkal több. Tekintsük azokat az alábbi táblázatban.

Lehetséges értékek a tulajdonságok megjelenítéséhez:

Default. Ez azt mutatja, az elem inlaynovy (például ).
Default. Jeleníti meg egy elem, mint egy inline elem (például )

Megmutatja a blokk elem (például

).
Jeleníti meg egy elem blokként elemmel (például

)

Ez azt mutatja, mint egy blokk eleme tartályba inlaynovogo szinten. A blokkon belül van formázva, mint egy négyszögletes régió blokk szintű. A elem maga van formázva, mint egy téglalap alakú terület inlaynovogo szinten.
Jeleníti egy elem, mint egy inline-szintű blokk tartályba. A készülék belsejében blokk van formázva blokk szintű dobozt, és az elem maga van formázva egy inline szintű mezőbe.

Ez azt mutatja, mint egy tábla elem inlaynovogo szinten.
Az elem jelenik meg egy inline-szintű táblázatban.

Ez lehetővé teszi, hogy az elemet úgy viselkedik, mint elem

  • .
    Hagyja, hogy a elem viselkedjen
  • elem.

    Megmutatja egy elem vagy egy blokk vagy inlaynovy, a szövegkörnyezettől függően.
    Jeleníti egy elem, mint akár blokk vagy inline, a szövegkörnyezettől függően.

    Ez lehetővé teszi, hogy az elemet úgy viselkedik, mint elem

    .
    Hagyja, hogy a elem viselkedjen
    elem.

    Ez lehetővé teszi, hogy az elemet úgy viselkedik, mint elem

    .
    Hagyja, hogy a elem viselkedjen elem.

    Ez lehetővé teszi, hogy az elemet úgy viselkedik, mint elem

    .
    Hagyja, hogy a elem viselkedjen elem.

    Ez lehetővé teszi, hogy az elemet úgy viselkedik, mint elem

    .
    Hagyja, hogy a elem viselkedjen elem.

    Ez lehetővé teszi, hogy az elemet úgy viselkedik, mint elem

    .
    Hagyja, hogy a elem viselkedjen elem.

    Ez lehetővé teszi, hogy az elemet úgy viselkedik, mint elem

    .
    Hagyja, hogy a elem viselkedjen elem.

    Ez lehetővé teszi, hogy az elemet úgy viselkedik, mint elem

    .
    Hagyja, hogy a elem viselkedjen elem.

    Egy elem általában nem jelennek meg (nem működik a szál).
    Az elem nem jelenik meg egyáltalán (nincs hatással elrendezés).

    Property Value kijelző: lesz örökölt a szülő.
    Az érték a display tulajdonság lesz örökölt a szülő elem.

    Ez használ a következő szabályok stílusok

    A példában használt a következő kódot a HTML (a kulcs pont):

    Új osztályok a CSS stíluslap fájlt, és a HTML kódot is fel lehet használni a mi a következő tudományos vizsgálat esetében.
    css_039_001.html ← Kattintson ide, hogy néz ki a példa ezen az oldalon.
    css_039_001.zip ← le a példát, hogy telepítse a webhelyen.

    Emlékeztető. Könyvtár jquery.js letöltöttük előre, még a 33. osztályba.

    ***** - funkcionális gép mozgását az oldalakon a CSS tanfolyam *****

    Search. Első Előző Következő utolsó Case. szám /

    Ön kattintott olyan magyarázó rajz, amely megmutatja, hogy egy adott funkciót. Csattanó ezek a képek nem szükséges, nincs értelme.

    Köszönjük, hogy meglátogatta ezt az oldalt, és a figyelmet a tartalmát és megjelenését. Sok szerencsét és sikert!

    Kapcsolódó cikkek

    előző ◈ a következő
    .
    Hagyja, hogy a elem viselkedjen     ) Elem.

    Ez lehetővé teszi, hogy az elemet úgy viselkedik, mint elem

    .
    Hagyja, hogy a elem viselkedjen     		elem.

    Ez lehetővé teszi, hogy az elemet úgy viselkedik, mint elem