CSS Display (wyświetlacz) i widoczność (widoczność)

Jak wyświetlić własność elementowa ma zostać wyświetlony, atrybut widoczności określa, że dany element powinien być widoczny lub ukryty.

Box 1

Box 2

Box 3

Ukryte elementy - display: none lub visibility: hidden

Ukrywanie elementu przez atrybut wyświetlacza ustawionej na "none" lub mienia widoczności z "ukrytym". Należy jednak zauważyć, sposoby te będą różne wyniki.

visibility: hidden, aby ukryć element, ale ukryty elementem pozostaje taka sama jak przed okupacją, a nie ukryte miejsca. Oznacza to, że chociaż element jest ukryty, ale nadal mają wpływ na układ.

Przykłady

h1.hidden {visibility:hidden;}

Spróbuj »

display: none ukryć element, a ukryte elementy nie zajmuje miejsca. Innymi słowy, element ten nie tylko jest ukryty i przestrzeń zajmowana przez pierwotnego elementu zniknie z układu strony.

Przykłady

h1.hidden {display:none;}

Spróbuj »

CSS Display - elementy blokowe i inline

Blok element jest elementem, zajmując całą szerokość przerwy linii przed i po nim.

Przykłady elementów blokowych:

<H1>
<P>
<Div>

elementy Inline wystarczy niezbędnej szerokości, nie wymusza podziały wiersza.

Przykłady elementów inline:

<Span>
<a>

Jak zmienić element wskaźnikowy

Można zmienić elementy blokowe i elementy inline i odwrotnie, może sprawić, że wygląd strony jest połączeniem szczególny sposób i nadal przestrzegać standardów internetowych.

Poniższy przykład wyświetla elementy listy jako elementy inline:

Przykłady

li {display:inline;}

Spróbuj »

Następujące elementy przykładem rozpiętości jako elementy blokowe:

Przykłady

span {display:block;}

Spróbuj »

Uwaga: Zmiana rodzaju elementów graficznych, aby zobaczyć, jak jest wyświetlany element, to jakiego rodzaju elementów.Na przykład: elementu liniowego ustawiony na display: block nie może mieć swoje własne wewnętrzne elementy blokowe zagnieżdżonych.