Css kijelző (blokk, inline, nincs)

előző ◈ a következő

CSS display tulajdonság kell beállítani, hogy milyen típusú a html elem képest más elemekkel. Leegyszerűsítve ez a lehetőség a felelős, hogy a kijelző elem a másikhoz képest. Mert lehet, hogy a szükséges „különleges hatásokat”.

Syntax CSS megjelenítése

Ahol az érték lehet:

  • blokk - blokk elem (automatikusan létrehoz egy soremelés)
  • inline - inline elem (nem hoz létre új sor);
  • inline-blokk - származéka inline. Ugyancsak nem hoz létre új sort, de az elem adja meg a szélesség és magasság;
  • list-item - blokk elem a listából marker;
  • járatni - az elem hoz létre, mint a blokk, vagy beépített a szövegkörnyezettől függően;
  • táblázat - a táblázatban megegyezik (a címke ), Transfer vonalak;
  • inline-asztal - származéka a táblázat. Az elem épül, de a körül az áramlás a szomszédos elemek;
  • asztali képaláírás - megteremteni a táblázat fejlécében (analóg címke
    • );
  • táblázat-sejt - sejt táblalétrehozáshoz elem (analóg címke
    • );
  • táblázat-oszlop - meghatározó eleme oszlop a táblázatban;
  • táblázat-sor - elem meghatározó egy sort a táblázatban;
  • none - ez az elem nem jelenik meg az oldalon, és az összes többi elemet úgy viselkedik, mintha egyáltalán nem;
  • öröklik - öröklik a szülő elem;

    • megjegyzés
    Alapértelmezésben minden elem alsó kijelzőn. inline

    Alkalmazási példák megjelenítése

    Példa №1. A display: block

    A példában adtunk ingatlan border: 1px solid # 000 megmutatni, milyen régióban egy blokk elem.

    Itt van, hogyan néz ki az oldalon:

    Bekezdés №1. Úgy véljük, a kijelző elemek. megjelenítendő szöveget tulajdonság: block Mint látható, a vonal automatikusan kitudódott

    Példa №2. A display: none

    Itt van, hogyan néz ki az oldalon:

    Bekezdés №1. Úgy véljük elemei display: none. Szöveg display: none Mint látható, a szöveg blokk sem hiányzik

    Logikus, hogy tartsa az egyesület a tulajdonság visibility: hidden. de vele ellentétben, a display: none nem ad helyet tárgyakat.

    Ez a funkció nagyon hasznos, például, ami hatását a legördülő menüből.

    Példa №3. A használata display: inline-block

    Itt van, hogyan néz ki az oldalon:

    Bekezdés №1. Úgy véljük elemekkel. megjelenítendő szöveget tulajdonság: inline-block Mint látható, a blokk közvetlenül bekerül a tartalmat

    előző ◈ a következő